ui-design-system

SKILL.md

Before generating any UI code, check the project for existing tokens:

If no design tokens exist, generate a starter set and ask the user to confirm before proceeding (see Edge Cases).

Define colors as CSS custom properties consumed by Tailwind. Never use hardcoded hex/rgb values in components.

디자인 시스템에 따라 일관된 UI 구성 요소, 레이아웃 및 디자인 토큰을 생성합니다. React/TypeScript 프로젝트 전반에 걸쳐 간격, 색상, 타이포그래피 및 접근성 표준을 적용합니다. 새로운 UI 구성요소 생성, 페이지 레이아웃 구축, 색상 또는 서체 선택, 디자인 토큰 설정 또는 디자인 일관성을 위한 UI 코드 검토 시 사용합니다. 8pt 간격 그리드, Tailwind CSS 토큰 사용, shadcn/ui 기본 요소, WCAG 2.1 AA 준수, 반응형 중단점, 의미 체계 HTML 구조 및 TypeScript 구성 요소 인터페이스를 다룹니다. 백엔드 구현(python-backend-expert 사용), 테스트(반응 테스트 패턴 사용) 또는 배포(배포 파이프라인 사용)는 다루지 않습니다. 출처: hieutrtr/ai1-skills.

원본 보기