storybook
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; omittitleto let Storybook infer it from file paths - Define shared
argsat the Meta level and override only differences in individual stories; avoid hardcoding props or repeating args across variants - Leverage automatic
argTypesinference from TypeScript component types; manually specifyargTypesonly forReactNodefields needing text controls, fixed props, or action loggers - Apply
Decoratorsfor providers (Theme, Router, i18n) andParametersfor layout, backgrounds, and documentation; usetags: ['autodocs']to auto-generate component docs
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>;
More from dalestudy/skills
github-actions
GitHub Actions 워크플로우 생성, 보안 및 버전 관리 스킬. 다음 상황에서 사용: (1) 새 워크플로우 파일(.yml) 작성 시, (2) 기존 워크플로우 수정 시, (3) 액션 버전 검토 또는 업데이트 시, (4) CI/CD 보안 감사 시, (5) 'actions/', 'uses:', 'workflow', '.github/workflows' 키워드가 포함된 작업 시
477bun
Node.js 대신 Bun 런타임 사용을 위한 스킬. 다음 상황에서 사용: (1) 새 JavaScript/TypeScript 프로젝트 생성 시, (2) package.json 또는 의존성 관련 작업 시, (3) 스크립트 실행 또는 개발 서버 시작 시, (4) Node.js 프로젝트를 Bun으로 전환 시, (5) 'bun', 'bunx', 'bun.lockb' 키워드가 포함된 작업 시
370skill-creator
DaleStudy/skills 저장소의 스킬 생성, 수정, 검증 시 사용. 다음 상황에서 활성화: (1) 새 스킬 생성 요청 시, (2) skills/ 디렉토리 내 SKILL.md 파일 수정 시, (3) SKILL.md 변경 검토 또는 리뷰 시, (4) 스킬 frontmatter 또는 메타데이터 작업 시, (5) 'skill', 'SKILL.md', 'frontmatter', 'version', 'metadata', 'review', 'skills/' 키워드가 포함된 작업 시
349testing
React Testing Library 및 Vitest 기반 테스팅 모범 관례. 다음 상황에서 사용: (1) .test.tsx, .test.ts, .spec.tsx, .spec.ts 파일 작업 시, (2) 컴포넌트 테스트 작성 또는 리팩토링 시, (3) 'test', 'testing', 'vitest', 'RTL', 'getByRole', 'userEvent', 'waitFor', 'expect' 키워드 포함 작업 시, (4) 비동기 로직 또는 사용자 상호작용 테스트 작성 시
275typescript
TypeScript 타입 정의 및 베스트 프랙티스 스킬. 다음 상황에서 사용: (1) TypeScript 파일(.ts, .tsx) 작성 또는 수정 시, (2) 타입 정의(interface, type) 작업 시, (3) tsconfig.json 설정 또는 컴파일러 옵션 조정 시, (4) 타입 에러 해결 또는 타입 안전성 개선 시, (5) 제네릭, 유틸리티 타입, 타입 조작 작업 시, (6) 'typescript', 'ts', 'type', 'interface', 'generic' 키워드가 포함된 작업 시
256git
Git 버전 관리 모범 관례 및 워크플로우 가이드. 다음 상황에서 사용: (1) Git 커밋 메시지 작성 시 (Conventional Commits 규칙 적용), (2) 브랜치 생성 및 관리 시 (GitHub Flow 기반), (3) PR 생성 및 병합 전략 선택 시, (4) Git 히스토리 정리 작업 시 (rebase, squash, cherry-pick), (5) Merge conflict 해결 시, (6) 'git', '.git', 'commit', 'branch', 'merge', 'rebase' 키워드가 포함된 작업 시
239