Spotpatch
huanglvjing/spotpatch
为 React 项目建立从浏览器页面元素到精确 JSX/TSX 源码、结构化上下文与可审阅修改的 SpotPatch 工作流。用户提到 SpotPatch、截图沟通前端修改、页面元素定位源码、Vite 或 Next.js 接入、组件数据链路、结构化 Prompt、AI 补丁审阅、安装检查或故障排查时使用此技能。
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.
$ npx skills add better-notify/better-notify --skill fumadocs -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install better-notify/better-notify fumadocs --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ 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-srcUse ~/.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/
Install the "fumadocs" agent skill from https://github.com/better-notify/better-notify/tree/main/.claude/skills/fumadocs into .claude/skills/fumadocs/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "fumadocs", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/better-notify/better-notify/tree/main/.claude/skills/fumadocsType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add better-notify/better-notify --skill fumadocs -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install better-notify/better-notify fumadocs --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/better-notify/better-notify.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.claude/skills/fumadocs .agents/skills/fumadocs && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "fumadocs" agent skill from https://github.com/better-notify/better-notify/tree/main/.claude/skills/fumadocs into .agents/skills/fumadocs/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "fumadocs", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add better-notify/better-notify --skill fumadocs -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install better-notify/better-notify fumadocs --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/better-notify/better-notify.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.claude/skills/fumadocs .cursor/skills/fumadocs && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "fumadocs" agent skill from https://github.com/better-notify/better-notify/tree/main/.claude/skills/fumadocs into .cursor/skills/fumadocs/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "fumadocs", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/better-notify/better-notify.git --path .claude/skills/fumadocs--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add better-notify/better-notify --skill fumadocs -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install better-notify/better-notify fumadocs --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/better-notify/better-notify.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.claude/skills/fumadocs .gemini/skills/fumadocs && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "fumadocs" agent skill from https://github.com/better-notify/better-notify/tree/main/.claude/skills/fumadocs into .gemini/skills/fumadocs/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "fumadocs", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install better-notify/better-notify fumadocsInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add better-notify/better-notify --skill fumadocs -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/better-notify/better-notify.git skills-src && mkdir -p .github/skills && cp -r skills-src/.claude/skills/fumadocs .github/skills/fumadocs && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "fumadocs" agent skill from https://github.com/better-notify/better-notify/tree/main/.claude/skills/fumadocs into .github/skills/fumadocs/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "fumadocs", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add better-notify/better-notify --skill fumadocs -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install better-notify/better-notify fumadocs --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/better-notify/better-notify.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.claude/skills/fumadocs .opencode/skills/fumadocs && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "fumadocs" agent skill from https://github.com/better-notify/better-notify/tree/main/.claude/skills/fumadocs into .opencode/skills/fumadocs/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "fumadocs", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
fumadocsA 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. 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.
5 steps, taken from the first numbered list in SKILL.md.
Read from SKILL.md and the folder at commit b84dcc5. It shows what the files ask for, not the result of running them.
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.
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.
Hosts in commands or code, which the agent is likely to contact:
react.emailFrom URLs in SKILL.md, links to its own repository left out.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
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.
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.
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.
The full file from better-notify/better-notify at commit b84dcc5, republished under its MIT licence (© better-notify). 539 words, ~2,302 tokens.
.claude/skills/fumadocs/SKILL.md (or your agent's skills folder). This skill also uses 4 other files; get the full folder from GitHub.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.
Every MDX page requires three fields:
title (required) — page heading, concise noun or verb phraseicon (required) — must be a key from the registered icon map belowdescription (required) — one sentence, used in meta tags and sidebar---
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@betternotify/* paths.foo/bar/example.com placeholders.| Content type | Component | Import needed? |
|---|---|---|
| Comparing options or listing properties | TypeTable | Yes: fumadocs-ui/components/type-table |
| Step-by-step setup | Steps/Step | No (auto-registered) |
| Important warnings or caveats | Callout | No (auto-registered) |
| Alternative approaches or variants | Tabs/Tab | No (registered in mdx.tsx) |
| Linking to related pages | Cards/Card | No (auto-registered) |
| Showing file structure | Files/File/Folder | Yes: fumadocs-ui/components/files |
| Zoomable images | ImageZoom | Yes: fumadocs-ui/components/image-zoom |
| FAQ or collapsible content | Accordion/Accordions | Yes: fumadocs-ui/components/accordion |
| Prop | Type | Default |
|---|---|---|
title | string | — |
type | 'info' | 'warn' | 'error' | 'info' |
<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>| Prop | Type | Required |
|---|---|---|
title | string | yes |
href | string | no |
icon | ReactNode | no |
<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 Prop | Type | Purpose |
|---|---|---|
items | string[] | Tab labels |
defaultIndex | number | Initial active tab |
groupId | string | Sync selection across tab groups |
persist | boolean | Save selection to localStorage |
<Tabs items={['SMTP', 'Resend']}>
<Tab value="SMTP">Configure with `smtpTransport({ host, port, auth })`.</Tab>
<Tab value="Resend">Configure with `resendTransport({ apiKey })`.</Tab>
</Tabs>Each field shape: { description: string, type: string, default?: any }.
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>
### Install the package
```bash
pnpm add @betternotify/smtp</Step>
<Step>
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>
```
| Folder Prop | Type |
|---|---|
name | string |
defaultOpen | boolean |
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>| Prop | Type |
|---|---|
src | string |
alt | string |
width | number |
height | number |
import { ImageZoom } from 'fumadocs-ui/components/image-zoom';
<ImageZoom src="/docs/failover-diagram.png" alt="Failover strategy flow" width={720} height={400} />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>| Prop | Type | Purpose |
|---|---|---|
id | string | Enables close button and persistence |
changeLayout | boolean | Adjust layout height (default: true) |
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>import { InlineTOC } from 'fumadocs-ui/components/inline-toc';
<InlineTOC items={toc} />Controls page ordering and folder behavior. Place one in each content directory.
{
"title": "Transports",
"pages": [
"custom-transports",
"---Generic---",
"multi-transport",
"mock",
"smtp",
"...rest"
]
}| Syntax | Meaning |
|---|---|
"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": true | Makes 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:
See [Middleware](/docs/concepts/middleware) for composition order.
See [Multi-Transport](./generic/multi-transport.mdx) for composed delivery.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:
<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.
Before writing, determine which category your page falls into and read the corresponding template:
category-concept.md.category-implementation.md.category-guide.md.category-reference.md.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
SKILL.md and 4 other files in .claude/skills/fumadocs of better-notify/better-notify.
Open the folder on GitHubat commit b84dcc5
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.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Fumadocs this skillbetter-notify/better-notify | 313 | — | ~2.3k | Automated safety check: Pass | MIT | |
| Spotpatchhuanglvjing/spotpatch | 134 | — | ~998 | Automated safety check: Pass | MIT | |
| Zod Validation Expertdavila7/claude-code-templates | 32k | 3 repos | ~2.4k | Automated safety check: Pass | MIT | |
| Using Docs Kitlobehub/lobe-ui | 2.2k | — | ~2.8k | Automated safety check: Pass | MIT | |
| Fork And GoSimplePDF/simplepdf-embed | 407 | — | ~7.9k | Automated safety check: Notes | MIT | |
| Cookbook Add Modelsgl-project/sglang | 37k | 2 repos | ~4k | Automated safety check: Pass | Apache-2.0 |
huanglvjing/spotpatch
为 React 项目建立从浏览器页面元素到精确 JSX/TSX 源码、结构化上下文与可审阅修改的 SpotPatch 工作流。用户提到 SpotPatch、截图沟通前端修改、页面元素定位源码、Vite 或 Next.js 接入、组件数据链路、结构化 Prompt、AI 补丁审阅、安装检查或故障排查时使用此技能。
davila7/claude-code-templates
Expert in Zod — TypeScript-first schema validation. An agent skill from davila7/claude-code-templates.
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).
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.
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…
rasengan-dev/rasenganjs
Page and layout component patterns for Rasengan.js. An agent skill from rasengan-dev/rasenganjs.
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.
Categories
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.
Fumadocs fits situations like: writing MDX documentation pages for a Fumadocs project — frontmatter; fumadocs-ui React components available inside MDX content.
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.
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.
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.
SKILL.md names no scripts, command-line tools or credentials: Fumadocs is instructions for the agent only.
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.
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.
Fumadocs is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
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.
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.
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.