frontend-ui-engineeringcommit f97d842SKILL.md · UI·인터랙션

프론트엔드 UI 구현

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

npx skills add addyosmani/agent-skills --skill frontend-ui-engineering

권한: read-repo
write-files
shell
network
호환 도구: Claude Code, Codex, Cursor, Copilot, Gemini CLI
GitHub: 112.3k
출처: 커뮤니티 · Addy Osmani
상태: 스캔 통과
라이선스: MIT
카테고리: UI·인터랙션
저장소: github.com/addyosmani/agent-skills/skills/frontend-ui-engineering

핵심 규칙

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

실행 단계

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

권한 설명 (SKILL.md 기준)

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

SKILL.md 프런트매터(YAML)commit f97d842

---
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.
---

핵심 규칙

실행 단계

01단계컴포넌트 구성

02단계상태 관리 선택

03단계디자인 시스템 준수

04단계접근성과 반응형

05단계검증

권한 설명 (SKILL.md 기준)

SKILL.md 프런트매터(YAML)

관련 스킬