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.