What problem does it solve? Keeping a Next.js App Router codebase consistent is hard when multiple features are added over time. This Skill enforces the repo's conventions for pages, containers, components, and hooks so every new screen follows the same structure. ## Core Features & Use Cases - Screen Scaffolding: Guides creation of authenticated or public pages under app/(screens) with server-only page.tsx files that render a single container. - Container & Hook Patterns: Defines the standard container folder layout ([feature]-container.tsx, use-[feature].ts, types.ts, index.ts) with use-immer for state management. - Convention Enforcement: Applies golden rules such as banning export * in favor of explicit export type { ... } re-exports, plus a validation checklist for reviews. - Use Case: When adding a new dashboard screen, use this Skill to generate the page, container, hook, and types files in the correct locations with the correct import and styling conventions. ## Quick Start Use the frontend-structure skill to create a new authenticated screen called "orders" with its container, hook, and types following the repo conventions.
