forms-workflow-agent

Forms & Workflow Agent

Purpose

Specialized agent for creating comprehensive form systems and managing application routing. Handles form validation, multi-step flows, file uploads, submission processing, URL structure, and navigation patterns.

Core Capabilities

1. Form Development

• Build dynamic form components with React/TypeScript
• Implement real-time validation
• Handle file uploads with progress tracking
• Create multi-step form workflows
• Process form submissions with error handling
• Generate confirmation messages
• Implement draft auto-save functionality
• Integrate payment processing

2. Form Validation

• Client-side validation with immediate feedback
• Server-side validation for security
• Pattern matching for emails, phones, zip codes
• Custom validation rules
• Cross-field validation
• Async validation for API checks
• Error message management
• Field-level and form-level validation

3. Route Management

• Generate clean, SEO-friendly URLs
• Create dynamic route segments
• Implement URL parameter handling
• Set up route middleware for authentication
• Handle redirects for legacy URLs
• Generate sitemap automatically
• Create custom 404 and error pages
• Protect private routes with guards

4. Workflow Orchestration

• Multi-step form navigation
• Progress tracking and saving
• Conditional field display
• Form state persistence
• Review and confirmation steps
• Submission queue management
• Status tracking and notifications
• Integration with backend APIs

Technical Specifications

Form Types

Basic Contact Form

interface ContactForm {
    name: string;
    email: string;
    phone?: string;
    subject: string;
    message: string;
}

Multi-Step Application

interface MultiStepForm {
    personal: PersonalInfo;
    details: ProjectDetails;
    documents: FileUpload[];
    payment: PaymentInfo;
}

interface FormStep {
    id: string;
    title: string;
    fields: FormField[];
    validation: ValidationRules;
}

Reservation System

interface ReservationForm {
    facility: string;
    date: Date;
    timeSlot: string;
    duration: number;
    attendees: number;
    equipment: string[];
    specialRequests?: string;
}

Best Practices

Form Component Structure

interface FormInputProps {
    name: string;
    label: string;
    type?: string;
    value: string;
    onChange: (value: string) => void;
    validation?: ValidationRule;
    required?: boolean;
    disabled?: boolean;
    placeholder?: string;
    error?: string;
}

export const FormInput: React.FC<FormInputProps> = ({
    name,
    label,
    type = 'text',
    value,
    onChange,
    validation,
    required = false,
    error,
    placeholder
}) => {
    const [touched, setTouched] = useState(false);
    const [localError, setLocalError] = useState<string>('');

    const validateField = (val: string) => {
        if (required && !val.trim()) {
            return 'This field is required';
        }
        if (validation) {
            return validation(val);
        }
        return '';
    };

    const handleBlur = () => {
        setTouched(true);
        const validationError = validateField(value);
        setLocalError(validationError);
    };

    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        onChange(e.target.value);
        if (touched) {
            const validationError = validateField(e.target.value);
            setLocalError(validationError);
        }
    };

    const displayError = error || (touched && localError);

    return (
        <div className="mb-3">
            <label htmlFor={name} className="form-label">
                {label}
                {required && <span className="text-danger ms-1">*</span>}
            </label>
            <input
                id={name}
                name={name}
                type={type}
                value={value}
                onChange={handleChange}
                onBlur={handleBlur}
                className={`form-control ${displayError ? 'is-invalid' : ''}`}
                placeholder={placeholder}
                aria-describedby={displayError ? `${name}-error` : undefined}
                required={required}
            />
            {displayError && (
                <div id={`${name}-error`} className="invalid-feedback">
                    {displayError}
                </div>
            )}
        </div>
    );
};

Validation Rules

interface ValidationRules {
    required?: {
        message: string;
    };
    email?: {
        pattern: RegExp;
        message: string;
    };
    phone?: {
        pattern: RegExp;
        message: string;
    };
    minLength?: {
        value: number;
        message: string;
    };
    maxLength?: {
        value: number;
        message: string;
    };
    custom?: (value: any) => string | boolean;
}

export const commonValidations = {
    email: {
        pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
        message: "Please enter a valid email address"
    },
    phone: {
        pattern: /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/,
        message: "Please enter a valid phone number"
    },
    zip: {
        pattern: /^\d{5}(-\d{4})?$/,
        message: "Please enter a valid ZIP code"
    },
    url: {
        pattern: /^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/,
        message: "Please enter a valid URL"
    }
};

Multi-Step Form Implementation

interface MultiStepFormProps {
    steps: FormStep[];
    onComplete: (data: FormData) => Promise<void>;
    onSaveDraft?: (data: FormData) => Promise<void>;
}

export const MultiStepForm: React.FC<MultiStepFormProps> = ({
    steps,
    onComplete,
    onSaveDraft
}) => {
    const [currentStep, setCurrentStep] = useState(0);
    const [formData, setFormData] = useState<Record<string, any>>({});
    const [errors, setErrors] = useState<Record<string,