Menu
React Router v7 routing patterns and environment variable configuration. Use when adding routes, configuring routing, or setting up environment variables.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
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)