What problem does it solve? React + Vite codebases often accumulate subtle bugs: stale server data in client stores, unvalidated API responses, secrets leaked into browser bundles, and monolithic JS bundles that slow every page load. This Skill gives an AI agent a concrete, enforceable rule set so generated frontend code avoids these pitfalls from the start. ## Core Features & Use Cases - Server-state discipline: Mandates a server-state library like @tanstack/react-query for API data instead of bare useEffect + fetch, with client stores (e.g. Zustand) reserved for UI-only state. - Boundary validation: Requires schema validation (e.g. Zod) on form input and API responses, typing responses as unknown and narrowing via schemas instead of any. - Build and deployment rules: Covers route-level lazy loading, manualChunks vendor splitting, SPA fallback routing, immutable caching for hashed assets, and the rule that VITE_* env vars are public and must never hold secrets. - Use Case: Ask the agent to scaffold a new reservations page; it will produce a useQuery hook with a Zod-parsed response, a lazy-loaded route, and config read from a centralized VITE_* module. ## Quick Start Apply the frontend-react-vite conventions to review or generate the React components in my Vite project.
