New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Rasengan Routing

by rasengan-dev in rasengan-dev/rasenganjs

Router definition and navigation patterns for Rasengan.js. An agent skill from rasengan-dev/rasenganjs.

MITAuto-check passed

Install Rasengan Routing

skills CLI
$ npx skills add rasengan-dev/rasenganjs --skill rasengan-routing -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install rasengan-dev/rasenganjs rasengan-routing --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/rasengan-dev/rasenganjs.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/rasengan-routing .claude/skills/rasengan-routing && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
rasengan-routing
GitHub stars
124
Token cost
~2.3k tokens
SKILL.md length
536 words
Files
1
Skills in repo
13
Repo updated
First seen
Licence
MIT

At a glance

Router definition and navigation patterns for Rasengan.js. An agent skill from rasengan-dev/rasenganjs.

  • Modifying app.router.ts
  • SKILL.md covers When to Activate, RouterComponent Properties, Config-based Routing and File-based Routing, plus 9 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
  • Defining route structures

What it does

Rasengan Routing is an agent skill from rasengan-dev/rasenganjs. Router definition and navigation patterns for Rasengan.js. Covers config-based and file-based routing, RouterComponent, defineRouter, defineRoutesGroup, Link, NavLink, useLocation, useNavigate, useParams, useSearchParams, dynamic routes, route groups, and file-based routing conventions. Use when creating or modifying app.router.ts, defining route structures, setting up dynamic segments, or implementing navigation.

Its SKILL.md is about 2.3k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

The repository describes itself as: Rasengan.js is a full-stack meta-framework for React — SSR, SSG, and a built-in backend, running anywhere from Node.js to the edge, without compromising on performance. The licence is MIT.

When your agent uses it

  • Modifying app.router.ts
  • Defining route structures
  • Setting up dynamic segments
  • Implementing navigation

Example prompts

  • “/rasengan-routing”

What it can do on your machine

Read from SKILL.md and the folder at commit 459b93b. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are typescript).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Rasengan Routing loads about 2.3k tokens when it runs. Until then it costs about 109 tokens; SKILL.md has 536 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~109
When it runs · the whole SKILL.md, loaded when a task matches
~2.3k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from rasengan-dev/rasenganjs at commit 459b93b, republished under its MIT licence (© rasengan-dev). 536 words, ~2,250 tokens.

Download SKILL.mdSave it as .claude/skills/rasengan-routing/SKILL.md (or your agent's skills folder).
name
rasengan-routing
description
Router definition and navigation patterns for Rasengan.js. Covers config-based and file-based routing, RouterComponent, defineRouter, defineRoutesGroup, Link, NavLink, useLocation, useNavigate, useParams, useSearchParams, dynamic routes, route groups, and file-based routing conventions. Use when creating or modifying app.router.ts, defining route structures, setting up dynamic segments, or implementing navigation.
license
MIT
metadata.author
dilane3
metadata.framework
rasengan
metadata.version
2.0.0

Rasengan.js Routing Patterns

When to Activate

  • Creating or editing src/app/app.router.{js,ts}
  • Choosing between config-based and file-based routing
  • Defining navigation links with Link or NavLink
  • Using navigation hooks: useNavigate, useLocation, useParams, useSearchParams
  • Defining dynamic route segments [param], [_param], route groups (group)
  • Setting up nested routers or route groups with defineRoutesGroup
  • Customizing 404 / loading fallbacks at the router level

RouterComponent Properties

PropertyTypeDescription
layoutLayoutComponent | RouteNodeLayout component for the router
routersRouterComponent[]Nested sub-routers
pagesPageComponent[] | RouteNode[]Page components
loaderComponentFunctionComponentLoading fallback
notFoundComponentFunctionComponent404 component
useParentLayoutbooleanInherit parent layout

Config-based Routing

ts
import { RouterComponent, defineRouter } from 'rasengan';
import Home from './home.page';
import About from './about.page';
import AppLayout from './layout';

class AppRouter extends RouterComponent {}

export default defineRouter({
  layout: AppLayout,
  pages: [Home, About],
  notFoundComponent: NotFound,
})(AppRouter);

File-based Routing

ts
import { RouterComponent, defineRouter } from 'rasengan';
import Router from 'virtual:rasengan/router';

class AppRouter extends RouterComponent {}

export default defineRouter({ imports: [Router] })(AppRouter);

Route Groups with defineRoutesGroup

ts
import { defineRoutesGroup } from 'rasengan';

export default defineRoutesGroup({
  path: '/dashboard',
  pages: [Settings, Profile],
  routers: [AdminRouter],
});

Dynamic Route Conventions

File patternRoute segmentExample URL
[id].page.tsx:id/posts/123
[_locale]/index.page.tsx:locale?/en or /
(group)/index.page.tsx(ignored in path)/
_optional/index.page.tsxoptional?/optional or ``

Config-based dynamic routes use react-router syntax:

ts
Profile.path = '/profile/:id'; // required param
Profile.path = '/profile/:id?'; // optional param
Profile.path = '/profile/:id?/:name?'; // multiple optional params

Import from rasengan for client-side navigation:

tsx
import { Link } from 'rasengan';

// Basic usage
<Link to="/dashboard">Go to Dashboard</Link>

// Dynamic routes
<Link to={`/post/${post.id}`}>Read More</Link>

// Hash anchors (renders as <a>, not react-router Link)
<Link to="#section">Section</Link>

// Fragment navigation with hash
<Link to="/admin/dashboard#statistics">Statistics</Link>

The Link component renders an <a> element that navigates client-side without a full page reload.

Import from rasengan for links with active state tracking:

tsx
import { NavLink } from 'rasengan';

// Basic usage with className callback
<NavLink
  to="/about"
  className={({ isActive, isPending }) =>
    isPending ? "pending" : isActive ? "active" : ""
  }
>
  About
</NavLink>

// Children as render props
<NavLink to="/tasks">
  {({ isActive }) => (
    <span className={isActive ? "active" : ""}>Tasks</span>
  )}
</NavLink>

Active state matching:

NavLinkURLisActive
<NavLink to="/tasks" />/taskstrue
<NavLink to="/tasks" />/tasks/123true
<NavLink to="/tasks" end />/taskstrue
<NavLink to="/tasks" end />/tasks/123false
  • isActive — true when current route starts with to value
  • isPending — true when the route transition is loading
  • end prop — restricts active matching to exact match only

useNavigate Hook

Import from rasengan for programmatic navigation:

tsx
import { useNavigate } from 'rasengan';

function LogoutButton() {
  const navigate = useNavigate();

  const handleLogout = async () => {
    await logout();
    navigate('/sign-in');
  };

  return <button onClick={handleLogout}>Logout</button>;
}
  • navigate(to) — navigate to a path
  • navigate(-1) — go back in history
  • navigate(1) — go forward in history
  • Supports all react-router NavigateOptions (replace, state, etc.)

useLocation Hook

Import from rasengan to read the current URL location:

tsx
import { useLocation } from 'rasengan';

function ActiveLink({ to, children }) {
  const { pathname } = useLocation();

  return (
    <Link to={to} className={pathname === to ? 'active' : ''}>
      {children}
    </Link>
  );
}

Returns a location object with pathname, search, hash, state, and key properties.

useParams Hook

Import from rasengan to access dynamic route parameters:

tsx
import { useParams } from 'rasengan';

const Profile = () => {
  const { id } = useParams();

  return <div>User ID: {id}</div>;
};

Profile.path = '/profile/:id';
  • Returns an object where keys match the dynamic segment names in the route path
  • Optional params (:id?) may be undefined
  • Works in both config-based and file-based routing
Show full SKILL.md (233 more words)Show less

useSearchParams Hook

Import from rasengan (re-exported from react-router) to read and update URL query string:

tsx
import { useSearchParams } from 'rasengan';

function FilterBar() {
  const [searchParams, setSearchParams] = useSearchParams();
  const tab = searchParams.get('tab') ?? 'overview';

  return (
    <div>
      <p>Active tab: {tab}</p>
      <button onClick={() => setSearchParams({ tab: 'settings' })}>
        Go to Settings tab
      </button>
    </div>
  );
}

setSearchParams accepts multiple forms:

tsx
// Search param string
setSearchParams('?tab=1');

// Shorthand object
setSearchParams({ tab: '1' });

// Object with array values (multiple values for same key)
setSearchParams({ brand: ['nike', 'reebok'] });

// Array of tuples
setSearchParams([['tab', '1']]);

// Function callback (receives current URLSearchParams)
setSearchParams((prev) => {
  prev.set('tab', '2');
  return prev;
});

// With navigation options (prevent scroll reset, replace history)
setSearchParams({ tab: '2' }, { replace: true, preventScrollReset: true });
  • searchParams is a stable URLSearchParams reference (safe as useEffect dependency)
  • setSearchParams causes a navigation — URL updates and re-render triggers
  • Optional defaultInit provides default values without changing the URL on first render
  • Function callback does NOT support React's setState queueing — multiple calls in same tick won't build on prior value

Rules

  • Always create a class extending RouterComponent and wrap it with defineRouter()
  • Config-based: list all pages in pages array, set layout explicitly, provide notFoundComponent
  • File-based: use import Router from 'virtual:rasengan/router' with { imports: [Router] }
  • Use routers for nested sub-routers when splitting large route trees
  • Set useParentLayout: true on child routers to inherit the parent's layout
  • Use defineRoutesGroup to group routes under a shared path prefix without a separate router class
  • Optional segments [_param] generate both with and without the segment
  • Route groups (group) do not add a path segment — use them for organization only
  • Underscore-prefixed directories _name/ become optional path segments
  • Do NOT import directly from react-router — import routing APIs from rasengan
  • Use NavLink over Link + useLocation when you need active state tracking (less boilerplate)
  • Set end prop on NavLink when active state should only match the exact path, not sub-routes
  • Use useSearchParams instead of manual URL parsing for query string access
  • Prefer Link for declarative navigation and useNavigate for imperative navigation (e.g., after form submission)

© rasengan-dev, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in .agents/skills/rasengan-routing of rasengan-dev/rasenganjs.

Open the folder on GitHubat commit 459b93b

Compare with similar skills

Rasengan Routing next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Rasengan Routing compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Rasengan Routing this skillrasengan-dev/rasenganjs124—~2.3kAutomated safety check: PassMIT
Router Onweave-os/router5.6k—~169Automated safety check: PassApache-2.0
Router Offweave-os/router5.6k—~183Automated safety check: PassApache-2.0
Breadcrumb Navigationthedaviddias/Front-End-Checklist74k—~418Automated safety check: PassMIT
Navigation Landmarkthedaviddias/Front-End-Checklist74k—~417Automated safety check: PassMIT
Keyboard Navigationthedaviddias/Front-End-Checklist74k—~567Automated safety check: PassMIT

Similar skills

  • Router On

    weave-os/router

    Route Codex through the Weave Router again (turn it back on).

    5.6k GitHub stars~169 tokensUpdated today
    Auto-check passed

  • Router Off

    weave-os/router

    Route Codex to its default provider again (turn the Weave Router off).

    5.6k GitHub stars~183 tokensUpdated today
    Auto-check passed

  • Breadcrumb Navigation

    thedaviddias/Front-End-Checklist

    A skill your agent uses when reviewing templates, rendered HTML, or shared components related to Implement accessible breadcrumb navigation.

    74k GitHub stars~418 tokensUpdated 4 days ago
    Frontend & DesignAuto-check passed

  • Navigation Landmark

    thedaviddias/Front-End-Checklist

    A skill your agent uses when reviewing templates, rendered HTML, or shared components related to Use navigation landmark regions.

    74k GitHub stars~417 tokensUpdated 4 days ago
    Frontend & DesignAuto-check passed

  • Keyboard Navigation

    thedaviddias/Front-End-Checklist

    A skill your agent uses when reviewing rendered HTML, interactive components, or design-system patterns related to Enable keyboard navigation for all elements.

    74k GitHub stars~567 tokensUpdated 4 days ago
    Frontend & DesignAuto-check passed

  • Skip Navigation

    thedaviddias/Front-End-Checklist

    A skill your agent uses when reviewing rendered HTML, interactive components, or design-system patterns related to Include a skip navigation link.

    74k GitHub stars~443 tokensUpdated 4 days ago
    Frontend & DesignAuto-check passed

More from rasengan-dev/rasenganjs

All 13 skills in this repo

  • Code Review Excellence

    rasengan-dev/rasenganjs

    Master effective code review practices to provide constructive feedback, catch bugs early, and foster knowledge sharing while maintaining team morale.

    124 GitHub starsUsed in 18 repos~3.3k tokens
    Auto-check passed

  • Rasengan Config

    rasengan-dev/rasenganjs

    Project configuration and rendering mode patterns for Rasengan.js.

    124 GitHub stars~1.1k tokensUpdated today
    Auto-check passed

  • Rasengan Data Fetching

    rasengan-dev/rasenganjs

    Data fetching and SSG static path patterns for Rasengan.js. An agent skill from rasengan-dev/rasenganjs.

    124 GitHub stars~938 tokensUpdated today
    Auto-check passed

  • Rasengan Deployment

    rasengan-dev/rasenganjs

    Deployment patterns for Rasengan.js. An agent skill from rasengan-dev/rasenganjs.

    124 GitHub stars~624 tokensUpdated today
    Auto-check passed

  • Rasengan Ecosystem

    rasengan-dev/rasenganjs

    Rasengan.js ecosystem package patterns. An agent skill from rasengan-dev/rasenganjs.

    124 GitHub stars~1.5k tokensUpdated today
    Auto-check passed

  • Rasengan Optimizing

    rasengan-dev/rasenganjs

    Optimization patterns for Rasengan.js. An agent skill from rasengan-dev/rasenganjs.

    124 GitHub stars~980 tokensUpdated today
    Auto-check passed

Questions about Rasengan Routing

What does Rasengan Routing do?

Router definition and navigation patterns for Rasengan.js. An agent skill from rasengan-dev/rasenganjs. Rasengan Routing is an agent skill from rasengan-dev/rasenganjs.js.

When should I use Rasengan Routing?

Rasengan Routing fits situations like: modifying app.router.ts; defining route structures; setting up dynamic segments; implementing navigation.

How do I install Rasengan Routing in Claude Code?

Run `npx skills add rasengan-dev/rasenganjs --skill rasengan-routing -a claude-code`. Or copy the skill folder (.agents/skills/rasengan-routing in rasengan-dev/rasenganjs) into .claude/skills/rasengan-routing in your project. Claude Code loads it when a task matches its description.

How do I install Rasengan Routing in Codex?

Run `npx skills add rasengan-dev/rasenganjs --skill rasengan-routing -a codex`. Or copy the skill folder (.agents/skills/rasengan-routing in rasengan-dev/rasenganjs) into .agents/skills/rasengan-routing in your project. Codex loads it when a task matches its description.

Can I use Rasengan Routing in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add rasengan-dev/rasenganjs --skill rasengan-routing -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/rasengan-routing, .gemini/skills/rasengan-routing, .github/skills/rasengan-routing and .opencode/skills/rasengan-routing in your project.

What does Rasengan Routing need to run?

SKILL.md names no scripts, command-line tools or credentials: Rasengan Routing is instructions for the agent only.

Does Rasengan Routing access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Rasengan Routing safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Rasengan Routing use?

Rasengan Routing is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Rasengan Routing use?

About 2.3k tokens (SKILL.md is roughly 9k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Rasengan Routing?

Skills that share tags, products or a category with Rasengan Routing: Router On (weave-os/router, 5.6k stars), Router Off (weave-os/router, 5.6k stars), Breadcrumb Navigation (thedaviddias/Front-End-Checklist, 74k stars) and Navigation Landmark (thedaviddias/Front-End-Checklist, 74k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Rasengan Routing?

rasengan-dev (a GitHub organization) maintains it in rasengan-dev/rasenganjs, which has 124 GitHub stars. The repository holds 13 skills in this directory. The repository was last updated on October 9, 2026.

Source: rasengan-dev/rasenganjs on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.