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 Pages

by rasengan-dev in rasengan-dev/rasenganjs

Page and layout component patterns for Rasengan.js. An agent skill from rasengan-dev/rasenganjs.

MITAuto-check passedFrontend & Design

Install Rasengan Pages

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

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

GitHub CLI
$ gh skill install rasengan-dev/rasenganjs rasengan-pages --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-pages .claude/skills/rasengan-pages && 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-pages
GitHub stars
124
Token cost
~2.2k tokens
SKILL.md length
458 words
Files
1
Skills in repo
13
Repo updated
First seen
Licence
MIT

At a glance

Page and layout component patterns for Rasengan.js. An agent skill from rasengan-dev/rasenganjs.

  • Modifying .page.tsx
  • SKILL.md covers When to Activate, Entry Point, Root App Component and HTML Template, plus 7 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
  • Tasks that involve React components

What it does

Rasengan Pages is an agent skill from rasengan-dev/rasenganjs. Page and layout component patterns for Rasengan.js. Covers page components, layouts, metadata, MDX pages, entry point setup, HTML template, navigation, error boundaries, and 404 handling. Use when creating or modifying .page.tsx, .page.mdx, layout.tsx, main.tsx, template.tsx, or index.ts files.

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

It sits in Frontend & Design, covering React components, Markdown and Error handling. 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 .page.tsx
  • Tasks that involve React components
  • Tasks that involve Markdown

Example prompts

  • “/rasengan-pages”

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, mdx and javascript).

    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 Pages loads about 2.2k tokens when it runs. Until then it costs about 78 tokens; SKILL.md has 458 words of instructions outside code blocks.

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

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). 458 words, ~2,167 tokens.

Download SKILL.mdSave it as .claude/skills/rasengan-pages/SKILL.md (or your agent's skills folder).
name
rasengan-pages
description
Page and layout component patterns for Rasengan.js. Covers page components, layouts, metadata, MDX pages, entry point setup, HTML template, navigation, error boundaries, and 404 handling. Use when creating or modifying .page.tsx, .page.mdx, layout.tsx, main.tsx, template.tsx, or index.ts files.
license
MIT
metadata.author
dilane3
metadata.framework
rasengan
metadata.version
2.0.0

Rasengan.js Page & Layout Patterns

When to Activate

  • Creating or editing a .page.tsx / .page.mdx file
  • Creating or editing a layout.tsx file
  • Setting up src/main.tsx (App component) or src/template.tsx (HTML shell)
  • Writing src/index.ts (entry point)
  • Defining page metadata (title, description, Open Graph, Twitter)
  • Handling page-level errors or 404 routes
  • Using MDX pages with @rasenganjs/mdx

Entry Point

ts
import { renderApp } from 'rasengan/client';
import App from './main';
import AppRouter from '@/app/app.router';

renderApp(App, AppRouter, { reactStrictMode: true });

Parameters:

  • App — Root App component (default import from ./main)
  • AppRouter? — Optional for config-based routing. Omit for file-based routing where router is defined inside main.tsx
  • options? — { reactStrictMode?: boolean }

Root App Component

src/main.{jsx,tsx}:

tsx
import { type AppProps } from 'rasengan';

export default function App({ Component, children }: AppProps) {
  return (
    <Provider>
      <Component router={AppRouter}>{children}</Component>
    </Provider>
  );
}
  • Must default-export a function receiving AppProps ({ Component, children })
  • Wrap <Component> around children to enable routing
  • Place global providers (ThemeProvider, I18nProvider, etc.) here

HTML Template

src/template.{jsx,tsx}:

tsx
import { type TemplateProps } from 'rasengan';

export default function Template({ Head, Body, Script }: TemplateProps) {
  return (
    <html lang="en">
      <Head>
        <meta charSet="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      </Head>
      <Body>
        <Script />
      </Body>
    </html>
  );
}

Props:

  • Head — Component for <head> content
  • Body — Component for <body> content (children appended after <div id="root">)
  • Script — Component for additional scripts (place inside <Body>)

Page Components

Config-based routing

File: src/app/home.page.tsx

tsx
import { type PageComponent } from 'rasengan';

const Home: PageComponent = () => {
  return <main>Home Page</main>;
};

Home.path = '/';
Home.metadata = {
  title: 'Home',
  description: 'Home page description',
  openGraph: {
    title: 'Home',
    description: 'Home page description',
    url: 'https://example.com',
    image: 'https://example.com/og.png',
  },
  twitter: {
    card: 'summary_large_image',
    image: 'https://example.com/twitter.png',
    title: 'Home',
  },
};

export default Home;
File-based routing

File: src/app/_routes/index.page.tsx

tsx
const Home = () => <main>Home Page</main>;
export default Home;

Rules:

  • Files under src/app/_routes/ are auto-discovered
  • Naming: *.page.{js,ts,jsx,tsx,mdx,md}
  • No path needed — derived from file location
  • metadata can be set on the exported component
  • Use separate layout.tsx files for layouts in the same directory

Layout Components

tsx
import { Outlet, type LayoutComponent } from 'rasengan';

const AppLayout: LayoutComponent = () => {
  return (
    <div>
      <header>Shared Header</header>
      <main>
        <Outlet />
      </main>
      <footer>Shared Footer</footer>
    </div>
  );
};

AppLayout.path = '/';
AppLayout.metadata = {
  openGraph: { title: 'My App', image: '...' },
};

export default AppLayout;
Nested layouts

Layouts in subdirectories are automatically nested:

File: src/app/_routes/(docs)/layout.tsx

tsx
import { Outlet } from 'rasengan';

const DocsLayout = () => (
  <div className="flex">
    <nav>Docs Sidebar</nav>
    <main>
      <Outlet />
    </main>
  </div>
);
export default DocsLayout;

Rules:

  • Must default-export a function component
  • Must render <Outlet /> where child routes should appear
  • Must set path as a static property for config-based routing
  • metadata on layouts applies to all child pages (merged with page metadata, page wins)
  • Use LayoutComponent type from rasengan for TypeScript

Metadata System

ts
type Metadata = {
  title?: string;
  description?: string;
  openGraph?: {
    type?: string;
    title?: string;
    description?: string;
    url: string;
    image: string;
    width?: string;
    height?: string;
  };
  twitter?: {
    card: 'summary_large_image' | 'summary';
    image: string;
    title: string;
    description?: string;
    creator?: string;
    site?: string;
  };
  links?: Array<{ rel: string; type?: string; sizes?: string; href: string }>;
  metaTags?: Array<{ name?: string; property?: string; content: string }>;
};

Rules:

  • Page metadata takes priority over layout metadata (merged, page wins)
  • Loader-returned meta overrides static metadata
  • openGraph.url and openGraph.image are required when using Open Graph
  • twitter.card, twitter.image, twitter.title are required when using Twitter cards
Show full SKILL.md (188 more words)Show less

MDX Pages

MDX files in _routes/ automatically render as pages:

mdx
---
metadata:
  title: My MDX Page
  description: Page description
toc: true
---

Custom MDX components configured at project root via mdx-components.{js,ts,jsx,tsx}:

tsx
import { defineMDXConfig } from '@rasenganjs/mdx';

export default defineMDXConfig({
  components: {
    h1: ({ children }) => <h1 className="text-3xl">{children}</h1>,
  },
  layout: ({ children, toc }) => (
    <div className="flex">
      <article>{children}</article>
      <aside>{toc}</aside>
    </div>
  ),
});

The @rasenganjs/mdx Vite plugin must be configured in rasengan.config.js:

js
import mdx from '@rasenganjs/mdx/plugin';

export default defineConfig({
  vite: { plugins: [mdx()] },
});

Error Boundaries & 404

  • Each route is wrapped with an ErrorBoundary automatically
  • In development: shows stack traces. In production: generic "Application Error"
  • Custom error UI per route is not yet supported

Config-based 404:

tsx
import { RouterComponent, defineRouter } from 'rasengan';

const NotFound = () => (
  <section>
    <h1>404</h1>
    <p>Page not found</p>
  </section>
);

class AppRouter extends RouterComponent {}
export default defineRouter({
  pages: [Home],
  notFoundComponent: NotFound,
})(AppRouter);

A catch-all * route is auto-added by generateRoutes().

Navigation

tsx
import { Link, NavLink, useNavigate, ScrollRestoration } from 'rasengan';

<Link to="/about">About</Link>
<Link to="#section">Section</Link>
<NavLink to="/about" className={({ isActive }) => isActive ? 'active' : ''}>About</NavLink>

const navigate = useNavigate();
navigate('/about');

<ScrollRestoration alwaysToTop />
<ScrollRestoration target={containerRef} />

Anti-patterns

Don't ❌Do ✅
Forgetting to set .path on page/layout componentsAlways set .path as a static property for config-based routing
Using React.FC type for pages/layoutsUse PageComponent / LayoutComponent from rasengan
Putting metadata only in the component bodyUse static .metadata property so the framework reads it at build time
Importing directly from react-routerImport routing APIs from rasengan
Rendering <Outlet> outside layoutsOnly <Outlet /> in layout components
Defining loaders as exported functions but not attaching themAttach loader as static .loader property on component
Nesting pages too deep in _routes/Keep route tree shallow — each directory adds a path segment
Forgetting "type": "module" in package.jsonRasengan is ESM-only
Using navigate() outside route componentsOnly use navigation hooks within router-rendered components

© 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-pages of rasengan-dev/rasenganjs.

Open the folder on GitHubat commit 459b93b

Compare with similar skills

Rasengan Pages 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 Pages compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Rasengan Pages this skillrasengan-dev/rasenganjs124—~2.2kAutomated safety check: PassMIT
React UI State PatternsChrisWiles/claude-code-showcase6.1k8 repos~1.6kAutomated safety check: PassNone
Fumadocsbetter-notify/better-notify313—~2.3kAutomated safety check: PassMIT
Cookbook Add Modelsgl-project/sglang37k2 repos~4kAutomated safety check: PassApache-2.0
Blog ChartAgriciDaniel/claude-blog2.3k—~2.4kAutomated safety check: PassMIT
React Component Documentationgetsentry/sentry46k—~3.6kAutomated safety check: PassCustom licence

Similar skills

  • React UI State Patterns

    ChrisWiles/claude-code-showcase

    Sets patterns for React interfaces: when to show loading spinners or skeletons, how to surface errors, how to disable buttons during async work and how to handle empty lists.

    6.1k GitHub starsUsed in 8 repos~1.6k tokens
    Frontend & DesignAuto-check passed

  • Fumadocs

    better-notify/better-notify

    A skill your agent uses when writing MDX documentation pages for a Fumadocs project — frontmatter, meta.json, page ordering, and fumadocs-ui React components available inside MDX content.

    313 GitHub stars~2.3k tokensUpdated 1 mo ago
    Frontend & DesignAuto-check passed

  • Cookbook Add Model

    sgl-project/sglang

    Add a new model to the SGLang Cookbook (docs/, Mintlify), config-driven format — instantiate the model-agnostic template into a per-model config (+ benchmarks) JSX under src/snippets/configs/, an…

    37k GitHub starsUsed in 2 repos~4k tokens
    Frontend & DesignAuto-check passed

  • Blog Chart

    AgriciDaniel/claude-blog

    Generate dark-mode-compatible inline SVG data visualization charts for blog posts.

    2.3k GitHub stars~2.4k tokensUpdated yesterday
    Frontend & DesignAuto-check passed

  • React Component Documentation

    getsentry/sentry

    Official

    Create or update component documentation in Sentry's MDX stories format.

    46k GitHub stars~3.6k tokensUpdated today
    Frontend & DesignAuto-check passed

  • React Patterns

    affaan-m/ECC

    React 18/19 patterns including hooks discipline, server/client component boundaries, Suspense + error boundaries, form actions, data fetching, state management decision trees, and…

    276k GitHub starsUsed in 1 repo~2.9k tokens
    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 yesterday
    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 yesterday
    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 yesterday
    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 yesterday
    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 yesterday
    Auto-check passed

Categories

Questions about Rasengan Pages

What does Rasengan Pages do?

Page and layout component patterns for Rasengan.js. An agent skill from rasengan-dev/rasenganjs. Rasengan Pages is an agent skill from rasengan-dev/rasenganjs.js.

When should I use Rasengan Pages?

Rasengan Pages fits situations like: modifying .page.tsx; tasks that involve React components; tasks that involve Markdown.

How do I install Rasengan Pages in Claude Code?

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

How do I install Rasengan Pages in Codex?

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

Can I use Rasengan Pages 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-pages -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-pages, .gemini/skills/rasengan-pages, .github/skills/rasengan-pages and .opencode/skills/rasengan-pages in your project.

What does Rasengan Pages need to run?

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

Does Rasengan Pages 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 Pages 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 Pages use?

Rasengan Pages 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 Pages use?

About 2.2k tokens (SKILL.md is roughly 8.7k 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 Pages?

Skills that share tags, products or a category with Rasengan Pages: React UI State Patterns (ChrisWiles/claude-code-showcase, 6.1k stars), Fumadocs (better-notify/better-notify, 313 stars), Cookbook Add Model (sgl-project/sglang, 37k stars) and Blog Chart (AgriciDaniel/claude-blog, 2.3k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Rasengan Pages?

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.