Skip to content

Maintain Storybook

Keeps Paperclip UI stories, fixtures and the storybook catalog aligned with the feature map and production UI.

Stars
110,078
Licence
MIT
Files
2 files

What it does

This is an instruction file that teaches an AI coding agent how to look after the Storybook component catalog in the Paperclip project. Storybook is a tool where UI components are shown in isolation with sample data. Once installed, the agent checks that each story still matches the real product code and the project's feature documentation, classifies stories as current, proposed, historical or unreviewed, and updates fixtures and catalog metadata. It also points out upstream documentation drift to a separate verification skill rather than rewriting expected behaviour.

Great for

  • Engineers maintaining the Paperclip Storybook catalog and its feature map
  • Teams reviewing whether UI examples still reflect shipped components and mocked API behaviour

Skip it if

  • Anyone outside the Paperclip repository, since it depends on files such as maps/storybook-map, DESIGN.md and scripts/storybook-catalog.mjs that are not included here
  • Treating a passing catalog check as proof of product correctness, because the skill states that checks validate local annotations and inventory, not semantic parity or runtime health

Try asking

  • “Reconcile the stories for the approvals feature after a recent production UI change”
  • “Classify the historical story explorations in the catalog and mark unreviewed ones”
  • “Update mock fixtures for the agent-access screens so they match current API payloads”
  • “Regenerate the storybook catalog and report which checks passed or were blocked”
Step-by-step guide: how to use Maintain StorybookInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 2 original files, the MIT licence and an attribution note.

    maintain-storybook.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip maintain-storybook.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip maintain-storybook.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Give a narrow scope, such as one feature or one changed component, because the skill tells the agent not to audit the whole product unless asked.
  • Review the generated report and the list of blocked checks; source-only results are kept separate from executed results.
  • Do not accept new screenshot baselines as part of a cleanup task; review rendering changes with the review-storybook skill.

What's inside

  • agents/openai.yaml
  • SKILL.md

Redistributed unmodified from paperclipai/paperclip under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.