القائمة
Story 파일에서 컴포넌트 스크린샷 캡처. "/screenshot", "스크린샷 캡처" 등의 요청 시 사용
استنادا إلى تصنيف SOC المهني
React 코드 품질 분석. git diff 기반으로 변경된 코드의 클린 코드 점수 평가. "코드 리뷰", "품질 검사" 등의 요청 시 사용
AI 코드 생성 후 불필요한 코드 정리 스킬. git diff로 변경된 TS/JS 파일을 분석하여 사용되지 않는 코드를 자동 제거한다. 트리거: unused 코드 정리, 불필요한 코드 삭제, dead code 제거, 코드 클린업, AI 작업 후 정리 요청 시
순환 복잡도(Cyclomatic Complexity)가 높은 함수를 인간의 논리적 사고 흐름에 맞게 재구성하는 스킬. "복잡한 함수 정리해줘", "이 함수 읽기 어려워", "순환 복잡도 낮춰줘", "리팩토링 해줘" 등의 요청에 사용. 단순 코드 추출이 아닌 논리적 재구성을 수행하며, 성능보다 가독성과 수정 용이성을 우선시함.
Deep reasoning skill using Claude Code's Agent Teams. Spawns multiple personas with enforced minimum depth, includes a challenge round where teammates critique each other, and iterates on low-confidence answers. Use when the user prefixes with "deep think", "딥씽크", "깊게 생각해", or requests thorough analysis. Best for complex architecture, debugging, algorithmic, or multi-domain problems. NOT for simple lookups. Requires: CLAUDE_CODE_EXPERIMENTAL_AGENT_TEAMS=1
디자인 검증 자동화. Figma vs 구현 비교 리포트 생성. "/design-check", "디자인 검증" 등의 요청 시 사용
Figma 디자인 구현 + 검증 파이프라인. figma-to-code 후 design-check 순차 실행. "/figma-pipeline", "피그마 파이프라인" 등의 요청 시 사용
argument: $1
이 커맨드는 Storybook Story 파일을 기반으로 컴포넌트 스크린샷을 캡처합니다.
사용자로부터 Story 파일 경로를 받아 파일을 읽고 다음을 추출합니다:
title 필드 (meta 객체에서)Default, WithIcon 등)Storybook 내부에서 사용하는 story ID를 생성합니다.
변환 규칙:
title 값을 소문자로 변환/를 -로 치환--로 구분하여 export 이름을 kebab-case로 추가변환 예시:
| title | export | Story ID |
|---|---|---|
Screenshots/Shared/Card | Default | screenshots-shared-card--default |
Screenshots/Features/FilterBar/FilterList | Default | screenshots-features-filterbar-filterlist--default |
Screenshots/Shared/Button | WithIcon | screenshots-shared-button--with-icon |
상세 변환 과정:
title: "Screenshots/Shared/Card" + export: "Default"
→ 소문자: "screenshots/shared/card"ㅁ
→ / → -: "screenshots-shared-card"
→ + "--" + kebab(export): "screenshots-shared-card--default"
PascalCase export를 kebab-case로 변환:
Default → defaultWithIcon → with-iconMSWExample → msw-example다음 우선순위로 뷰포트 크기를 결정합니다:
style={{ width: '...', height: '...' }} 값.claude/skills/component-screenshot/scripts/capture-screenshot.ts 스크립트를 실행하여 스크린샷을 캡처합니다.
스크립트는 정적 빌드된 Storybook(.dist/)을 Express로 서빙하여 캡처합니다. 정적 파일에는 HMR 웹소켓이 없으므로 networkidle이 정상 동작합니다.
pnpm exec tsx .claude/skills/component-screenshot/scripts/capture-screenshot.ts \
--story-id "{story-id}" \
--output "artifacts/screenshots/{ComponentName}.png" \
--width {width} --height {height}
스크립트 CLI 옵션:
| 옵션 | 필수 | 기본값 | 설명 |
|---|---|---|---|
--story-id | ✅ | - | Storybook story ID |
--output | ✅ | - | 출력 PNG 파일 경로 |
--width | ❌ | 1280 | 뷰포트 너비 |
--height | ❌ | 800 | 뷰포트 높이 |
--port | ❌ | 6008 | 정적 서버 포트 |
--timeout | ❌ | 30000 | 타임아웃 (ms) |
--rebuild | ❌ | false | 기존 빌드 무시하고 강제 리빌드 |
.dist/iframe.html이 없으면 자동으로 pnpm build-storybook을 실행합니다.--rebuild 플래그를 사용하면 기존 빌드를 무시하고 항상 새로 빌드합니다.#storybook-root > * 의 첫 번째 자식 요소를 스크린샷합니다.캡처 후 다음을 확인합니다:
| 상황 | 대응 |
|---|---|
| Story 파일 없음 | 실행 중단, 파일 경로 확인 안내 |
| title 파싱 실패 | Story 파일 형식 확인 안내 |
| Storybook 빌드 실패 | pnpm build-storybook 수동 실행으로 에러 확인 제안 |
| 빈 스크린샷 (0 bytes) | Story ID를 브라우저에서 직접 확인 제안: 정적 서버 실행 후 http://localhost:6006/iframe.html?id={story-id}&viewMode=story |
| 캡처 스크립트 에러 | 에러 메시지 전달 및 수동 실행 커맨드 안내 |
/screenshot __screenshots__/Card.stories.tsx
__screenshots__/Card.stories.tsx 파일 읽기Screenshots/Shared/Card, export: Default 추출screenshots-shared-card--default 생성pnpm exec tsx .claude/skills/component-screenshot/scripts/capture-screenshot.ts \
--story-id "screenshots-shared-card--default" \
--output "artifacts/screenshots/Card.png" \
--width 384 --height 800
artifacts/screenshots/Card.png 생성 확인Story 파일에 여러 export가 있으면 사용자에게 어떤 Story를 캡처할지 확인합니다.
/screenshot __screenshots__/Button.stories.tsx
→ Default, WithIcon, Disabled 세 가지 export 발견
→ 사용자에게 선택 요청 (또는 모두 캡처할지 확인)