craft-ts-routes

Creates type-safe Angular routes with per-route dependency injection checks using craft-ts.

3|Updated Jan 9, 2026
One-click install
npx skills add https://github.com/craft-ts/craft-ts --skill craft-ts-routes-craft-ts
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: craft-ts-routes
Source: https://github.com/craft-ts/craft-ts/tree/main/.cursor/skills/craft-ts-routes
Command: npx skills add https://github.com/craft-ts/craft-ts --skill craft-ts-routes-craft-ts

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @craft-ts/core, @angular/router, and includes references (resource) components.

What problem does it solve? In craft-ts, a route is more than a path-to-component map: each routed component declares its injected dependencies via componentDeps, and a per-route RouteCheckedDI check turns unmet providers into TypeScript errors. Skipping these checks silently disables compile-time DI safety, and the generated check blocks are easy to get wrong or leave stale. This Skill ensures every route file keeps its DI proofs armed and exhaustive. ## Core Features & Use Cases - Route scaffolding with DI checks: Wraps routes in craftRoutes(name, [...]), wires componentDeps to generated GenDeps_* types, and adds RouteCheckedDI / CanRun pairs per routed component. - Lazy feature splitting: Splits features into child route collections via loadChildren, pins them with .withParent, and enforces placement with assertChildRouteMounts. - Exhaustive exception handling: Applies assertExhaustiveRouteExceptions and typed pendingComponent / viewTransitionPayload patterns with independent DI verification. - Use Case: When adding a new user-detail route to an Angular app, the Skill generates the route entry, the GenDeps import, the DI check block, and the exhaustiveness assert, then directs ESLint --fix to keep everything in sync. ## Quick Start Add a new lazy-loaded feature route with a userId parameter to my Angular app using craft-ts, including its DI check and exception exhaustiveness assert.

Frequently Asked Questions about craft-ts-routes

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add a type-safe route in an Angular app with craft-ts?▼

Wrap routes in craftRoutes(name, [...]) instead of exporting a plain Routes array, and give each component route a componentDeps line referencing its generated GenDeps_* type. Then add a RouteCheckedDI / CanRun type pair so unmet providers surface as TypeScript errors.

How do I split an Angular route file with loadChildren in craft-ts?▼

Move the feature into its own craftRoutes collection and mount it in the parent with loadChildren pointing at the new file. Every routed component in the child still needs its own RouteCheckedDI check, since parent checks do not cover lazy children.

Does a parent route DI check cover lazy loadChildren routes?▼

No. RouteCheckedDI checks one routed component at a time and does not recurse through sibling routes or lazy collections. Each component in a child file needs its own check, with ancestor providers threaded through ParentNames and ParentValues.

Why is my craft-ts route DI check not catching missing providers?▼

The check blocks are generated and refreshed by ESLint rules, and an ESLint error is not a compile error, so stale blocks silently hide real DI bugs. Run eslint --fix on the route file after editing routes or a component's dependency shape, and never omit the CanRun consumer type.

How do I verify DI for a pendingComponent skeleton in craft-ts?▼

A pending skeleton is not covered by the route's own check, so verify it independently with a per-component RouteCheckedDI consumed by CanRun. The ESLint rule require-pending-component-di-check generates and refreshes this block on --fix.