skills.rest
rangojs
rangojsOFFICIAL
Explore all skills by this author →
GitHub

typesafety

Configure type-safe routes, params, search schemas, and environment bindings in @rangojs/router.

Updated Nov 7, 2025
Search Tags:#type safety#typescript#routing#code generation#monorepo#react server components#rango
One-click install
npx skills add https://github.com/rangojs/rango --skill typesafety-rangojs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: typesafety
Source: https://github.com/rangojs/rango/tree/main/packages/rangojs-router/skills/typesafety
Command: npx skills add https://github.com/rangojs/rango --skill typesafety-rangojs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Without type safety in @rangojs/router, ctx.reverse() and href() accept any string so typos 404 at runtime instead of failing at compile time, ctx.search and ctx.params fall back to loose Record<string, string>, and untyped ctx.env bindings surface as undefined in production rather than build errors. ## Core Features & Use Cases - Generated route types: Run npx rango generate to produce router.named-routes.gen.ts, which auto-registers GeneratedRouteMap globally for Handler<"name">, ctx.reverse(), href(), and Prerender typing. - Typed params and search: Add search schemas to path() options and use RouteSearchParams/RouteParams utility types for compile-time checked query and URL parameters. - Typed environment and context: Register Rango.Env and Rango.Vars globally, use createVar<T>() for scoped context tokens, and type handles, loaders, and location state. - Use Case: In a monorepo with multiple Rango apps, give each app its own tsconfig and generated route map so Rango.GeneratedRouteMap augmentations do not collide across routers. ## Quick Start Ask the AI to set up end-to-end type safety for my Rango router, including generated route types, typed search params, and typed environment bindings.

Frequently Asked Questions about typesafety

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

FAQPage Schema
How do I set up type-safe routes in @rangojs/router?▼

Run npx rango generate on your router file to create router.named-routes.gen.ts, which auto-registers Rango.GeneratedRouteMap globally. This gives you typed Handler<"name">, ctx.reverse(), href(), and Prerender without manual augmentation.

How do I type search params and loader return types in Rango?▼

Add a search schema to path() options using string, number, or boolean types with optional ? suffixes. Handler<"name"> then infers ctx.search and ctx.params automatically, and loader return types flow through useLoader in both server and client components.

What is the difference between GeneratedRouteMap and RegisteredRoutes in Rango?▼

GeneratedRouteMap comes from the auto-generated file and provides route names, params, and search schemas globally. RegisteredRoutes is a manual augmentation of typeof router.routeMap needed only for response payload inference via Rango.PathResponse.

Why does TypeScript report GeneratedRouteMap conflicts with multiple routers?▼

Rango.GeneratedRouteMap is a single global interface, so two routers in one TypeScript program with overlapping route names cause augmentation collisions. Give each app its own tsconfig program or use unique route-name prefixes per router.

How do I fix slow typechecking with many include() modules in Rango?▼

Annotate intermediate module exports with the wide UrlPatterns<any> type to stop per-route literal types from propagating upward. Named-route typing still comes from the generated file, so nothing is lost; diagnose with tsc --extendedDiagnostics.

How do I type environment bindings and context variables in Rango?▼

Declare global Rango.Env and Rango.Vars interfaces extending your bindings and variables types for implicit ctx.env and ctx.get() typing. For scoped contracts, use createVar<T>() tokens shared between producer handlers and consumer layouts.

Related Skills

Explore More Software Engineering Skills→
mehdibhamehdibha
1.4k

router-core

Implements type-safe routing with TanStack Router route trees, loaders, and navigation.

Community
Intermediate
CutTheChexxCutTheChexx

nextjs-patterns

Implement Next.js App Router patterns with Server Components and Server Actions.

Community
Advanced
ChristopherAlphonseChristopherAlphonse
1

nextjs-proxy-csp-hardening

Configures a Next.js proxy.ts with strict CSP and per-request nonce.

Community
Advanced
guillempucheguillempuche

lifecycle/migrate-from-nextjs

Migrate a Next.js App Router application to TanStack Start.

Community
Advanced