Borrowing it
Nothing to install: this file belongs to Synerise/synerise-design. 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/Synerise/synerise-design/master/.claude/skills/storybook-code-tab/SKILL.mdgit clone --depth 1 https://github.com/Synerise/synerise-designWrote 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/synerise/synerise-design/storybook-code-tab)<a href="https://agentmods.dev/skills/synerise/synerise-design/storybook-code-tab"><img src="https://agentmods.dev/badge/skills/synerise/synerise-design/storybook-code-tab/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/synerise/synerise-design/storybook-code-tab"><img src="https://agentmods.dev/badge/skills/synerise/synerise-design/storybook-code-tab.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.00025 | $0.01728 |
| Opus 5 | $0.00013 | $0.00864 |
| Sonnet 5 | $0.00005 | $0.00346 |
| Haiku 4.5 | $0.00003 | $0.00173 |
Grade A, and why
storybook-code-tab 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 5d 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 — 180 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Overview
Generate developer-friendly JSX code strings for the parameters.docs.source.code field on each exported story in a component's *.stories.tsx file. These strings appear in the custom Code panel (packages/storybook/addon-code-panel/CodePanel.tsx) and serve as copy-paste references for developers.
Arguments
The user must provide:
- Component name — e.g.,
ActionArea,Badge,Toast
The user may optionally provide:
- A specific story name to process (otherwise all stories are processed)
- A path to the story file if it differs from the standard location
Workflow
Step 1 — Locate the story file
Find the story file at the standard path:
packages/storybook/stories/components/<ComponentName>/<ComponentName>.stories.tsx
If not found, search with:
packages/storybook/stories/components/**/<ComponentName>.stories.tsx
Also check for associated data/constants files in the same directory (e.g., <ComponentName>.data.tsx, <ComponentName>.constants.ts) — these may contain helpers referenced by stories.
Skip any .test.stories.tsx or .tests.stories.tsx files — those are visual/interaction test stories.
Step 2 — Read and analyze the file
Read the complete story file. Identify:
-
Meta/default export — extract:
componentfield (the primary component name for JSX tags)renderfunction at the meta level (default render for all stories)argsat the meta level (default args inherited by all stories)argTypes(to understand prop types)
-
All named story exports — for each, extract:
args(including spread references like...Default.args)renderfunction (story-level override)- Existing
parameters.docs.source.code(updating vs adding) - Spread from other stories (e.g.,
...Default,...Simple)
-
Imports — note which components and icons are imported, as the code snippet should reference the same names. Prefer direct named imports (e.g.,
Expander) over deprecated compound component syntax (e.g.,Button.Expander).
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.
- 5d ago First seen · 180 lines · 25 tokens per session scan A 0bcd0d4be2f5
storybook-code-tab is a skill published in the GitHub repository Synerise/synerise-design (96 stars, last pushed yesterday), licensed MIT. It adds 25 tokens to every session and 1,728 once invoked, about $0.0001 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-04.
Other skills, from other repositories
suanfish-design-system
A Chinese design system for creating and reviewing web interfaces, with multiple design perspectives working together. It focuses on React and Tailwind-based projects.
shadcn
Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI, including chat interfaces. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json…
compiler-orchestrator
Orchestrate the Rust compiler port end-to-end. Discovers the current frontier, fixes failing passes, ports new passes, reviews, and commits in a loop.
migrate-radix-to-base
Migrates React projects and components from Radix UI to Base UI. Use when asked to migrate from radix, move to base-ui, convert radix primitives, or switch a shadcn project's base library. Handles single components ("migrate accordion") and whole projects.
plan-update
Use when you need to update a plan document with deep research across all compiler passes. Launches parallel subagents to analyze how a topic affects every compiler phase, then consolidates findings into the plan doc.
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.