implement-frontend

Implement Frontend Apply this skill when the repository already follows this stack: React + TypeScript + Next.js React Hook Form + Zod React Query or Connect Query Proto-generated API types (when present) If local conventions differ, preserve existing project standards and apply only the transferable principles. Core workflow Set ownership boundaries before editing. Keep render-only concerns in components. Keep fetching, mapping, and business rules in hooks. Keep server state in query cache, form state in RHF, and UI-only state in useState . Implement with strict typing and explicit mappings. Avoid type escapes such as any , as any , and ignore directives. Map API models to UI models in mappers instead of casting. Verify reliability and UX before finishing. Cover loading, error, and empty states. Add cancellation and cleanup for async work when race conditions are possible. Preserve keyboard accessibility and focus behavior. Non-negotiable checks Remove duplicate state and useEffect sync loops. Keep API calls and business logic out of render components. Invalidate or update only affected query keys. Use rollback-safe optimistic updates only. Remove console.* , debugger , dead code, and unused imports. Stack guardrails If the repo uses RHF + Zod, use createZodResolver ; avoid zodResolver(schema as any) . If using RHF, avoid putting the entire form object in dependency arrays. Keep proto-to-UI transforms in a dedicated mapper file (for example utils/proto-mappers.ts ) when proto contracts are used. References Use react-patterns.md for forms, hooks, state ownership, query usage, and accessibility. Use typescript-patterns.md for type hygiene, proto typing, and code organization.