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/layouts/__tests__/SettingsLayout.test.tsx

@@ -72,6 +72,16 @@ vi.mock('../../hooks/usePlanFeatures', () => ({
   }),
 }));
 
+// Mock useOutletContext to provide parent context
+const mockUseOutletContext = vi.fn();
+vi.mock('react-router-dom', async (importOriginal) => {
+  const actual = await importOriginal();
+  return {
+    ...actual,
+    useOutletContext: () => mockUseOutletContext(),
+  };
+});
+
 describe('SettingsLayout', () => {
   const mockUser: User = {
     id: '1',
@@ -106,6 +116,8 @@ describe('SettingsLayout', () => {
     vi.clearAllMocks();
     // Default: all features are unlocked
     mockCanUse.mockReturnValue(true);
+    // Default: provide parent context
+    mockUseOutletContext.mockReturnValue(mockOutletContext);
   });
 
   const renderWithRouter = (initialPath = '/settings/general') => {