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…

Newsletter

Get the weekly list of safe new skills, and the ones we pulled.