frontend
UI, UX, 디자인, 성능, 접근성, 시각 QA를 함께 다루는 LazyCodex Skill입니다.
frontend는 LazyCodex가 웹 UI, UX, 스타일링, 성능, 접근성, 시각 QA를 다룰 때 쓰는 Skill입니다. 단순히 화면을 채우는 것이 아니라, 기존 디자인 시스템과 실제 브라우저 검증을 기준으로 UI를 만듭니다.
이 Skill은 하나의 규칙 파일이 아니라 라우터에 가깝습니다. 작업 성격에 따라 design, perfection, ui-ux-db 레퍼런스를 최소한으로 골라 읽고, 그 기준으로 구현과 검증을 진행합니다.
언제 쓰이나
- 프런트엔드 구현, 스타일링, 레이아웃, 애니메이션 작업.
- 기존 UI가 어색해서 다시 다듬어야 할 때.
- Lighthouse, Core Web Vitals, 접근성, SEO를 실제 브라우저에서 확인해야 할 때.
- React 프로젝트에
react-grab,react-scan,react-doctor같은 개발 도구를 붙여야 할 때. - 색, 폰트, 차트, 랜딩 구조, UX 패턴을 찾아야 할 때.
세 가지 축
| 축 | 역할 |
|---|---|
design | 디자인 시스템, 브랜드 톤, 레이아웃 감각, 브라우저 기반 Design QA |
perfection | Lighthouse 100, 성능, 접근성, SEO, Core Web Vitals |
ui-ux-db | 스타일, 팔레트, 폰트 조합, UX 가이드라인 검색 |
실행 원칙
- 디자인 시스템 없이 새 컴포넌트를 만들지 않습니다.
- Lighthouse 점수를 위해 UX를 약화하지 않습니다.
- 아이콘은 이모지가 아니라 SVG 아이콘 세트를 씁니다.
- 애니메이션은 GPU-friendly 속성(
transform,opacity,filter)을 우선합니다. - 끝났다고 말하기 전에 실제 브라우저에서 확인합니다.