프론트엔드 디자인 라우터

무엇을 해주나

이 스킬은 규칙집이 아니라 라우터입니다. 프론트엔드/UI/UX 요청이 들어오면 references/ 아래 네 가지 룰셋 중 필요한 최소 파일만 골라 읽고 그 지침대로 작업하게 만듭니다.

• design: 12개 '취향(taste) 스킬'(미니멀·브루탈리즘·soft/premium·리디자인 등) + 70개 브랜드 디자인 시스템(Stripe, Linear, Notion, Vercel, Apple…). 코드 작성 전에 DESIGN.md(토큰·타이포·간격·모션·접근성·수용된 부채)를 반드시 만들도록 게이트를 걸어 둡니다.
• perfection: 실제 Playwright Chromium 기반 Lighthouse 측정, 전 카테고리 100점 기준, React 렌더 예산 점검. 애니메이션을 빼거나 콘텐츠를 숨겨 점수를 버는 행위를 금지합니다.
• ui-ux-db: 팔레트·폰트 조합·차트 유형·랜딩 구조를 CSV+CLI로 검색.
• designpowers: 퍼소나, 접근성/인지 제약, 디자인 크리틱(평면성 리뷰), 디자인 부채, 핸드오프.

또한 스크린샷/URL 참조가 있으면 '레퍼런스=계약'으로 삼아 getComputedStyle로 런타임 스타일을 추출해 클론하고, 마지막에 /visual-qa(375/768/1280px 실브라우저)로 검증하도록 합니다.

이런 분께 추천

• Claude에게 UI를 맡기면 늘 '무난하지만 심심한' 결과가 나와 답답한 분
• 랜딩 페이지·SaaS 대시보드를 브랜드 톤에 맞춰 빠르게 만들어야 하는 1인 개발자/스타트업
• Lighthouse 100점과 디자인 품질을 동시에 요구받는 프론트엔드 엔지니어
• 디자인 시스템(DESIGN.md) 문서화·핸드오프 체계를 잡고 싶은 팀

활용 예시

1. "Stripe 느낌의 프리미엄 SaaS 히어로 만들어줘" → design/stripe.md + soft-skill.md + perfection/README.md를 로드해 토큰을 DESIGN.md로 정리하고, 프리미티브 쇼케이스 후 실제 페이지를 구현.
2. "이 대시보드 디자인 좀 살려줘" → redesign-skill.md의 감사 우선 워크플로로 현재 UI를 진단 → 토큰 재정의 → 마이크로 인터랙션 추가(장식용 애니메이션은 금지) → /visual-qa로 3개 뷰포트 검증.
3. "이 스크린샷 그대로 코드로" → image-to-code-skill.md로 색·간격·상태·반응형 의도를 추출해 재사용 가능한 컴포넌트로 구현하고, 픽셀 대조 모드로 QA.
4. "웰니스 브랜드에 맞는 팔레트와 폰트?" → ui-ux-db 검색 CLI로 즉시 후보 도출.

클로드스킬마트에서 찾은 스킬을 설치해줘.
GitHub 저장소 code-yeongyu/oh-my-openagent 의 packages/omo-opencode/src/features/builtin-skills/frontend 폴더를 내 ~/.claude/skills/frontend/ 에 그대로 복사해줘.
설치가 끝나면 이 스킬로 무엇을 할 수 있는지 한 줄로 알려줘.