Frontend 디자인 라우터

무엇을 해주나

이 스킬은 규칙집이 아니라 라우터입니다. 프론트엔드/UI/UX 요청이 들어오면 필요한 최소한의 참조 파일만 골라 읽고, 그 지침 아래에서 작업을 수행합니다.

• design 룰셋: DESIGN.md(디자인 시스템 문서)를 먼저 만들도록 강제하는 게이트, 12종 스타일(미니멀·브루탈리스트·프리미엄·Awwwards급 등)과 70개 브랜드 디자인 시스템(Stripe, Linear, Notion, Vercel 등) 참조.
• perfection 룰셋: 실제 Playwright Chromium 기반 Lighthouse 측정으로 전 카테고리 100점을 목표. 애니메이션을 빼거나 콘텐츠를 숨겨서 점수를 올리는 편법 금지.
• ui-ux-db 룰셋: 팔레트·폰트 조합·차트 유형·랜딩 구조를 CSV + CLI로 검색.
• designpowers 룰셋: 페르소나, 접근성 제약, 디자인 비평, 기술부채, 핸드오프 문서화.

공통 원칙도 강합니다 — 이모지를 아이콘으로 쓰지 않기, GPU 합성 속성(transform/opacity/filter)만 애니메이션하기, 의미 없는 '슬롭 애니메이션' 금지, 375/768/1280px 실제 브라우저 QA 통과 전까지는 완료가 아님.

이런 분께 추천

• Claude에게 UI를 맡겼을 때 결과가 늘 밋밋하고 비슷해서 고민인 분
• 랜딩 페이지·SaaS 대시보드를 브랜드 톤에 맞춰 만들고 싶은 개발자
• Lighthouse 성능·접근성(WCAG)까지 함께 챙겨야 하는 프론트엔드 담당자
• 디자인 시스템 문서(DESIGN.md)를 팀 표준으로 정착시키고 싶은 리드

활용 예시

1. "Stripe 느낌의 프리미엄 SaaS 히어로 섹션 만들어줘" → design/stripe.md + soft-skill.md + perfection/README.md를 로드하고, 토큰을 DESIGN.md에 정리한 뒤 재사용 가능한 컴포넌트로 구현.
2. "이 스크린샷 그대로 코드로 옮겨줘" → image-to-code-skill.md로 색·간격·상태·반응형 의도를 추출해 계약처럼 지키고, /visual-qa 레퍼런스 정합 모드로 픽셀 대조.
3. "우리 대시보드 느려요, 감사해줘" → 프로덕션 빌드 후 Playwright Lighthouse로 모바일/데스크톱 3~5회 측정, 중앙값으로 병목을 아키텍처 수준에서 진단.

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