frontend-worker

name	frontend-worker
description	Implements React dashboard components, state management, and UI features

Frontend Worker

NOTE: Startup and cleanup are handled by worker-base. This skill defines the WORK PROCEDURE.

When to Use This Skill

Use for features involving:

• React components and pages
• Dashboard UI implementation
• State management (React Query, Context)
• Real-time updates (WebSocket/polling)
• Frontend testing

Work Procedure

1. Write tests first (RED) - Create test file with Vitest + Testing Library

   • Component rendering tests
   • User interaction tests
   • API integration tests (mocked)
   • Run bun test to verify tests FAIL

2. Implement feature (GREEN) - Make tests pass

   • Create components in src/components/
   • Use existing UI patterns and libraries
   • Fetch data from API using React Query
   • Handle loading/error states

3. Manual verification with agent-browser

   • Start both API and frontend: bun run dev:all
   • Use agent-browser to navigate and interact
   • Verify UI updates correctly
   • Check responsive design
   • Document each flow tested

4. Run validators

   • bun run typecheck - TypeScript validation
   • bun run lint - Code style
   • bun test - All tests must pass
   • bun run build - Production build succeeds

5. Accessibility check

   • Keyboard navigation works
   • Screen reader compatible
   • Color contrast acceptable

Example Handoff

{
  "salientSummary": "Implemented Kanban board component with drag-and-drop, real-time polling every 5s, and task cards showing title/status/agent. Added 8 component tests and verified all interactions with agent-browser.",
  "whatWasImplemented": "KanbanBoard component with columns for backlog, ready, in_progress, review, done, blocked. TaskCard component with drag handle. useTasks hook with React Query for data fetching and 5s polling. DragAndDropContext using dnd-kit library. Task updates on drop call PATCH /api/tasks/:id. Loading spinner and error state UI. Responsive layout for mobile.",
  "whatWasLeftUndone": "",
  "verification": {
    "commandsRun": [
      {
        "command": "bun test src/components/KanbanBoard.test.tsx",
        "exitCode": 0,
        "observation": "8 tests passing: renders columns, displays tasks, drag-and-drop updates status, loading state, error state, empty columns, responsive layout"
      },
      {
        "command": "bun run build",
        "exitCode": 0,
        "observation": 
      
    
     
      
         
         
      
      
         
         
      
      
         
         
      
      
         
         
      
    
  
   
     
      
         
         
             
             
             
             
             
             
             
             
        
      
    
  
   

When to Return to Orchestrator

• API endpoints not yet implemented
• Design conflicts with existing UI patterns
• Missing dependencies that cannot be installed
• Unclear UX requirements