add-react-page

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.