ss-component (StyleSeed 컴포넌트 생성기)

무엇을 해주나

• .styleseed 레지스트리(project.json, artifacts/index.json, 번들/매니페스트)를 먼저 읽어 프로젝트의 컴파일된 디자인 방법론을 파악합니다.
• css/theme.css, css/recipes.css의 디자인 토큰과 components/ui/button.tsx 참조 패턴을 기준으로 새 컴포넌트를 작성합니다.
• 코드 규약을 강제합니다: function 선언, data-slot 속성, cn() 병합, React.ComponentProps<> 타이핑, 변형이 있으면 CVA 사용, 시맨틱 컬러 토큰만 사용(하드코딩 hex 금지).
• 타이포그래피 스케일(디스플레이/헤딩/본문/캡션별 leading·tracking), 논리 속성(ms-*/me-*), size-* 단축 표기를 적용합니다.
• 접근성 체크: 최소 44x44 터치 영역, aria-* 패스스루, focus-visible:ring-2, prefers-reduced-motion 대응.
• 프리미티브는 src/components/ui/, 조합 패턴은 src/components/patterns/로 파일 위치를 구분합니다.

이런 분께 추천

• StyleSeed 기반(또는 shadcn/ui 스타일 Tailwind v4) 코드베이스를 운영하는 프론트엔드 개발자
• 여러 사람이 컴포넌트를 추가할 때 스타일·접근성 편차를 없애고 싶은 디자인 시스템 담당자
• 토큰 기반 UI 규칙을 코드 리뷰가 아니라 생성 단계에서 지키게 하고 싶은 팀

활용 예시

1. /ss-component alert-banner "닫기 버튼이 있는 인라인 공지 배너" → 토큰 컬러와 포커스 링, 44px 터치 영역이 반영된 src/components/ui/alert-banner.tsx 생성.
2. /ss-component stat-card "지표 값과 증감률을 보여주는 카드" → ss-pattern-surface와 타이포 스케일을 적용한 카드 컴포넌트 생성.
3. 변형이 필요한 badge 요청 시 CVA 기반 variant 구조로 작성하고 className 오버라이드를 지원.

참고: components/ui/ 디렉터리나 Tailwind v4가 없는 프로젝트, 기존 컴포넌트 수정, 전체 페이지 스캐폴딩에는 사용하지 않도록 스킬 내부에 명시되어 있습니다.

이 파일의 지시를 읽고 그대로 따라서 나를 도와줘:
https://raw.githubusercontent.com/bitjaru/styleseed/HEAD/engine/.claude/skills/ss-component/SKILL.md

내가 원하는 것: (여기에 하고 싶은 일을 쓰세요)

클로드스킬마트에서 찾은 스킬을 설치해줘.
GitHub 저장소 bitjaru/styleseed 의 engine/.claude/skills/ss-component 폴더를 내 ~/.claude/skills/ss-component/ 에 그대로 복사해줘.
설치가 끝나면 이 스킬로 무엇을 할 수 있는지 한 줄로 알려줘.