Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add bovinphang/frontend-craft --skill fec-storybook-component-docgit clone --depth 1 https://github.com/bovinphang/frontend-craftWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/bovinphang/frontend-craft/fec-storybook-component-doc)<a href="https://agentmods.dev/skills/bovinphang/frontend-craft/fec-storybook-component-doc"><img src="https://agentmods.dev/badge/skills/bovinphang/frontend-craft/fec-storybook-component-doc/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/bovinphang/frontend-craft/fec-storybook-component-doc"><img src="https://agentmods.dev/badge/skills/bovinphang/frontend-craft/fec-storybook-component-doc.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00093 | $0.00624 |
| Opus 5.5 | $0.00037 | $0.00250 |
| Sonnet 5.5 | $0.00019 | $0.00125 |
| Haiku 4.5 | $0.00009 | $0.00062 |
Grade A, and why
fec-storybook-component-doc scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 1mo ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
What it actually says
Storybook 组件文档化
用途
为 UI 组件建立文档化、设计系统展示和隔离状态预览环境；交互与视觉测试只覆盖 Storybook 场景内的组件状态。
流程
- 初始化或识别现有 Storybook 配置，沿用项目框架适配器、stories glob、主题和构建命令。
- 每个组件的 Story 覆盖默认态、主要变体、尺寸、语义 tone、disabled、loading、error、empty、selected、invalid 和关键边缘状态。
- 依赖 Router、Store、i18n、ThemeProvider 的组件用 decorators 包裹，不在 Story 中复制应用入口。
- 复杂组件用 MDX 补充使用说明、Props、slots/children、variant 矩阵、状态示例、可访问性要求和源码展示。
- 需要自动化时接入 interaction tests、addon-a11y、Chromatic 或 Storybook Test Runner；这些能力服务于组件文档和设计系统展示，不承接跨页业务旅程。
- 设计系统组件应记录 token 来源、Tailwind/class 变体、暗色模式、响应式尺寸和不支持的组合，避免消费者靠猜测拼装。
详细参考
- 需要
main.ts、preview.ts、stories、decorators、MDX、交互测试和视觉回归示例时，加载 references/story-patterns.md。
约束
- Story 需随组件 prop 变更同步更新。
- Provider 依赖必须通过 decorator 补齐。
- Storybook 构建产物
storybook-static/不应提交到 Git。 - Storybook 用于开发和组件文档，不替代生产页面 SEO。
- Storybook 视觉基线用于组件状态；跨页面截图和真实路由流程分流到 E2E workflow。
- 大型组件库需控制 stories glob 和 addon 开销。
- 不用 Storybook 隐藏组件 API 问题；若变体组合爆炸，应先收敛组件职责或拆分组件。
预期输出
可交互的组件文档和设计系统展示站点，每个组件状态都有隔离预览，Props 表格可生成，关键 Storybook 场景有可选 play 测试或视觉回归基线。
What ships with it
1 file beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 1mo ago First seen · 38 lines · 93 tokens per session scan A 05bf63496e80
fec-storybook-component-doc is a skill published in the GitHub repository bovinphang/frontend-craft (22 stars, last pushed 1mo ago), licensed MIT. It adds 93 tokens to every session and 624 once invoked, about $0.0004 per session on Opus 5.5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
brand-design
Brand-aware design system generator that acts as Head of Brand. Translates abstract brand language into a mathematically-validated, implementation-ready design system, writes creative-brief.md as the source of truth for all UI/UX in a project, and optionally compiles it to framework tokens (Tailwind v4 @theme, v3…
review-all
Multi-agent code review for diffs (project-agnostic). Covers standards, bugs, security, DRY, smells, perf, tests, API contracts, a11y/i18n. Verifies each finding to eliminate false positives. Use for /review-all, pre-PR/pre-commit review, or auditing uncommitted/staged changes.
aesthetic-instrument
A committed aesthetic in the sense of skills/committed-aesthetic/SKILL.md: every rule below is checkable, and every value was read out of the source — packages/board/public/index.html and greatcto-site/styles.css — rather than chosen to write this document.
committed-aesthetic
How to write — and how to use — a skill that IS one aesthetic rather than a catalogue of them. A catalogue lets an agent pick, and it picks the modal option; a committed aesthetic makes it execute one thing precisely, against rules you can check. Use when a design keeps coming out competent and forgettable, when…
peekaboo
Provides runtime observation and interaction for native macOS interfaces through accessibility state and screenshots. Use when the task depends on visible or interactive state in a running SwiftUI/AppKit app: what is rendered, focused, selected, enabled, reachable through menus/windows/dialogs, or experienced across a…
elderly-ui-audit
A code review for making websites and mobile apps easier for older people to use, based on Chinese government accessibility guidelines.