What is shep-storybook-story-creator?

A tool that writes one Storybook story file next to an existing web component. Storybook is a place for viewing and testing UI components in different states.

Use it after adding a component when its story is missing. It creates examples for Default, Loading, Error, and any other requested variants.

It removes the need to create the required story file by hand and helps keep each web component documented in the same way.

How shep-ai/shep configures Claude Code

Reuse

Borrowing it

Nothing to install: this file belongs to shep-ai/shep. Take a copy, put it at the same path in your own repository, and replace the rules that are about this project with yours.

Copy the file

curl -O https://raw.githubusercontent.com/shep-ai/shep/main/.claude/agents/shep-storybook-story-creator.md

Clone the repo

git clone --depth 1 https://github.com/shep-ai/shep

Made for: Claude Code.

Wrote 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.

README.md

[![agentmods](https://agentmods.dev/badge/agents/shep-ai/shep/shep-storybook-story-creator/github.svg)](https://agentmods.dev/agents/shep-ai/shep/shep-storybook-story-creator)

Your own site

<a href="https://agentmods.dev/agents/shep-ai/shep/shep-storybook-story-creator"><img src="https://agentmods.dev/badge/agents/shep-ai/shep/shep-storybook-story-creator/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.

Your own site · 80×15

<a href="https://agentmods.dev/agents/shep-ai/shep/shep-storybook-story-creator"><img src="https://agentmods.dev/badge/agents/shep-ai/shep/shep-storybook-story-creator.svg" alt="Reviewed on agentmods" width="80" height="20"></a>

Per session 85 Only the description is in the session, so the agent can decide to use it. The body loads when it is invoked.

When invoked 1,327 The whole file, excluding the scripts and references it only reads on demand.

Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.

Origin original No closer match found in the catalogue.

Token cost

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.00085	$0.01327
Opus 5	$0.00043	$0.00664
Sonnet 5	$0.00017	$0.00265
Haiku 4.5	$0.00009	$0.00133

Measured 13d ago against content hash b6164f761fe4, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-12, from the pricing page.

Security

Grade A, and why

shep-storybook-story-creator 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 13d 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.

.claude/agents/shep-storybook-story-creator.md · 105 lines

How it starts

The opening of the file, as written. The whole thing — 105 lines — stays where its author put it; the contents beside it link to each section on GitHub.

You create ONE <component>.stories.tsx file colocated next to an existing component, matching shep's existing story conventions and the mandatory "every web UI component must have a story" rule from CLAUDE.md.

Inputs (the caller MUST provide all of these)

component_path — absolute or workspace-relative path to the .tsx component file (e.g., src/presentation/web/components/features/cloud-deploy/connect-cloud-provider-dialog.tsx).
component_export_name — the name of the exported component (e.g., ConnectCloudProviderDialog).
props_shape — the component's props interface as a TypeScript type or plain description.
variants — list of story variants to generate. Each variant is an object { name, props, description }. AT MINIMUM include Default. The caller SHOULD also request Loading and Error states for components that do async work, and at least one Mobile variant for responsive components.
title — optional Storybook title path (e.g., 'Features/Cloud Deploy/ConnectCloudProviderDialog'). If omitted, derive from the component's folder structure under src/presentation/web/components/.

If any REQUIRED input is missing, return an error.

Process

Step 1 — Read the component

Read component_path in full.
Note its imports (especially server actions, hooks using global state, SSE context, etc).
Any hook or server action it calls from @/lib, @/hooks, or @/app/actions/* needs to be MOCKED in Storybook — check src/presentation/web/.storybook/ for existing mock patterns.

Step 2 — Mirror an existing story

Glob src/presentation/web/components/**/*.stories.tsx and read one story file from a SIBLING or closely-related component to match style, decorators, parameters, and mock patterns.
Preferred: read the closest story in the same feature folder. Failing that, pick a story that uses similar props (dialog, form, card).

Step 3 — Write the story file

Create <same directory as component>/<component-name>.stories.tsx:

Read the full file on GitHub · 105 lines

Changes

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.

13d ago First seen · 105 lines · 85 tokens per session scan A b6164f761fe4

Subscribe to this mod's changes

shep-storybook-story-creator is an agent published in the GitHub repository shep-ai/shep (251 stars, last pushed 4d ago), licensed MIT. It adds 85 tokens to every session and 1,327 once invoked, about $0.0004 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-08-30.

Claude Code Frontend agentic-ai ai-agents ai-code-generation ai-native cursor

application-performance-frontend-developer

Build React components, implement responsive layouts, and handle client-side state management. Masters React 19, Next.js 15, and modern frontend architecture. Optimizes performance and ensures accessibility. Use PROACTIVELY when creating UI components or fixing frontend issues.

wshobson/agents · 58 tokens

frontend

Frontend Developer — user interfaces, accessibility, UX.

erniker/understudy · 11 tokens

clawteam-rnd-frontend

Frontend R&D task agent — component model, declarative UI, data-driven flow, progressive enhancement, perf-first, a11y built-in; layered architecture, CSR/SSR/SSG/ISR, state taxonomy, RAIL-style optimization.

deepelementlab/jupyter-studio · 57 tokens

designteam-ui-designer

UI task agent — visual weight, rhythm, brand DNA, pixel discipline, state consistency; F/Z scan, Gestalt spacing, functional color, type voice, Z-axis depth, icon semantics, Fitts affordances, brand moments; wireframe-to-token pipeline.

deepelementlab/jupyter-studio · 59 tokens

backend-api-security-backend-security-coder

Expert in secure backend coding practices specializing in input validation, authentication, and API security. Use PROACTIVELY for backend security implementations or security code reviews.

wshobson/agents · 40 tokens

nauro-planner

Use to plan a non-trivial change before any code is written. Classifies doctrine risk (GREEN/AMBER/RED) via Nauro, writes a structured plan, and drafts decision additions, updates, or supersedes for the direct-user Delivery parent. Returns a plan and never writes project truth or edits files.

Nauro-AI/nauro · 69 tokens

shep: Agent for Claude Code