What problem does it solve? Building new frontend pages often leads to inconsistent structure, mixed concerns, and logic tangled inside UI components. This Skill enforces a strict 4-layer architecture (Page, Container, Hook, Component) so every new page in a Next.js 16 + React 19 app follows the same predictable, maintainable pattern. ## Core Features & Use Cases - Layered Page Scaffolding: Guides creation of the server Page, smart Container, logic Hook, and presentational Component with correct file locations and naming. - Type-Safe Patterns: Provides templates for types.ts, use-[feature].ts with useImmer state, and memoized view components using absolute @/ imports. - Golden Rules Enforcement: Bans export *, mandates named function components, kebab-case files, and strict typing with no any. - Use Case: You need a new "orders" page in your monorepo. The Skill walks you through creating app/(screens)/(authenticated)/orders/page.tsx, the src/containers/orders/ container with its hook and types, and optional shared hooks under src/hooks/. ## Quick Start Ask the AI to create a new frontend page for a feature, for example: create an orders page following the frontend container architecture.
