// Implements React dashboard components, state management, and UI features
Manage tasks on a Mission Board kanban — list, create, claim, update, complete, release, and review tasks via the Mission Board API. Use when the user says /mission or asks about missions/tasks on the board.
Implements Hono API endpoints, database operations, and business logic with Bun/SQLite
Implements CLI tool with command handlers, API client, and Bun compilation to standalone binary
| name | frontend-worker |
| description | Implements React dashboard components, state management, and UI features |
NOTE: Startup and cleanup are handled by worker-base. This skill defines the WORK PROCEDURE.
Use for features involving:
Write tests first (RED) - Create test file with Vitest + Testing Library
bun test to verify tests FAILImplement feature (GREEN) - Make tests pass
src/components/Manual verification with agent-browser
bun run dev:allagent-browser to navigate and interactRun validators
bun run typecheck - TypeScript validationbun run lint - Code stylebun test - All tests must passbun run build - Production build succeedsAccessibility check
{
"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": "Production build succeeded, no errors"
}
],
"interactiveChecks": [
{
"action": "Started dev server, navigated to http://localhost:3201/board with agent-browser, verified columns rendered",
"observed": "All 6 columns visible with correct headers"
},
{
"action": "Created task via API, waited 5s for polling update",
"observed": "New task appeared in backlog column automatically"
},
{
"action": "Dragged task from backlog to in_progress",
"observed": "Task moved visually, API call succeeded with status update, task remained in new position after page refresh"
},
{
"action": "Resized browser to mobile width",
"observed": "Layout switched to single-column scrollable view"
}
]
},
"tests": {
"added": [
{
"file": "src/components/KanbanBoard.test.tsx",
"cases": [
{"name": "renders all columns", "verifies": "6 status columns displayed"},
{"name": "displays tasks in correct columns", "verifies": "Tasks grouped by status"},
{"name": "drag-and-drop updates task status", "verifies": "PATCH API called on drop"},
{"name": "shows loading state", "verifies": "Spinner during fetch"},
{"name": "shows error state", "verifies": "Error message on API failure"},
{"name": "handles empty columns", "verifies": "Empty state message"},
{"name": "responsive layout", "verifies": "Mobile-friendly"},
{"name": "polling updates tasks", "verifies": "New tasks appear without refresh"}
]
}
]
},
"discoveredIssues": []
}