rango

Explains the @rangojs/router mental model and routes tasks to the correct Rango skill.

Updated Nov 7, 2025
One-click install
npx skills add https://github.com/rangojs/rango --skill rango-rangojs
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: rango
Source: https://github.com/rangojs/rango/tree/main/packages/rangojs-router/skills/rango
Command: npx skills add https://github.com/rangojs/rango --skill rango-rangojs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Rango is a code-first, type-safe React Server Components router with many opt-in features, and its vocabulary (revalidate, cache, loader) is easily confused with Next.js or Remix concepts. This Skill gives you the mental model of the router first, then points you to the exact sub-skill for the task at hand, preventing misreads like treating revalidate() as cache invalidation. ## Core Features & Use Cases - Mental model first: Explains the two orthogonal freshness axes (stored-value caching vs client-update revalidation), the structure-vs-config rule for urls() trees, and the four-rung ladder for passing data down the route tree. - Skill catalog: A grouped directory of 40+ sub-skills covering routing, loaders, caching, server actions, PPR, prerendering, deployment (Cloudflare, Vercel), testing, and migration from Next.js or React Router. - False-friends table: Maps concepts from Next.js, Remix, and HTTP caching to the correct Rango axis so you pick the right primitive. - Use Case: You are starting a task in a Rango app and are unsure whether to use cache(), "use cache", or revalidate(). Read this Skill to understand the distinction, then follow the pointer to /cache-guide or /loader. ## Quick Start Ask the assistant to explain how Rango's routing, caching, and revalidation model works and which Rango skill to use for your current task.

Frequently Asked Questions about rango

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

FAQPage Schema
How do I choose between cache() and revalidate() in Rango?

cache() controls stored-value freshness (TTL/SWR on segments or loader data), while revalidate() controls which segments re-render on the client after an action. They are orthogonal axes and compose freely; revalidate() is not cache invalidation.

What is the difference between cache() and "use cache" in Rango?

cache() is a segment-level DSL helper attached in the urls() tree, while "use cache" is a function or component directive. The /cache-guide skill provides the full decision guide for when to use each.

How does Rango revalidate differ from Next.js revalidate?

Next.js revalidate is time-based cache expiry, but Rango's revalidate() selects which segments re-render after an action, similar to Remix shouldRevalidate. For Next-style time-based expiry, use cache({ ttl }) instead.

How do I pass data down the route tree in Rango?

Prefer a loader with useLoader() first, then middleware ctx.set(), then handler ctx.set() to its own children, and finally cross-entry sharing via a shared revalidate() contract. Higher rungs are immune to partial-revalidation staleness.

Can Rango generate route types from the command line?

Yes, run npx rango generate on files or directories to produce .gen.ts route type files. It follows include() calls across files but cannot extract dynamically computed routes, which only the Vite plugin discovers at runtime.