What problem does it solve? Frontend work in a large Next.js codebase fails in predictable ways: scattered fetch calls, inconsistent query invalidation, controls visible to users who lack permission, and empty states that silently mask backend errors. This Skill encodes the project's layout, conventions, and traps so changes land correctly the first time. ## Core Features & Use Cases - Feature scaffolding workflow: Guides the full path from a route under src/app/[locale]/(dashboard)/ through a typed API client, query keys, a hook, a Zustand store, and domain components. - Permission-aware UI: Ensures controls are hidden rather than rendered-and-then-403, with integration tests asserting the behavior. - Empty-state diagnosis: Explains why a page rendering an empty state may actually be a failed query, and how to test against real data. - Use Case: Add a new dashboard page wired to a backend endpoint, register its query keys, wrap the client in a hook, localize all copy with next-intl, and verify with type-check, lint, and vitest. ## Quick Start Use the frontend-feature skill to add a new dashboard page that lists records from a backend endpoint, hides the create button from Viewers, and passes type-check, lint, and tests.
