Borrowing it
Nothing to install: this file belongs to recomposesh/recompose. Take a copy, put it at the same path in your own repository, and replace the rules that are about this project with yours.
curl -O https://raw.githubusercontent.com/recomposesh/recompose/main/.claude/skills/storybook-stories/SKILL.mdgit clone --depth 1 https://github.com/recomposesh/recomposeWrote 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/recomposesh/recompose/storybook-stories)<a href="https://agentmods.dev/skills/recomposesh/recompose/storybook-stories"><img src="https://agentmods.dev/badge/skills/recomposesh/recompose/storybook-stories/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/recomposesh/recompose/storybook-stories"><img src="https://agentmods.dev/badge/skills/recomposesh/recompose/storybook-stories.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- NVIDIA SkillSpector pass
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.00037 | $0.01580 |
| Opus 5 | $0.00018 | $0.00790 |
| Sonnet 5 | $0.00007 | $0.00316 |
| Haiku 4.5 | $0.00004 | $0.00158 |
Grade A, and why
storybook-stories 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 7d 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.
How it starts
The opening of the file, as written. The whole thing — 67 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Storybook stories
Placement
- A story lives next to its component:
<component>.stories.tsxinside the owning slice'sui/segment. - Import other slices only through their public
index.ts. Steiger enforces this in stories too. - A play function queries with
findBy, nevergetBy, whenever the component reads a suspended query.getByis synchronous, so it throws the moment the story mounts, while the boundary is still pending and the canvas holds no roles at all. The vitest project hides this, because its render flushes React's act queue; Chromatic does not, and reported it asUnable to find an accessible elementwithThere are no accessible rolesagainst a screenshot that plainly showed the control. Measured: the first role appears about 340 milliseconds in, well insidefindBy's one second. - An assertion that something is absent needs a settle point before it.
queryBy(...)).toBeNull()passes on an empty canvas, so it proves nothing until anawait canvas.findBy...for something present has run first. - A focus assertion waits too.
findByresolves the moment the element exists, which is before the effect that places focus has run: measured at 0 milliseconds focus sits onbody, and reaches the control around 50. Hold the element in a variable, then asserttoHaveFocusinsidewaitFor. - A dark-scheme story carries no play function. It exists to be looked at, by a person and by the snapshot tool. Asserting the scheme inside it tests the capture environment rather than the component, and the environments disagree: the vitest project applies the toolbar's class, a static build applies nothing and lets
prefers-color-schemedecide, and the capture tool emulates the media. Measured across all three, the same assertion failed three different ways. The semantics belong in the light stories, which run everywhere. - A new
ui/component and its story land together, before the branch leaves your machine. Writing the component without the story is the mistake this rule exists to stop, and it stays cheap only while both files are still open. - Two gates enforce it.
pnpm run lint:storiesruns onpre-pushand names each component missing its sibling, so the branch never reaches a pull request with the gap. The pull-request meta-gate runs the same script against the pull request's base. Escape:stories-exemptlabel plus aStories-exempt: <reason>body line, and the escape only exists on the pull request.
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.
- 7d ago First seen · 67 lines · 37 tokens per session scan A b18938e87830
storybook-stories is a skill published in the GitHub repository recomposesh/recompose (27 stars, last pushed 14d ago), licensed MIT. It adds 37 tokens to every session and 1,580 once invoked, about $0.0002 per session on Opus 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-09-03.
Other skills, from other repositories
next-cache-components-optimizer
Drive a Next.js route to instant navigation by setting up an agentic loop, under Cache Components / PPR, on initial load (hard navigation) and client-side navigation (soft navigation). Encode the goal as a failing @next/playwright instant() e2e and work it to green, one verified route at a time; the shipped test then…
next-dev-loop
Verify Next.js runtime behavior after editing app code. Use this skill to confirm a change actually works in a running app — not just that it compiles or type-checks. Combines /next/mcp (Next.js's view) with agent-browser (the browser's view). Requires a running next dev.
react-testing
React component testing with React Testing Library, Vitest/Jest, MSW for network mocking, accessibility assertions with axe, and the decision boundary between component tests and Playwright/Cypress end-to-end runs. Use when writing or fixing tests for React components, hooks, or pages.
react-patterns
React 18/19 patterns including hooks discipline, server/client component boundaries, Suspense + error boundaries, form actions, data fetching, state management decision trees, and accessibility-first composition. Use when writing or reviewing React components.
compiler-commit
Use when you want to verify compiler changes and commit with the correct convention. Runs tests, lint, and format, then commits with the [compiler] or [rust-compiler] prefix.
compiler-port
Port a compiler pass from TypeScript to Rust. Gathers context, plans the port, implements in a subagent with test-fix loop, then reviews.