CSF3 형식을 사용하여 Storybook 스토리와 상호 작용 테스트를 작성하고 유지 관리합니다. 구성 요소 스토리, 플레이 기능, Chromatic을 사용한 시각적 회귀 테스트 및 접근성 테스트를 다룹니다. 구성 요소 문서 작성, 상호 작용 테스트 작성, 테스트 실패 디버깅, 시각적 스냅샷 구성 또는 스토리 구조 업데이트 시 사용합니다. CSF3, 재생 기능, userEvent, 테스트 라이브러리 쿼리, 색채 구성, autodocs, MDX에 사용됩니다.
명령줄에서 storybook-stories AI 스킬을 개발 환경에 빠르게 설치
출처: oakoss/agent-skills.
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.
| 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 |
CSF3 형식을 사용하여 Storybook 스토리와 상호 작용 테스트를 작성하고 유지 관리합니다. 구성 요소 스토리, 플레이 기능, Chromatic을 사용한 시각적 회귀 테스트 및 접근성 테스트를 다룹니다. 구성 요소 문서 작성, 상호 작용 테스트 작성, 테스트 실패 디버깅, 시각적 스냅샷 구성 또는 스토리 구조 업데이트 시 사용합니다. CSF3, 재생 기능, userEvent, 테스트 라이브러리 쿼리, 색채 구성, autodocs, MDX에 사용됩니다. 출처: oakoss/agent-skills.
AI/검색 인용용 안정적인 필드와 명령어.
npx skills add https://github.com/oakoss/agent-skills --skill storybook-storiesCSF3 형식을 사용하여 Storybook 스토리와 상호 작용 테스트를 작성하고 유지 관리합니다. 구성 요소 스토리, 플레이 기능, Chromatic을 사용한 시각적 회귀 테스트 및 접근성 테스트를 다룹니다. 구성 요소 문서 작성, 상호 작용 테스트 작성, 테스트 실패 디버깅, 시각적 스냅샷 구성 또는 스토리 구조 업데이트 시 사용합니다. CSF3, 재생 기능, userEvent, 테스트 라이브러리 쿼리, 색채 구성, autodocs, MDX에 사용됩니다. 출처: oakoss/agent-skills.
터미널 또는 명령줄 도구(Terminal, iTerm, Windows Terminal 등)를 엽니다 이 명령어를 복사하여 실행합니다: npx skills add https://github.com/oakoss/agent-skills --skill storybook-stories 설치 후 스킬은 자동으로 AI 코딩 환경에 설정되어 Claude Code, Cursor, OpenClaw에서 사용할 수 있습니다
https://github.com/oakoss/agent-skills