#601

Globales Ranking · von 601 Skills

storybook-stories AI Agent Skill

Quellcode ansehen: oakoss/agent-skills

Safe

Installation

npx skills add oakoss/agent-skills --skill storybook-stories

39

Installationen

Storybook Stories

Overview

Storybook is a frontend workshop for building UI components in isolation. Stories are written in Component Story Format 3 (CSF3), which uses object syntax with args for type-safe component documentation and testing.

When to use: Component documentation with live examples, interaction testing with play functions, visual regression testing, accessibility validation, design system maintenance, isolated component development.

When NOT to use: End-to-end testing (use Playwright/Cypress), API integration testing (use Vitest/Jest), full application testing (use browser automation), performance testing (use Lighthouse/WebPageTest).

Quick Reference

Pattern API Key Points
Basic story export const Default: Story = { args } Use args for simple single components
Complex story export const Example: Story = { render } Use render for multi-component layouts
Meta configuration const meta = { component, args } satisfies Meta Define defaults and argTypes
Interaction test play: async ({ canvas, userEvent, args }) canvas and userEvent provided directly
User interaction await userEvent.click(element) Always await userEvent methods
Query elements canvas.getByRole('button') Prefer getByRole over other queries
Assertions await expect(args.onPress).toHaveBeenCalled() Use storybook/test assertions
beforeEach hook beforeEach: async ({ args }) => {} Setup mocks before story renders
Play composition await OtherStory.play?.(context) Reuse setup across stories
Autodocs tags: ['autodocs'] Enable automatic documentation
Controls customization argTypes: { variant: { control: 'select' } } Configure control panel
Decorators decorators: [withTheme] Add wrappers or context providers
Parameters parameters: { layout: 'centered' } Configure addon behavior per story
Chromatic snapshot parameters: { chromatic: { delay: 300 } } Control visual regression captures
Disable snapshot parameters: { chromatic: { disableSnapshot: true } } Skip story in visual tests
A11y testing await expect(button).toHaveAccessibleName() Validate accessible labels

Common Mistakes

Mistake Correct Pattern
Using args with multi-component layouts Use render for complex compositions
Not awaiting userEvent methods Always await: await userEvent.click(button)
Using within(canvasElement) manually Destructure canvas from play context directly
Using getByTestId first Prefer getByRole, getByLabelText, getByText
Missing default args at meta level Add args to meta to prevent placeholder controls
Exposing non-serializable props Disable className, ref, style in argTypes
Not composing play functions Reuse setup with await BaseStory.play?.(context)
Forgetting to mock callbacks Use fn() for event handlers: args: { onPress: fn() }
Missing accessible names for icon buttons Add aria-label or use aria-labelledby
Not scoping queries for portal content Use within(canvasElement.ownerDocument.body)
Using boolean && for conditional rendering Use ternary in stories for consistent snapshots
Not waiting for animations Wrap assertions in waitFor for async state

Common Fixes

Problem Solution
Controls show placeholders Add args at meta level with default values
Serialization error Disable className, ref, style in argTypes
Portal element not found Search body instead of canvas
Animation timing issues Wrap assertions in waitFor
Multiple buttons found Add { name: '...' } to getByRole
A11y test failing Add label prop or aria-label

Delegation

  • Story structure review: Use code-reviewer skill for CSF3 pattern validation
  • Accessibility audit: Use Explore agent to discover ARIA patterns across stories
  • Visual regression analysis: Use Task agent to investigate Chromatic failures

References

Installationen

Installationen 39
Globales Ranking #601 von 601

Sicherheitsprüfung

ath Safe
socket Safe
Warnungen: 0 Bewertung: 90
snyk Low
EU EU-Hosted Inference API

Power your AI Agents with the best open-source models.

Drop-in OpenAI-compatible API. No data leaves Europe.

Explore Inference API

GLM

GLM 5

$1.00 / $3.20

per M tokens

Kimi

Kimi K2.5

$0.60 / $2.80

per M tokens

MiniMax

MiniMax M2.5

$0.30 / $1.20

per M tokens

Qwen

Qwen3.5 122B

$0.40 / $3.00

per M tokens

So verwenden Sie diesen Skill

1

Install storybook-stories by running npx skills add oakoss/agent-skills --skill storybook-stories in your project directory. Führen Sie den obigen Installationsbefehl in Ihrem Projektverzeichnis aus. Die Skill-Datei wird von GitHub heruntergeladen und in Ihrem Projekt platziert.

2

Keine Konfiguration erforderlich. Ihr KI-Agent (Claude Code, Cursor, Windsurf usw.) erkennt installierte Skills automatisch und nutzt sie als Kontext bei der Code-Generierung.

3

Der Skill verbessert das Verständnis Ihres Agenten für storybook-stories, und hilft ihm, etablierte Muster zu befolgen, häufige Fehler zu vermeiden und produktionsreifen Code zu erzeugen.

Was Sie erhalten

Skills sind Klartext-Anweisungsdateien — kein ausführbarer Code. Sie kodieren Expertenwissen über Frameworks, Sprachen oder Tools, das Ihr KI-Agent liest, um seine Ausgabe zu verbessern. Das bedeutet null Laufzeit-Overhead, keine Abhängigkeitskonflikte und volle Transparenz: Sie können jede Anweisung vor der Installation lesen und prüfen.

Kompatibilität

Dieser Skill funktioniert mit jedem KI-Coding-Agenten, der das skills.sh-Format unterstützt, einschließlich Claude Code (Anthropic), Cursor, Windsurf, Cline, Aider und anderen Tools, die projektbezogene Kontextdateien lesen. Skills sind auf Transportebene framework-agnostisch — der Inhalt bestimmt, für welche Sprache oder welches Framework er gilt.

Data sourced from the skills.sh registry and GitHub. Install counts and security audits are updated regularly.

EU Made in Europe

Chat with 100+ AI Models in one App.

Use Claude, ChatGPT, Gemini alongside with EU-Hosted Models like Deepseek, GLM-5, Kimi K2.5 and many more.

Start for free View pricing
Kundensupport