agentleFS
Sign inStart free
monegitmonegit/agent-skills/skills/storybook/SKILL.md

storybook

Skill0 starsChanged 32 days agoMITView on GitHub

Create and maintain typed React Storybook stories and generated documentation. Use when creating a UI component or when a component's props, types, values, defaults, or behavior change and related stories, controls, or docs must be updated.

11 other projects use a version of this.

Adopted by

Most recently taken up by

The file

Show its rules and text

We split this skill into the rules it gives an agent

16 rules. 0 are common, 7 are distinctive, and 9 are very specific to this project.

  • 0

    Common

    Most of the 9 edited versions we read keep these.

  • 7

    Distinctive

    This author's own choices. Worth a look.

  • 9

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Distinctive:

    Keep stories as accurate, reviewable examples of the public component contract.

    line 8
  2. Distinctive:

    Update removed or invalid args, controls, union options, and affected stories when props or types change.

    line 16
  3. Distinctive:

    Run the narrowest available Storybook, type, and lint checks.

    line 17
  4. Very specific:

    Use Components as the category for standalone reusable UI components.

    line 23
  5. Very specific:

    Use Foundations as the category for typography, palette, radius, spacing, and elevation tokens.

    line 24
  6. Very specific:

    Use Compounds as the category for coordinated widgets composed from distinct components, such as a draggable/drop target or login form.

    line 25
  7. Very specific:

    Use the component kind as the type segment, such as Button, Input, or Layout.

    line 26
  8. Very specific:

    Use the component's public name as the name segment, for example Components/Button/ActionButton.

    line 27
  9. Very specific:

    Use Meta<typeof Component> and StoryObj<typeof meta> for typed React stories.

    line 28
  10. Very specific:

    Keep argTypes controls and literal-union options synchronized with the public API.

    line 29
  11. Very specific:

    Use a layout parameter only when it improves evaluation.

    line 30
  12. Distinctive:

    Read references/react-stories.md for the standard React story template.

    line 32
  13. Distinctive:

    Do not leave a story compiling against a stale props contract.

    line 36
  14. Very specific:

    Do not use Compounds for a component that is only visually grouped.

    line 37
  15. Distinctive:

    Do not place a standalone component or foundation under an ad-hoc title prefix.

    line 38
  16. Distinctive:

    Keep story labels and example content concise and user-facing.

    line 39

“Common” is measured: kept by at least 6 in 10 of the 9 edited versions of this file we could read. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

Storybook

Keep stories as accurate, reviewable examples of the public component contract. Read the project's Storybook setup and nearby stories before writing or updating one.

Workflow

  1. Locate the component and its affected stories. Treat creating a component or changing its public contract as a Storybook update trigger.
  2. Classify the title into a category and type, then use the {Category}/{Type}/{Name} hierarchy.
  3. Define typed meta and stories with autodocs, useful controls, and representative args.
  4. Cover each meaningful visual variant and state without inventing unsupported behavior.
  5. Update removed or invalid args, controls, union options, and affected stories when props or types change.
  6. Run the narrowest available Storybook, type, and lint checks.

Requirements

  • Set tags: ["autodocs"] on every story meta object unless the project explicitly requires an exception.
  • Set title to {Category}/{Type}/{Name}:
    • Use Components as the category for standalone reusable UI components.
    • Use Foundations as the category for typography, palette, radius, spacing, and elevation tokens.
    • Use Compounds as the category for coordinated widgets composed from distinct components, such as a draggable/drop target or login form.
    • Use the component kind as the type segment, such as Button, Input, or Layout.
    • Use the component's public name as the name segment, for example Components/Button/ActionButton.
  • Use Meta<typeof Component> and StoryObj<typeof meta> for typed React stories.
  • Keep argTypes controls and literal-union options synchronized with the public API.
  • Use a layout parameter only when it improves evaluation; prefer centered for isolated controls.

Read references/react-stories.md for the standard React story template.

Guardrails

  • Do not leave a story compiling against a stale props contract.
  • Do not use Compounds for a component that is only visually grouped.
  • Do not place a standalone component or foundation under an ad-hoc title prefix.
  • Keep story labels and example content concise and user-facing.

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

  • It worked
  • Partly
  • It didn't
What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free