Creates page routes with URL contracts, search param validation, and layouts for React and Astro apps.
npx skills add https://github.com/gabriellst/codm --skill route-gabriellst
Please help me install this Agent Skill. Skill: route Source: https://github.com/gabriellst/codm/tree/main/.claude/skills/route Command: npx skills add https://github.com/gabriellst/codm --skill route-gabriellst
packages/app/react or packages/app/astro and loads the matching child instructions and pattern registry. - React route generation: Creates TanStack Router file-based routes with createFileRoute, Zod-validated search params composed from SDK schemas, breadcrumbs via staticData, RouteError boundaries, and loader prefetching with ensureQueryData. - Astro route generation: Creates localized .astro pages under src/pages/[locale]/ with getStaticPaths, content collections, sitemap integration, and SEO metadata through BaseLayout. - Use Case: Ask to add a /customers list page and get a thin-shell route with validated pagination search params, a prefetch loader, breadcrumb, error component, and a regenerated route tree — with components owning their own data fetching. ## Quick Start Create a new route for the customers list page with search param validation and breadcrumbs in the React app.High-intent search queries and answers about installing and using this skill.
Create a file under the routes directory exporting `createFileRoute('/(app)/path/')` with `validateSearch`, `staticData` breadcrumbs, `errorComponent: RouteError`, and a `RouteComponent`. Then run `bun tsr generate` to regenerate the route tree or the route will not work.
Compose the SDK query params schema with frontend-only fields using `.and()` and pass it to `validateSearch: zodValidator(schema)`. Never use `.extend()`, which overwrites SDK constraints, and put `.optional()` before `.default()` so output types stay concrete.
Routes are thin shells and must not fetch data to pass as props to components. Each component owns its data via SDK hooks and reads search params with `routeApi.useSearch()`. The route may use a loader only to prefetch the same query keys into the React Query cache.
Place the `.astro` file under `src/pages/[locale]/` and export `getStaticPaths` returning the locale params such as `pt` and `en`. Render inside `BaseLayout` with title, description, and ogImage so SEO metadata and hreflang tags are emitted.
The route tree was not regenerated. Run `cd packages/app && bun tsr generate` after creating any new route file, since TanStack Router's file-based routing requires the generated `routeTree.gen.ts` to include the new route.
Do not use it for sub-sections of an existing route, modals, dialogs, or reusable primitives — those belong to the component or primitive skills. Authenticated app screens belong in the React workspace, not the Astro site.
openmeterioDefine API endpoints in TypeSpec and generate OpenAPI specs and SDKs.
hospitaljobsinStructure Next.js 13+ App Router applications with server components and routing patterns.
Ultra-CubeManages translation keys and locale files for react-i18next internationalization workflows.
f-campanaConvert static Astro pages into self-contained React interactive islands.