What problem does it solve? When adding a new page or domain area to a React web frontend, developers often produce inconsistent folder layouts, call APIs directly inside components, or invent ad-hoc naming. This Skill enforces a single, strict feature-module pattern so every new feature under src/features/ follows the same structure, naming, and data-flow rules. ## Core Features & Use Cases - Standardized feature scaffolding: Defines the exact folder layout (pages, components, hooks, services, schemas, types) for any new domain such as auth, admin, manager, or staff. - Enforced data-flow rules: API calls must go through a service layer and TanStack Query hooks, never directly in components; Zustand is reserved for auth session state only. - Form validation pattern: Provides Zod schemas wired to react-hook-form via zodResolver for type-safe form handling. - Use Case: When asked to add a battery management page, the Skill generates BatteryListPage.tsx, a battery.service.ts using the shared axios instance, a useBatteries hook, and a battery.schema.ts — all in the correct locations with correct naming. ## Quick Start Ask the AI to create a new frontend feature module for a specific domain, for example: create a new feature for managing battery maintenance tickets under the staff domain.
