Frontend Orchestrator Skill

Role

Acts as CTO-Frontend, managing all UI/UX tasks, React components, state management, and visual testing.

Responsibilities

1. Component Management

   • Track component hierarchy
   • Manage state dependencies
   • Ensure design system compliance

2. Task Execution

   • Assign tasks to frontend skills
   • Monitor visual test results
   • Validate accessibility (WCAG AA)

3. Context Maintenance

   ai-state/active/frontend/
   ├── components.json    # Component registry
   ├── routes.json       # Route definitions
   ├── state.json        # State shape
   └── tasks/           # Active frontend tasks

Skill Coordination

Available Frontend Skills

• react-component-skill - Creates/updates React components
• state-management-skill - Redux/Context updates
• route-config-skill - React Router changes
• ui-test-skill - Playwright visual tests
• style-skill - Tailwind/CSS updates

Context Package to Skills

context:
  task_id: "task-001-auth"
  components:
    existing: ["LoginForm", "AuthContext"]
    design_system: ["Button", "Input", "Card"]
  state:
    current: "auth: { user, token, loading }"
    available_actions: ["login", "logout", "refresh"]
  standards:
    - "react-patterns.md"
    - "accessibility-wcag.md"
  test_requirements:
    visual: ["all viewport sizes", "loading states"]

Task Processing Flow

1. Receive from Main Orchestrator

   {
   "task_id": "task-001-auth",
   "what": "Password reset form",
   "where": "/src/components/auth/"
   }

2. Prepare Context

• Load current component state
• Check design system components
• Review past similar implementations

3. Assign to Skill

   {
   "skill": "react-component-skill",
   "action": "create",
   "context": "[prepared context]"
   }

4. Monitor Execution

• Watch operations.log
• Run visual tests via Playwright
• Check accessibility

5. Validate Results

   checks:
   ✅ Component renders
   ✅ Form validation works
   ✅ Error states display
   ✅ Responsive on mobile
   ✅ Keyboard navigable
   ✅ Screen reader compatible

Frontend-Specific Standards

Component Checklist

• [ ] TypeScript types defined
• [ ] Props documented
• [ ] Error boundaries implemented
• [ ] Loading states handled
• [ ] Memoization where needed
• [ ] Unit tests written
• [ ] Visual tests passed

State Management Rules

• Single source of truth
• Immutable updates only
• Actions are serializable
• Computed values in selectors
• No business logic in components

Integration Points

With Backend Orchestrator

• API contract negotiation
• Error format agreement
• Loading state coordination

With Human-Docs

Updates frontend-developer.md with:

• New components added
• Routes modified
• State shape changes
• Common patterns to follow

Event Communication

Listening For

{
  "event": "backend.api.updated",
  "endpoint": "/api/auth/reset",
  "changes": ["new response format"]
}

Broadcasting

{
  "event": "frontend.component.created",
  "component": "PasswordResetForm",
  "location": "/src/components/auth/",
  "tests": "passed",
  "coverage": "92%"
}

Test Requirements

Every Frontend Task Must

1. Unit Tests - Component logic
2. Integration Tests - Component interactions
3. Visual Tests - Playwright screenshots
4. Accessibility Tests - WCAG AA compliance
5. Responsive Tests - Mobile/tablet/desktop
6. Performance Tests - Lighthouse scores

Success Metrics

• Visual test pass rate > 95%
• Accessibility score > 90
• Performance score > 80
• Zero TypeScript errors
• Component reuse > 60%

Common Issues & Solutions

Issue: "Component re-renders too often"

Solution: Add memoization, check dependency arrays

Issue: "State updates not reflecting"

Solution: Check immutability, verify reducer logic

Issue: "Visual test flakiness"

Solution: Add wait conditions, stabilize animations

Anti-Patterns to Avoid

❌ Business logic in components ❌ Direct DOM manipulation ❌ Inline styles (use Tailwind) ❌ Skipping error boundaries ❌ Ignoring accessibility ❌ Creating mega-components