Frontend 디자인 라우터

무엇을 해주나

이 스킬은 규칙집이 아니라 라우터입니다. 요청 성격을 판별해 references/ 아래 네 가지 룰셋 중 필요한 최소한만 불러오고, 그 지침대로 작업을 실행합니다.

• design: 12개 취향 스킬(Layer A: minimal / brutalist / soft / Awwwards급 등)과 70개 브랜드 디자인 시스템(Layer B: Linear, Stripe, Vercel, Notion, Apple 등)을 조합합니다. DESIGN.md가 없으면 UI 코드를 쓰지 못하게 하는 디자인 시스템 게이트와 React 개발 도구(react-grab / react-scan / react-doctor) 게이트를 강제합니다.
• perfection: Playwright Chromium 기반 실제 브라우저 측정으로 Lighthouse 전 항목 100점을 목표로 합니다. 애니메이션을 지우거나 콘텐츠를 숨겨서 점수를 따는 편법을 금지합니다.
• ui-ux-db: 팔레트·폰트 페어링·차트 유형·랜딩 구조를 CSV + CLI로 검색하고, 키워드에서 프로젝트 디자인 시스템을 생성합니다.
• designpowers: 페르소나, 접근성/인지 제약, 디자인 크리틱(Phase Final 평면성 리뷰), 디자인 부채, 핸드오프 등 운영 레이어를 담당합니다.

추가로 스크린샷/URL 레퍼런스가 있을 때의 클론 워크플로, beui.dev 인터랙션 카탈로그, lazyweb 실제 앱 화면 리서치(curl 전용) 경로까지 정의되어 있습니다.

이런 분께 추천

• Claude로 만든 UI가 항상 "어딘가 뻔하다"고 느끼는 개발자
• Linear/Stripe/Supabase 톤의 프리미엄 랜딩·SaaS 화면을 만들고 싶은 1인 개발자, 스타트업 팀
• 성능(Core Web Vitals)과 비주얼 완성도를 동시에 요구받는 프론트엔드 엔지니어
• 디자인 시스템 문서(DESIGN.md)를 코드보다 먼저 정착시키고 싶은 팀

활용 예시

1. "Linear 스타일 랜딩 페이지 만들어줘" → design/README.md + linear.app.md + taste-skill.md + perfection/README.md를 로드하고, DESIGN.md에 토큰·타이포·모션을 먼저 정의한 뒤 프리미티브부터 구현합니다.
2. "이 대시보드 좀 예쁘게 고쳐줘" → redesign-skill.md의 감사 우선 워크플로로 현재 UI의 문제를 진단하고, 375/768/1280px 실제 브라우저 QA 증거와 함께 개선안을 냅니다.
3. "사이트가 느려요, 감사해줘" → 프로덕션 빌드 후 lighthouse-audit.py로 모바일·데스크톱 프리셋을 3~5회 측정해 중간값을 취하고, React라면 불필요한 렌더까지 함께 잡습니다.
4. "이 스크린샷 그대로 구현해줘" → image-to-code-skill.md로 토큰·간격·상태를 추출해 DESIGN.md에 옮기고, /visual-qa 레퍼런스 정확도 모드로 픽셀 비교합니다.

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