Menu
React Router v7 routing patterns and environment variable configuration. Use when adding routes, configuring routing, or setting up environment variables.
Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.
Basé sur la classification professionnelle SOC
Standard Schema socka contracts (defineSocka), v1 wire envelopes, SockaSession/SockaWebSocketClient, React useSockaSession and SockaSessionProvider, SockaError.
SockaDoSession and SockaWebSocketDO on Cloudflare Durable Objects—contract, handlers, wireFormat, SockaError; extends websocket-do BaseSession.
Standard Schema v1 for socka contracts and wire validation—Zod, Valibot, or any compatible library; no Zod-only public surface.
Enforce strict TypeScript typing without escape hatches. Never use `any`, `as` casts to bypass the compiler, or similar workarounds—find the proper typed solution instead.
Read when implementing multi-phase work after a plan exists. Mandatory—mkdir+touch then Write/StrReplace (no heredocs), update the temp punch list at every phase boundary, one item at a time, per-phase tests. Complements punch-list-planning for authors.
Read when authoring implementation plans, phased roadmaps, or CreatePlan output for multi-step code work. Ensures the plan hands off a mandatory temp punch list and tells the executor which skill to follow.
| name | routing |
| description | React Router v7 routing patterns and environment variable configuration. Use when adding routes, configuring routing, or setting up environment variables. |
This project uses React Router v7 with file-based routing configured in app/routes.ts. Playground apps live under tests/:
tests/test-playground-collections/app/routes.tstests/test-playground-router/app/routes.tsWHENEVER you edit app/routes.ts (or either playground’s app/routes.ts above), run typegen:
# From the playground app directory (example: collections)
cd tests/test-playground-collections
bun run typegen
Or use the typecheck script (it runs typegen first): bun run typecheck.
Without this, TypeScript imports can fail. Typegen generates the +types files that route components need.
Create the route file under app/routes/ in the correct playground:
tests/test-playground-collections/app/routes/collections/ (and routes/api/ for API routes)tests/test-playground-router/app/routes/router-toolkit/// Example: collections prefix
...prefix("collections", [
route("standalone-test", "routes/collections/standalone-test.tsx"),
route("memory-collection-test", "routes/collections/memory-collection-test.tsx"), // ← New
]),
cd tests/test-playground-collections # or tests/test-playground-router — whichever owns routes.ts
bun run typegen
After typegen, use the generated types if needed (e.g. Route.LoaderArgs, Route.ActionArgs).
Creating a route file without registering it in routes.ts results in a 404. Always register new routes.
When adding new environment variables:
.env.example with documentation.env (real or placeholder for local dev)