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.

MITAuto-check passedFrontend & Design

Install Fumadocs

skills CLI
$ npx skills add better-notify/better-notify --skill fumadocs -a claude-code

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

GitHub CLI
$ gh skill install better-notify/better-notify fumadocs --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/better-notify/better-notify.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/fumadocs .claude/skills/fumadocs && 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
fumadocs
GitHub stars
313
Token cost
~2.3k tokens
SKILL.md length
539 words
Files
5
Skills in repo
2
Repo updated
First seen
Licence
MIT

At a glance

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.

  • Works in 5 steps: Direct, second-person, present tense… → No filler: never "simply", "just",… → No marketing: never "powerful",… → …
  • Writing MDX documentation pages for a Fumadocs project — frontmatter
  • SKILL.md covers Frontmatter, Voice and Tone, Code Examples and Component Decision Guide, plus 6 more sections
  • Reaches react.email

What it does

Fumadocs is an agent skill from better-notify/better-notify. Use when writing MDX documentation pages for a Fumadocs project — frontmatter, meta.json, page ordering, and fumadocs-ui React components available inside MDX content.

Its SKILL.md is about 2.3k tokens, which your agent loads only when the skill is triggered. The skill folder holds 4 other files (for example `category-concept.md`, `category-guide.md` and `category-implementation.md`).

It sits in Frontend & Design, covering Markdown and React components. It works with TypeScript, Cloudflare, GitHub and tRPC. The repository describes itself as: All your notifications from one library. For Node.js and Bun. The licence is MIT.

When your agent uses it

  • Writing MDX documentation pages for a Fumadocs project — frontmatter
  • Fumadocs-ui React components available inside MDX content

Example prompts

  • “/fumadocs”

Workflow steps

5 steps, taken from the first numbered list in SKILL.md.

  1. Direct, second-person, present tense ("Use this when...", not "This can be used when...").
  2. No filler: never "simply", "just", "easily", "basically".
  3. No marketing: never "powerful", "seamless", "elegant".
  4. Present tense for behavior ("Throws when all fail", not "Will throw when all fail").
  5. Active voice over passive ("multiTransport composes..." not "transports are composed by...").

What it can do on your machine

Read from SKILL.md and the folder at commit b84dcc5. 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 mdx, yaml, typescript and json).

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

  • Network

    Hosts in commands or code, which the agent is likely to contact:

    • react.email

    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

Fumadocs loads about 2.3k tokens when it runs. Until then it costs about 44 tokens; SKILL.md has 539 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~44
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 better-notify/better-notify at commit b84dcc5, republished under its MIT licence (© better-notify). 539 words, ~2,302 tokens.

Download SKILL.mdSave it as .claude/skills/fumadocs/SKILL.md (or your agent's skills folder). This skill also uses 4 other files; get the full folder from GitHub.
name
fumadocs
description
Use when writing MDX documentation pages for a Fumadocs project — frontmatter, meta.json, page ordering, and fumadocs-ui React components available inside MDX content.

Fumadocs Documentation Template

This skill is the single source of truth for writing Better-Notify documentation pages. It covers structure, content, voice, component usage, and page ordering for all doc types.

Frontmatter

Every MDX page requires three fields:

  • title (required) — page heading, concise noun or verb phrase
  • icon (required) — must be a key from the registered icon map below
  • description (required) — one sentence, used in meta tags and sidebar
yaml
---
title: Multi-Transport
icon: Truck
description: Compose multiple transports with routing, failover, and broadcast strategies.
---

Available icon keys:

Activity, AmazonLogo, Anchor, ArrowsLeftRight, At, Atom, Bell, BookOpen, Books, Bug,
ChatText, Code, Crosshair, CurlyBraces, Database, Envelope, Export, Eye, FileCode,
FileText, Fingerprint, FlaskRound, Funnel, Gauge, GitFork, Globe, History, House,
Layers, Layout, Lightbulb, Lightning, Megaphone, Newspaper, Notebook, Package,
PaperPlane, Path, Plug, Queue, Radio, Rocket, Scales, Server, Shield, Tag, Terminal,
TestTube, TreeStructure, Truck, Warning, Webhooks, Wrench

Voice and Tone

  1. Direct, second-person, present tense ("Use this when...", not "This can be used when...").
  2. No filler: never "simply", "just", "easily", "basically".
  3. No marketing: never "powerful", "seamless", "elegant".
  4. Present tense for behavior ("Throws when all fail", not "Will throw when all fail").
  5. Active voice over passive ("multiTransport composes..." not "transports are composed by...").

Code Examples

  1. Always include import statements with real @betternotify/* paths.
  2. Realistic values, never foo/bar/example.com placeholders.
  3. Minimal working example first, advanced variations after.
  4. TypeScript only.

Component Decision Guide

Content typeComponentImport needed?
Comparing options or listing propertiesTypeTableYes: fumadocs-ui/components/type-table
Step-by-step setupSteps/StepNo (auto-registered)
Important warnings or caveatsCalloutNo (auto-registered)
Alternative approaches or variantsTabs/TabNo (registered in mdx.tsx)
Linking to related pagesCards/CardNo (auto-registered)
Showing file structureFiles/File/FolderYes: fumadocs-ui/components/files
Zoomable imagesImageZoomYes: fumadocs-ui/components/image-zoom
FAQ or collapsible contentAccordion/AccordionsYes: fumadocs-ui/components/accordion

Component API Reference

Callout
PropTypeDefault
titlestring—
type'info' | 'warn' | 'error''info'
mdx
<Callout>Default info callout with no title.</Callout>

<Callout title="Heads up" type="warn">
  This transport requires valid SMTP credentials at runtime.
</Callout>

<Callout title="Breaking change" type="error">
  The `provider` option was removed in v0.3. Use `transport` instead.
</Callout>
Cards / Card
PropTypeRequired
titlestringyes
hrefstringno
iconReactNodeno
mdx
<Cards>
  <Card href="/docs/transports/generic/multi-transport" title="Multi-Transport">
    Compose multiple transports with routing and failover.
  </Card>
  <Card href="/docs/transports/third-party/ses" title="Amazon SES">
    Send production email through AWS SES.
  </Card>
</Cards>
Tabs / Tab
Tabs PropTypePurpose
itemsstring[]Tab labels
defaultIndexnumberInitial active tab
groupIdstringSync selection across tab groups
persistbooleanSave selection to localStorage
mdx
<Tabs items={['SMTP', 'Resend']}>
  <Tab value="SMTP">Configure with `smtpTransport({ host, port, auth })`.</Tab>
  <Tab value="Resend">Configure with `resendTransport({ apiKey })`.</Tab>
</Tabs>
TypeTable

Each field shape: { description: string, type: string, default?: any }.

mdx
import { TypeTable } from 'fumadocs-ui/components/type-table';

<TypeTable
  type={{
    strategy: {
      description: 'Routing strategy for outbound email.',
      type: "'failover' | 'round-robin' | 'broadcast' | 'random'",
      default: "'failover'",
    },
    transports: {
      description: 'Array of transport entries to compose.',
      type: 'TransportEntry[]',
    },
  }}
/>
Steps / Step
mdx
<Steps>
<Step>

### Install the package

```bash
pnpm add @betternotify/smtp
</Step>
<Step>
Configure the transport
ts
import { smtpTransport } from '@betternotify/smtp'

const transport = smtpTransport({ host: 'email-smtp.us-east-1.amazonaws.com', port: 587, auth: { user: process.env.SES_SMTP_USER!, pass: process.env.SES_SMTP_PASS! } })
</Step>
</Steps>
```
Files / File / Folder
Folder PropType
namestring
defaultOpenboolean
mdx
import { File, Folder, Files } from 'fumadocs-ui/components/files';

<Files>
  <Folder name="packages" defaultOpen>
    <Folder name="core" defaultOpen>
      <File name="src/transports/multi.ts" />
      <File name="src/transports/types.ts" />
    </Folder>
    <Folder name="ses">
      <File name="src/index.ts" />
    </Folder>
  </Folder>
</Files>
ImageZoom
PropType
srcstring
altstring
widthnumber
heightnumber
mdx
import { ImageZoom } from 'fumadocs-ui/components/image-zoom';

<ImageZoom src="/docs/failover-diagram.png" alt="Failover strategy flow" width={720} height={400} />
Accordion / Accordions
mdx
import { Accordion, Accordions } from 'fumadocs-ui/components/accordion';

<Accordions>
  <Accordion title="When should I use broadcast?">
    Use broadcast when every transport must receive the message, such as sending through both a
    transactional provider and an analytics sink.
  </Accordion>
  <Accordion title="Does failover retry automatically?">
    Failover tries each transport in order. It does not retry a failed transport — it moves to
    the next one in the list.
  </Accordion>
</Accordions>
Banner
PropTypePurpose
idstringEnables close button and persistence
changeLayoutbooleanAdjust layout height (default: true)
mdx
import { Banner } from 'fumadocs-ui/components/banner';

<Banner>Better-Notify v0.2 is now available.</Banner>
<Banner id="v02-release">Closeable banner with persistence.</Banner>
<Banner changeLayout={false}>Does not shift sidebar height.</Banner>
Show full SKILL.md (213 more words)Show less
InlineTOC
mdx
import { InlineTOC } from 'fumadocs-ui/components/inline-toc';

<InlineTOC items={toc} />

meta.json

Controls page ordering and folder behavior. Place one in each content directory.

json
{
  "title": "Transports",
  "pages": [
    "custom-transports",
    "---Generic---",
    "multi-transport",
    "mock",
    "smtp",
    "...rest"
  ]
}
SyntaxMeaning
"page-name"Include page by filename (no extension)
"---Text---"Separator with label
"..."Rest — all unlisted pages
"...folder"Extract folder children inline
"!name"Exclude a page
"root": trueMakes folder a sidebar tab root

When adding a new page, update the parent directory's meta.json to include it in the pages array.

Use absolute paths for cross-section links and relative paths within the same section:

mdx
See [Middleware](/docs/concepts/middleware) for composition order.
See [Multi-Transport](./generic/multi-transport.mdx) for composed delivery.

Third-party integrations

When documenting a page that integrates with an external library (React Email, Zod, OpenTelemetry, etc.), add a Card near the top linking to the library's official website or documentation. This gives readers quick access to the upstream reference without leaving the docs:

mdx
<Cards>
  <Card href="https://react.email" title="React Email">
    Official documentation, component reference, and examples.
  </Card>
</Cards>

Follow this pattern for every third-party integration page — template adapters, transport providers, validator libraries, tracing tools, etc.

Page Categories

Before writing, determine which category your page falls into and read the corresponding template:

  • Explaining what something is and why it exists? Read category-concept.md.
  • Showing how to use a specific feature/transport/middleware/plugin? Read category-implementation.md.
  • Walking through a multi-step workflow end-to-end? Read category-guide.md.
  • Documenting API surface, types, or configuration options? Read category-reference.md.

Reference Model

apps/web/content/docs/transports/generic/multi-transport.mdx is the living example of a well-written implementation page. Study it for tone, structure depth, and component usage.

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

Files

SKILL.md and 4 other files in .claude/skills/fumadocs of better-notify/better-notify.

  • SKILL.md
  • category-concept.md
  • category-guide.md
  • category-implementation.md
  • category-reference.md

Open the folder on GitHubat commit b84dcc5

Compare with similar skills

Fumadocs 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.

Fumadocs compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Fumadocs this skillbetter-notify/better-notify313—~2.3kAutomated safety check: PassMIT
Spotpatchhuanglvjing/spotpatch134—~998Automated safety check: PassMIT
Zod Validation Expertdavila7/claude-code-templates32k3 repos~2.4kAutomated safety check: PassMIT
Using Docs Kitlobehub/lobe-ui2.2k—~2.8kAutomated safety check: PassMIT
Fork And GoSimplePDF/simplepdf-embed407—~7.9kAutomated safety check: NotesMIT
Cookbook Add Modelsgl-project/sglang37k2 repos~4kAutomated safety check: PassApache-2.0

Similar skills

  • Spotpatch

    huanglvjing/spotpatch

    为 React 项目建立从浏览器页面元素到精确 JSX/TSX 源码、结构化上下文与可审阅修改的 SpotPatch 工作流。用户提到 SpotPatch、截图沟通前端修改、页面元素定位源码、Vite 或 Next.js 接入、组件数据链路、结构化 Prompt、AI 补丁审阅、安装检查或故障排查时使用此技能。

    134 GitHub stars~998 tokensUpdated 11 days ago
    Frontend & DesignAuto-check passed
  • Zod Validation Expert

    davila7/claude-code-templates

    Expert in Zod — TypeScript-first schema validation. An agent skill from davila7/claude-code-templates.

    32k GitHub starsUsed in 3 repos~2.4k tokens
    Frontend & DesignAuto-check passed
  • Using Docs Kit

    lobehub/lobe-ui

    Set up and author a documentation site with @lobehub/docs-kit (the lobedocs CLI, React Router + Vite static docs used by ui.lobehub.com).

    2.2k GitHub stars~2.8k tokensUpdated today
    Frontend & DesignAuto-check passed
  • Fork And Go

    SimplePDF/simplepdf-embed

    Guided walkthrough for forking and deploying your own SimplePDF Copilot: hosting choice, Pro-account confirmation, AI-provider wiring, demo customization, deploy, and the SimplePDF whitelist step.

    407 GitHub stars~7.9k tokensUpdated 9 days ago
    Frontend & DesignAuto-check: notes
  • 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
  • Rasengan Pages

    rasengan-dev/rasenganjs

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

    124 GitHub stars~2.2k tokensUpdated yesterday
    Frontend & DesignAuto-check passed

More from better-notify/better-notify

  • Better Notify

    better-notify/better-notify

    End-to-end typed notification infrastructure for Node.js — typed catalog of email, SMS, push, web push, WhatsApp, Slack, Discord, Telegram, and GitHub notifications with provider-agnostic transports.

    313 GitHub stars~783 tokensUpdated 1 mo ago
    Auto-check passed

Questions about Fumadocs

What does Fumadocs do?

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. Fumadocs is an agent skill from better-notify/better-notify.json, page ordering, and fumadocs-ui React components available inside MDX content.

When should I use Fumadocs?

Fumadocs fits situations like: writing MDX documentation pages for a Fumadocs project — frontmatter; fumadocs-ui React components available inside MDX content.

How do I install Fumadocs in Claude Code?

Run `npx skills add better-notify/better-notify --skill fumadocs -a claude-code`. Or copy the skill folder (.claude/skills/fumadocs in better-notify/better-notify) into .claude/skills/fumadocs in your project. Claude Code loads it when a task matches its description.

How do I install Fumadocs in Codex?

Run `npx skills add better-notify/better-notify --skill fumadocs -a codex`. Or copy the skill folder (.claude/skills/fumadocs in better-notify/better-notify) into .agents/skills/fumadocs in your project. Codex loads it when a task matches its description.

Can I use Fumadocs 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 better-notify/better-notify --skill fumadocs -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/fumadocs, .gemini/skills/fumadocs, .github/skills/fumadocs and .opencode/skills/fumadocs in your project.

What does Fumadocs need to run?

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

Does Fumadocs access the network?

SKILL.md names 1 domain. In commands or code: react.email; the agent is likely to contact it when it follows the instructions. This is read from the text; nothing was executed.

Is Fumadocs 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 Fumadocs use?

Fumadocs is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Fumadocs use?

About 2.3k tokens (SKILL.md is roughly 9.2k 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 Fumadocs?

Skills that share tags, products or a category with Fumadocs: Spotpatch (huanglvjing/spotpatch, 134 stars), Zod Validation Expert (davila7/claude-code-templates, 32k stars), Using Docs Kit (lobehub/lobe-ui, 2.2k stars) and Fork And Go (SimplePDF/simplepdf-embed, 407 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Fumadocs?

better-notify (a GitHub organization) maintains it in better-notify/better-notify, which has 313 GitHub stars. The repository holds 2 skills in this directory. The repository was last updated on August 18, 2026.

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