storybook

Installation
Summary

Write and maintain Storybook stories using CSF 3.0 best practices with type safety.

  • Use CSF 3.0 format with satisfies Meta<typeof Component> for type-safe story definitions; omit title to let Storybook infer it from file paths
  • Define shared args at the Meta level and override only differences in individual stories; avoid hardcoding props or repeating args across variants
  • Leverage automatic argTypes inference from TypeScript component types; manually specify argTypes only for ReactNode fields needing text controls, fixed props, or action loggers
  • Apply Decorators for providers (Theme, Router, i18n) and Parameters for layout, backgrounds, and documentation; use tags: ['autodocs'] to auto-generate component docs
SKILL.md

Storybook

모범 관례

1. CSF 3.0 형식 사용

최신 Component Story Format 3.0 사용. 더 간결하고 타입 안전.

// ❌ CSF 2.0 (구형)
export default {
  title: 'Components/Button',
  component: Button,
};

export const Primary = () => <Button variant="primary">Click me</Button>;
Related skills

More from dalestudy/skills

Installs
610
GitHub Stars
4
First Seen
Jan 27, 2026