# 프론트엔드 UI 구현 (frontend-ui-engineering)

> 접근성과 반응형을 갖추고 프로젝트 디자인 시스템을 따르는 프로덕션 수준 UI 를 만들며, 흔한 AI 스타일을 피합니다.

- 카테고리: [UI·인터랙션](https://www.myskills.tools/ko/categories/ui-interaction/)
- 출처: 커뮤니티 · Addy Osmani
- 저장소: https://github.com/addyosmani/agent-skills/tree/main/skills/frontend-ui-engineering (commit f97d842)
- SKILL.md: https://github.com/addyosmani/agent-skills/blob/main/skills/frontend-ui-engineering/SKILL.md
- 설치 명령: `npx skills add addyosmani/agent-skills --skill frontend-ui-engineering`
- 라이선스: MIT
- 호환 도구: Claude Code, Codex, Cursor, Copilot, Gemini CLI
- 권한: read-repo ✓, write-files ✓, shell ✗, network ✗
- 상태: 스캔 통과
- 규칙 스캔으로 모든 위험을 찾을 수는 없습니다. 설치 전에 이 스킬의 SKILL.md를 읽고 권한을 확인하세요.

## 핵심 규칙

모든 컴포넌트는 WCAG 2.1 AA 를 충족해 키보드로 조작할 수 있고, 레이블과 충분한 대비를 갖춰야 합니다.

## 실행 단계

1. **컴포넌트 구성** — 관련 파일을 한곳에 두고 설정보다 조합을 우선하며, 데이터 가져오기와 표시를 분리합니다.
2. **상태 관리 선택** — 로컬 상태부터 전역 스토어까지 충분한 가장 단순한 방식을 고르고, prop 전달은 3단계를 넘기지 않습니다.
3. **디자인 시스템 준수** — 의미 기반 색상 토큰, 일관된 간격 체계, 제목 계층을 쓰고, 참고 사례는 근거로만 삼아 다른 제품의 브랜드나 레이아웃을 베끼지 않습니다.
4. **접근성과 반응형** — 키보드 탐색, ARIA 레이블, 포커스 관리를 구현하고 모바일 우선으로 배치하며 스켈레톤, 빈 상태, 오류 상태를 제공합니다.
5. **검증** — 콘솔 오류가 없고, Tab 으로 이동할 수 있으며, 스크린 리더로 전달되고, 320/768/1024/1440px 에서 정상이며 axe-core 경고가 없는지 확인합니다.

## 권한 설명 (SKILL.md 기준)

| 기능 | 필요 여부 | 설명 |
|---|---|---|
| 파일 쓰기 | 필요 | 컴포넌트, 스타일, 훅, 테스트 파일을 만들고 수정합니다. |
| 명령 실행 | 필요 없음 | 특정 명령 실행을 요구하지 않으며, 검증은 브라우저 개발자 도구와 axe-core 로 합니다. |
| 네트워크 송신 | 필요 없음 | 네트워크가 필요 없으며 팀이 제공한 참고 자료를 쓸 수 있습니다. |

## SKILL.md 프런트매터(YAML)

```yaml
---
name: frontend-ui-engineering
description: Builds production-quality, accessible, responsive user-facing UIs. Use when building or modifying interfaces and pages, creating components, implementing layouts, meeting WCAG accessibility requirements, managing state, or when the output needs to look and feel production-quality rather than AI-generated.
---
```

홈: https://www.myskills.tools/ko/ · URL: https://www.myskills.tools/ko/skills/frontend-ui-engineering/