frontend-design-directioncommit 1c05119SKILL.md · UI·인터랙션

프론트엔드 디자인 방향

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

선택 사항인 UIZZE 참고 검색은 계정이 필요한 외부 서비스로, 동의 시에만 쓰며 스크린샷, 코드, 사용자 데이터는 보내지 않습니다.

npx skills add affaan-m/ECC --skill frontend-design-direction

권한: read-repo
write-files
shell
network
호환 도구: Claude Code, Codex, Cursor, Copilot, OpenCode
GitHub: 294.3k
출처: 커뮤니티 · Affaan Mustafa
상태: 스캔 통과
라이선스: MIT
카테고리: UI·인터랙션
저장소: github.com/affaan-m/ECC/skills/frontend-design-direction

핵심 규칙

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

실행 단계

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

권한 설명 (SKILL.md 기준)

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

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

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

핵심 규칙

실행 단계

01단계디자인 방향 결정

02단계근거 계약 기록

03단계계약대로 구현

04단계렌더링 검사

05단계증거 검사기 실행

권한 설명 (SKILL.md 기준)

SKILL.md 프런트매터(YAML)

관련 스킬