# 프론트엔드 디자인 방향 (frontend-design-direction)

> 프로덕션 UI 를 만들기 전에 제품에 맞는 디자인 방향을 정하고, 렌더링 결과로 접근성, 반응형, 콘텐츠 상태를 검증합니다.

- 카테고리: [UI·인터랙션](https://www.myskills.tools/ko/categories/ui-interaction/)
- 출처: 커뮤니티 · Affaan Mustafa
- 저장소: https://github.com/affaan-m/ECC/tree/main/skills/frontend-design-direction (commit 1c05119)
- SKILL.md: https://github.com/affaan-m/ECC/blob/main/skills/frontend-design-direction/SKILL.md
- 설치 명령: `npx skills add affaan-m/ECC --skill frontend-design-direction`
- 라이선스: MIT
- 호환 도구: Claude Code, Codex, Cursor, Copilot, OpenCode
- 권한: read-repo ✓, write-files ✓, shell ✓, network ✓
- 상태: 스캔 통과
- 규칙 스캔으로 모든 위험을 찾을 수는 없습니다. 설치 전에 이 스킬의 SKILL.md를 읽고 권한을 확인하세요.
- ⚠ 선택 사항인 UIZZE 참고 검색은 계정이 필요한 외부 서비스로, 동의 시에만 쓰며 스크린샷, 코드, 사용자 데이터는 보내지 않습니다.

## 핵심 규칙

소스 확인만으로는 최종 렌더링 게이트를 통과할 수 없으며, 테스트하지 않은 부분은 그대로 보고하고 증거를 꾸며내지 않습니다.

## 실행 단계

1. **디자인 방향 결정** — 코딩 전에 목적, 사용자, 톤, 기억에 남을 한 가지 디테일, 그리고 프레임워크, 접근성, 기존 디자인 시스템 같은 제약을 정합니다.
2. **근거 계약 기록** — 주요 동작, 계층, 대상 뷰포트와 각 결정의 근거를 기록하고 로딩, 빈 상태, 오류, 부분, 성공, 권한 상태의 조건과 피드백을 정합니다.
3. **계약대로 구현** — 기존 컴포넌트, 토큰, 아이콘 라이브러리를 우선 사용하고 CSS 변수로 일관성을 유지하며, 보라색 그라데이션이나 카드 중첩 같은 흔한 패턴을 피합니다.
4. **렌더링 검사** — 대상 뷰포트에서 키보드 탐색, 포커스 표시, 레이블, 대비, 모션 감소, 터치 영역을 확인하고 각 상태를 실행해 보며 문제를 고칩니다.
5. **증거 검사기 실행** — 스크린샷과 관찰 내용을 로컬 JSON 증거 기록에 담고, 포함된 node scripts/check-evidence.js 로 누락이 없는지 검사합니다.

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

| 기능 | 필요 여부 | 설명 |
|---|---|---|
| 파일 쓰기 | 필요 | UI 코드를 작성하고 스크린샷과 로컬 JSON 증거 기록을 작업 공간에 저장합니다. |
| 명령 실행 | 일부 필요 | 포함된 check-evidence.js 와 렌더링 검사를 실행하며, 허가 없이 패키지를 설치하지 않습니다. |
| 네트워크 송신 | 일부 필요 | 사용자가 동의한 경우에만 선택 사항인 UIZZE MCP 를 쓰며, 익명화한 개략적 디자인 요구만 보냅니다. |

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

```yaml
---
name: frontend-design-direction
description: Set an ECC-specific frontend design direction for production UI work. Use when building or improving websites, dashboards, applications, components, landing pages, visual tools, or any web UI that needs stronger product-specific design judgment.
metadata:
  origin: community
---
```

홈: https://www.myskills.tools/ko/ · URL: https://www.myskills.tools/ko/skills/frontend-design-direction/