ui-design
✓UI/UX 및 프런트엔드 디자인 모범 사례 지침(이전 프런트엔드 디자인) 이 기술은 접근성, 성능 및 유용성을 보장하기 위해 프런트엔드 코드를 작성, 검토 또는 디자인할 때 사용해야 합니다. HTML 구조, CSS 스타일, 반응형 레이아웃, 양식 디자인, 애니메이션 또는 접근성 개선과 관련된 작업을 트리거합니다.
SKILL.md
Comprehensive UI/UX and frontend design best practices guide. Contains 42 rules across 8 categories, prioritized by impact to guide accessible, performant, and user-friendly interface development.
| 1 | Accessibility & WCAG Compliance | CRITICAL | access- | | 2 | Core Web Vitals Optimization | CRITICAL | cwv- | | 3 | Visual Hierarchy & Layout | HIGH | layout- | | 4 | Responsive & Mobile-First Design | HIGH | resp- | | 5 | Typography & Font Loading | MEDIUM-HIGH | typo- | | 6 | Color & Contrast | MEDIUM | color- |
| 7 | Forms & Validation UX | MEDIUM | form- | | 8 | Animation & Performance | LOW-MEDIUM | anim- |
UI/UX 및 프런트엔드 디자인 모범 사례 지침(이전 프런트엔드 디자인) 이 기술은 접근성, 성능 및 유용성을 보장하기 위해 프런트엔드 코드를 작성, 검토 또는 디자인할 때 사용해야 합니다. HTML 구조, CSS 스타일, 반응형 레이아웃, 양식 디자인, 애니메이션 또는 접근성 개선과 관련된 작업을 트리거합니다. 출처: thongdn-it/react-agent-skills.
인용 가능한 정보
AI/검색 인용용 안정적인 필드와 명령어.
- 설치 명령어
npx skills add https://github.com/thongdn-it/react-agent-skills --skill ui-design- 카테고리
- *크리에이티브
- 인증됨
- ✓
- 최초 등록
- 2026-02-01
- 업데이트
- 2026-02-18
빠른 답변
ui-design이란?
UI/UX 및 프런트엔드 디자인 모범 사례 지침(이전 프런트엔드 디자인) 이 기술은 접근성, 성능 및 유용성을 보장하기 위해 프런트엔드 코드를 작성, 검토 또는 디자인할 때 사용해야 합니다. HTML 구조, CSS 스타일, 반응형 레이아웃, 양식 디자인, 애니메이션 또는 접근성 개선과 관련된 작업을 트리거합니다. 출처: thongdn-it/react-agent-skills.
ui-design 설치 방법은?
터미널 또는 명령줄 도구(Terminal, iTerm, Windows Terminal 등)를 엽니다 이 명령어를 복사하여 실행합니다: npx skills add https://github.com/thongdn-it/react-agent-skills --skill ui-design 설치 후 스킬은 자동으로 AI 코딩 환경에 설정되어 Claude Code나 Cursor에서 사용할 수 있습니다
소스 저장소는 어디인가요?
https://github.com/thongdn-it/react-agent-skills
상세
- 카테고리
- *크리에이티브
- 출처
- skills.sh
- 최초 등록
- 2026-02-01