Global Rank · of 601 Skills
storybook-stories AI Agent Skill
View Source: oakoss/agent-skills
SafeInstallation
npx skills add oakoss/agent-skills --skill storybook-stories 39
Installs
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-reviewerskill for CSF3 pattern validation - Accessibility audit: Use
Exploreagent to discover ARIA patterns across stories - Visual regression analysis: Use
Taskagent to investigate Chromatic failures
References
Installs
Security Audit
View Source
oakoss/agent-skills
More from this source
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 APIGLM
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
How to use this skill
Install storybook-stories by running npx skills add oakoss/agent-skills --skill storybook-stories in your project directory. Run the install command above in your project directory. The skill file will be downloaded from GitHub and placed in your project.
No configuration needed. Your AI agent (Claude Code, Cursor, Windsurf, etc.) automatically detects installed skills and uses them as context when generating code.
The skill enhances your agent's understanding of storybook-stories, helping it follow established patterns, avoid common mistakes, and produce production-ready output.
What you get
Skills are plain-text instruction files — not executable code. They encode expert knowledge about frameworks, languages, or tools that your AI agent reads to improve its output. This means zero runtime overhead, no dependency conflicts, and full transparency: you can read and review every instruction before installing.
Compatibility
This skill works with any AI coding agent that supports the skills.sh format, including Claude Code (Anthropic), Cursor, Windsurf, Cline, Aider, and other tools that read project-level context files. Skills are framework-agnostic at the transport level — the content inside determines which language or framework it applies to.
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.
