What problem does it solve?
Adding a new list+create UI screen usually triggers scattered, error-prone work across API clients, pages, routing, permissions, and end-to-end tests; this Skill provides a consistent frontend implementation path so you can add screens without breaking app conventions.
Core Features & Use Cases
- Hands-on API module wiring: Hand-write DTO/params/input types and thin
apiFetch functions with correct query casing per app (admin PascalCase vs dashboard camelCase).
- Production-ready page patterns: Create a named-export page that uses React Query with hierarchical
queryKey and placeholderData: keepPreviousData, plus the right list+create UI structure (separate pages for admin, dialog-based editors for dashboard).
- Mutation correctness and cache updates: Implement race-safe mutations using
mutate(arg) and invalidate queries on success, surfacing errors via consistent toast handling.
- Route registration with the right guardrails: Register the lazy-loaded route via
lazyNamed, using <RouteGuard perms={[...]}> for admin and suspense-only routing for dashboard.
- Permission mirroring and Playwright coverage (admin): Add the permission constant in
src/lib/permissions.ts when needed and include a scoped, shell+page-mocked Playwright test.
Quick Start
Add the Skill to create a list+create screen for your resource in the React app by following each step for the correct app variant (admin vs dashboard) including API types, the named-export page, the route registration, and the Playwright test.
