frontend-worker

name	frontend-worker
description	Implements frontend UI features following existing codebase patterns

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 that involve React component changes, UI additions, styling, and client-side logic in a Next.js app with shadcn/radix components.

Work Procedure

1. Read reference files first. Before any code changes, read at least 3 similar files to understand the patterns. The feature description lists specific reference files — read ALL of them.

2. Plan the changes. Based on the reference files, plan exactly what imports, hooks, handlers, and JSX you need to add. Do not guess patterns — copy from existing code.

3. Implement the changes. Make the edits following the exact patterns found in reference files. Key rules:

   • Use resolveActionResult to call server actions
   • Use useMutation from @tanstack/react-query for mutations
   • Use dialogManager.confirm() for delete confirmations
   • Use dialogManager.input() for rename dialogs
   • Use useQueryClient + invalidateQueries for cache invalidation
   • Use toast from sonner for success/error messages
   • Stop event propagation on menu triggers inside Links: e.preventDefault(); e.stopPropagation();

4. Run verification commands:

   • npx tsc --noEmit — must pass with zero errors