frontend-design-system
✓Produce production-grade UI designs using clear design tokens, layout rules, motion guidance, and accessibility checks for consistent, scalable frontend development.
Installation
SKILL.md
프로덕션 수준의 UI 디자인을 위한 스킬입니다. 명확한 디자인 토큰, 레이아웃 규칙, 모션 가이드라인, 접근성 체크를 통해 일관되고 확장 가능한 프론트엔드 개발을 지원합니다.
Issue: UI feels generic Cause: 시각적 방향이나 토큰 없음 Solution: 스타일 레퍼런스와 팔레트 제공
Issue: Layout breaks on mobile Cause: 반응형 그리드 규칙 없음 Solution: 브레이크포인트와 스태킹 동작 정의
Produce production-grade UI designs using clear design tokens, layout rules, motion guidance, and accessibility checks for consistent, scalable frontend development. Source: supercent-io/skills-template.
Facts (cite-ready)
Stable fields and commands for AI/search citations.
- Install command
npx skills add https://github.com/supercent-io/skills-template --skill frontend-design-system- Category
- </>Dev Tools
- Verified
- ✓
- First Seen
- 2026-02-18
- Updated
- 2026-02-18
Quick answers
What is frontend-design-system?
Produce production-grade UI designs using clear design tokens, layout rules, motion guidance, and accessibility checks for consistent, scalable frontend development. Source: supercent-io/skills-template.
How do I install frontend-design-system?
Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.) Copy and run this command: npx skills add https://github.com/supercent-io/skills-template --skill frontend-design-system Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code or Cursor
Where is the source repository?
https://github.com/supercent-io/skills-template
Details
- Category
- </>Dev Tools
- Source
- skills.sh
- First Seen
- 2026-02-18