Getting it into your agent
It runs from inside its repository, so the clone comes first — what it calls does not travel with the file alone.
git clone --depth 1 https://github.com/imMamdouhaboammar/get-fablenpx agentmods add skills/immamdouhaboammar/get-fable/storybookWrote 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/immamdouhaboammar/get-fable/storybook)<a href="https://agentmods.dev/skills/immamdouhaboammar/get-fable/storybook"><img src="https://agentmods.dev/badge/skills/immamdouhaboammar/get-fable/storybook/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/immamdouhaboammar/get-fable/storybook"><img src="https://agentmods.dev/badge/skills/immamdouhaboammar/get-fable/storybook.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.00000 | $0.16339 |
| Opus 5 | $0.00000 | $0.08169 |
| Sonnet 5 | $0.00000 | $0.03268 |
| Haiku 4.5 | $0.00000 | $0.01634 |
Grade A, and why
storybook 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 12d 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.
This is a copy
100% identical to storybook — 310 lines differ, which has more behind it and is treated as the original. This page carries a canonical link to it rather than competing with it.
How it starts
The opening of the file, as written. The whole thing — 341 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Storybook source shape
Storybook is the fidelity oracle, not the runtime. The converter bundles the package's compiled dist/ into _ds_bundle.js — the same bundle the claude.ai/design agent builds with — and generates each preview by compiling the story source module itself (hooks, fixtures, local helpers — the whole closure comes along), with every component import resolved to that shipped bundle (lib/story-imports.mjs redirects package and relative component imports to window.<Global>). The repo's own storybook render is the ground truth those previews must match: a compare harness screenshots each story in the reference storybook and the matching preview render side by side, and you iterate until they match. Nothing from storybook-static is uploaded, and no story code is ever evaluated at build time — stories run only in the browser, against the real artifact.
Requires React 18+. Playwright + chromium are required for this shape (the compare loop is the verification), not optional.
First sync or re-sync? A re-sync is marked by a config whose projectId and pkg were both in place before this run started — most of this document then doesn't apply; go to §7, where one driver run routes the work and untouched components cost nothing. Everything else takes the full flow (§2 build → §3 self-heal → §4 match → conventions header (base SKILL.md, before upload) → §6 upload), where every component gets verified and graded once — that includes a partial config left by an aborted run, and a pin this run itself just recorded in the base skill's §1. (Only the old design-sync.config.json present? Move it first and commit: mkdir -p .design-sync && mv -n design-sync.config.json .design-sync/config.json, then apply the same test.)
2. Build, then run the converter
- Build the DS package and its workspace dependencies. The converter bundles
dist/intowindow.<Global>. Run<pm> run build; in a monorepo useturbo run build --filter=<pkg>orpnpm -F "<pkg>..." build(the trailing...is required — bare-F <pkg>skips dependencies and you'll seeCannot find module '@scope/tokens'). Ifpackage.jsonmodule/exports['.']points at TS source, find the actual built entry and pass it via--entry. Do this before step 2 — storybook often imports sibling packages from their builtdist/. - Build the reference storybook ONCE into
.design-sync/sb-reference/— NOT underds-bundle/(the converter wipes--outon every rebuild, and storybook builds take minutes; the reference must survive the fix loop):
What ships with it
3 files 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.
- 12d ago First seen · 341 lines · 0 tokens per session scan A 7a3c348d75f8
storybook is a skill published in the GitHub repository imMamdouhaboammar/get-fable (4 stars, last pushed today), licensed MIT. It costs nothing until one of its globs matches a file; then it loads 16,339 tokens. A static security scan graded it A with 0 findings. It is 100% identical to storybook, differing in 310 lines, and is treated as a copy.
Other skills, from other repositories
screen-reader-testing
Test web applications with screen readers including VoiceOver, NVDA, and JAWS. Use when validating screen reader compatibility, debugging accessibility issues, or ensuring assistive technology support.
omh-frontend-refactor
This is a Hermes-native frontend-refactor workflow skill.
accessibility-a11y
WCAG 2.2 compliance, ARIA patterns, keyboard navigation, screen readers, automated testing.
qa-testing-accessibility
Builds accessibility testing workflows for WCAG 2.2 audits and CI gates. Use when adding axe-core or Lighthouse checks, calibrating gate policy, or planning screen-reader testing.
brainstorming
Interactive spec generation — turn ideas into concrete specs with R-numbered requirements and testable acceptance criteria.
backpropagation
Trace runtime bugs back to spec gaps — identify missing acceptance criteria, update specs, generate regression tests, and detect patterns.