Skip to content
Back to skills

Storybook Stories

ASecurity

Create, update, refactor, or troubleshoot Storybook stories using project conventions. Excludes component implementation, token changes, E2E browser tests, and other documentation.

  • 2,785 stars
  • 0 votes
  • 0 copies
  • 2 views
  • Added June 5, 2026
documentationgitapidocumentation

Works with

  • cli
  • api

Security analysis

A100/100

Pro scans all 2 files and shows the line behind each finding

Scanned September 20, 2026

npx -y skills add compozy/compozy --skill storybook-stories --agent claude-code

Installs into .claude/skills of the current project.

Are you the author of Storybook Stories?

Add the live security badge to your README. It updates with every re-scan.

Security grade badge for Storybook Stories
[![Security: A — Skills Directory](https://www.skillsdirectory.com/api/skills/compozy-storybook-stories/badge)](https://www.skillsdirectory.com/skills/compozy-storybook-stories)

More formats (shields.io, HTML) on the badges page. Keep it an A: scan every change in CI with Pro.

Download with Pro
SKILL.md
---
name: storybook-stories
description: "Create, update, refactor, or troubleshoot Storybook stories using project conventions. Excludes component implementation, token changes, E2E browser tests, and other documentation."
metadata:
  author: Pedro Nauck
  github: https://github.com/pedronauck
  repository: https://github.com/pedronauck/skills
---
# Storybook Stories

Extend the nearest existing story using the Storybook instance and naming conventions for its layer. Locate the owning Storybook configuration for primitives versus app/domain stories. Reuse global QueryClient/router/MSW decorators instead of duplicating providers.

- Inspect the shared primitive inventory before composing examples. Use its public exports; domain components remain local. Follow the repository's token source, design documentation, and surface instructions.
- Use typed CSF metadata and `StoryObj<typeof meta>`. Choose layout/decorators for the component's real surface; centered layout is useful for some controls, not full routes.
- Show the smallest set of supported states that explains meaningful behavior. No minimum or maximum story count, exhaustive prop matrix, or per-export JSDoc requirement.
- Use `args` for controlled props and `render` for compound composition. A render-only story does not need empty `args`. Add descriptions when they explain behavior, constraints, or usage that the canvas cannot show.
- Keep examples interactive, accessible, and realistic. Use the actual component API, not assumed variants copied from a template.
- Follow the project's existing autodocs policy. Enable or omit `tags: ["autodocs"]` consistently with that owner; avoid duplicate pages.
- Run the owning Storybook/build or visual check for the changed behavior. Reuse existing evidence; stories do not automatically require new unit or end-to-end suites.

Read `references/patterns.md` only for the story composition pattern being used. Examples are adaptable, not a required scaffold.

Files in this skill

  • SKILL.md13.6 KB
  • references/patterns.md1.4 KB

Attribution

Is this your skill, or is something wrong with this listing? Request removal or report an issue. Author removals are honored within 72 hours.

Comments

Loading comments…