refactor: Extract reusable UI components and add TDD documentation

- Add comprehensive TDD documentation to CLAUDE.md with coverage requirements and examples
- Extract reusable UI components to frontend/src/components/ui/ (Modal, FormInput, Button, Alert, etc.)
- Add shared constants (schedulePresets) and utility hooks (useCrudMutation, useFormValidation)
- Update frontend/CLAUDE.md with component documentation and usage examples
- Refactor CreateTaskModal to use shared components and constants
- Fix test assertions to be more robust and accurate across all test files

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

frontend/src/components/ui/FormInput.tsx

@@ -0,0 +1,104 @@
+import React, { forwardRef } from 'react';
+
+interface FormInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+  label?: string;
+  error?: string;
+  hint?: string;
+  /** Size variant */
+  inputSize?: 'sm' | 'md' | 'lg';
+  /** Full width */
+  fullWidth?: boolean;
+  /** Icon to display on the left */
+  leftIcon?: React.ReactNode;
+  /** Icon to display on the right */
+  rightIcon?: React.ReactNode;
+  /** Container class name */
+  containerClassName?: string;
+}
+
+const sizeClasses = {
+  sm: 'px-2 py-1 text-sm',
+  md: 'px-3 py-2',
+  lg: 'px-4 py-3 text-lg',
+};
+
+export const FormInput = forwardRef<HTMLInputElement, FormInputProps>(
+  (
+    {
+      label,
+      error,
+      hint,
+      inputSize = 'md',
+      fullWidth = true,
+      leftIcon,
+      rightIcon,
+      containerClassName = '',
+      className = '',
+      id,
+      ...props
+    },
+    ref
+  ) => {
+    const inputId = id || props.name || `input-${Math.random().toString(36).substr(2, 9)}`;
+
+    const baseClasses =
+      'border rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-brand-500 focus:border-brand-500 transition-colors';
+
+    const stateClasses = error
+      ? 'border-red-500 dark:border-red-500 focus:ring-red-500 focus:border-red-500'
+      : 'border-gray-300 dark:border-gray-600';
+
+    const disabledClasses = props.disabled
+      ? 'bg-gray-100 dark:bg-gray-800 cursor-not-allowed opacity-60'
+      : '';
+
+    const widthClass = fullWidth ? 'w-full' : '';
+
+    return (
+      <div className={`${containerClassName}`}>
+        {label && (
+          <label
+            htmlFor={inputId}
+            className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
+          >
+            {label}
+            {props.required && <span className="text-red-500 ml-1">*</span>}
+          </label>
+        )}
+
+        <div className={`relative ${widthClass}`}>
+          {leftIcon && (
+            <div className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400">
+              {leftIcon}
+            </div>
+          )}
+
+          <input
+            ref={ref}
+            id={inputId}
+            className={`${baseClasses} ${stateClasses} ${disabledClasses} ${sizeClasses[inputSize]} ${widthClass} ${leftIcon ? 'pl-10' : ''} ${rightIcon ? 'pr-10' : ''} ${className}`}
+            {...props}
+          />
+
+          {rightIcon && (
+            <div className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400">
+              {rightIcon}
+            </div>
+          )}
+        </div>
+
+        {error && (
+          <p className="mt-1 text-sm text-red-600 dark:text-red-400">{error}</p>
+        )}
+
+        {hint && !error && (
+          <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">{hint}</p>
+        )}
+      </div>
+    );
+  }
+);
+
+FormInput.displayName = 'FormInput';
+
+export default FormInput;