labrodev-inertia-reactlisted

Use when creating or reviewing React/Inertia frontend code in a Labrodev Laravel project — Inertia page components under resources/js/pages, typed Props interfaces, useForm form submissions, Wayfinder route usage, t()/lang/*.json i18n wiring, flash/toast consumption, destructive-action confirmation dialogs, or in-page JSON API calls via @/lib/http.
labrodev/laravel-playbook · ★ 0 · Web & Frontend · score 73

Install: claude install-skill labrodev/laravel-playbook

# Inertia + React Frontend Part of the Labrodev playbook. **The law for this component lives in the always-on `labrodev-inertia-react` guideline** (musts, must-nots); the per-file checklist is `rules/frontend.md`. This skill holds the craft: anatomy, canonical templates, and edge cases. The frontend is a **delivery surface**, not a business layer. It renders data shaped by ViewModels and Resources, resolves UI copy from i18n, collects user input, and sends it back. It never decides, calculates, authorizes, or compensates for missing backend work. Backend prop assembly (ViewModels, Resources, field allowlisting) → see the labrodev-viewmodel-resource skill. Stack: React 19, Inertia.js v2 (React adapter), TypeScript (strict), Tailwind CSS v4, Wayfinder (generated route functions), Vite. ## Directory structure ``` resources/js/ pages/ — Inertia page components (one file per route, kebab-case path = render string) layouts/ — AppLayout, AuthLayout variants, SettingsLayout components/ — shared reusable components components/ui/ — primitives (button, input, card, …) components/dashboard/ — composed dashboard components (DataTable, HorizontalInput, SectionCard, …) hooks/ — custom React hooks (use-i18n, …) types/ — shared TypeScript types (SharedData, BreadcrumbItem, PaginatedData, …) lib/ — utilities (cn(), http.ts) @/routes/, @/actions/ — Wayfinder-generated; never edit manually ``` A helper compo