ui-design-system
Create and maintain scalable UI design systems with design tokens, responsive rules, accessibility standards, component libraries, and developer handoff documentation.
Best use case
ui-design-system is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Create and maintain scalable UI design systems with design tokens, responsive rules, accessibility standards, component libraries, and developer handoff documentation.
Teams using ui-design-system should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/ui-design-system/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How ui-design-system Compares
| Feature / Agent | ui-design-system | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Create and maintain scalable UI design systems with design tokens, responsive rules, accessibility standards, component libraries, and developer handoff documentation.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# UI Design System Skill
## When to use
- Building a new design system from scratch
- Standardizing an existing component library
- Creating design tokens for consistent theming
- Documenting components for developer handoff
## Design token structure
```json
{
"color": {
"primary": { "50": "#eff6ff", "500": "#3b82f6", "900": "#1e3a5f" },
"neutral": { "50": "#fafafa", "500": "#737373", "900": "#171717" },
"semantic": { "success": "#22c55e", "warning": "#f59e0b", "error": "#ef4444" }
},
"spacing": { "xs": "4px", "sm": "8px", "md": "16px", "lg": "24px", "xl": "32px" },
"typography": {
"fontFamily": { "sans": "Inter, system-ui", "mono": "JetBrains Mono, monospace" },
"fontSize": { "xs": "12px", "sm": "14px", "base": "16px", "lg": "18px", "xl": "20px" }
},
"borderRadius": { "sm": "4px", "md": "8px", "lg": "12px", "full": "9999px" },
"shadow": {
"sm": "0 1px 2px rgba(0,0,0,0.05)",
"md": "0 4px 6px rgba(0,0,0,0.1)",
"lg": "0 10px 15px rgba(0,0,0,0.1)"
}
}
```
## Component hierarchy
1. **Primitives**: Button, Input, Badge, Avatar, Icon
2. **Composites**: Card, Modal, Dropdown, Toast, Tabs
3. **Patterns**: Form, Navigation, Data Table, Search
4. **Layouts**: Page Shell, Sidebar, Grid System
## Accessibility checklist
- Color contrast ratio ≥ 4.5:1 for text, ≥ 3:1 for large text
- Focus indicators on all interactive elements
- ARIA labels on icon-only buttons
- Keyboard navigation for all components
- Reduced motion support via `prefers-reduced-motion`
## Responsive rules
- Mobile-first breakpoints: 640px, 768px, 1024px, 1280px
- Fluid typography with `clamp()`
- Touch targets ≥ 44×44px on mobile
- Stack layouts on mobile, side-by-side on desktop
## Tips for AI Agents
- Start with tokens before building components.
- Ask about existing brand guidelines and tech stack.
- Default to accessible, mobile-first patterns.Related Skills
web-design-reviewer
Inspect web interfaces for layout, responsive, accessibility, and visual issues, then apply targeted source code fixes and re-verify results.
tailwind-design-system-v4
Build scalable, responsive, and accessible design systems with Tailwind CSS v4 — design tokens, theme configuration, reusable React UI components, and migration from v3.
system-info
Monitor system resources including CPU, memory, disk, and network usage.
responsive-design
Master modern responsive design techniques — container queries, fluid typography with clamp(), CSS Grid, Flexbox patterns, and mobile-first strategies for adaptive interfaces.
pricing-page-design
Design high-conversion SaaS pricing pages with plan structures, comparison patterns, conversion strategies, copy templates, SEO/AEO checklists, and layout types (3-card, slider, persona split, enterprise).
landing-page-design
Design high-conversion landing pages with structure, section order, layout types (classic hero, long-form, minimal, comparison), conversion strategies, SEO/AEO guidance, and copywriting templates.
interaction-design
Design and implement purposeful UI motion, microinteractions, and feedback patterns to enhance usability and user delight — hover effects, transitions, loading states, and gesture responses.
frontend-distinctive-design
Create distinctive, production-grade frontend interfaces with bold, cohesive aesthetics and refined implementation — visual identity, typography systems, color palettes, and layout composition.
canvas-design
Create original visual design philosophies and express them as meticulously crafted, museum-quality PNG or PDF art with minimal text — generative art, data visualization, and abstract compositions.
web-design-guidelines
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
youtube-growth
Act as an expert YouTube Strategy Consultant. Apply the Creator Unlock N.I.C.E.R. Framework for conducting channel audits, niche validation, and data-backed video ideation/thumbnail generation.
xyops-automate
Build and manage automation pipelines using xyOps at {{XYOPS_HOST}}:{{XYOPS_PORT}}.