ui-design-system
UI Design System
Overview
Build and maintain scalable design systems with a token-first architecture. This skill covers the full pipeline from primitive design tokens through semantic mapping to themed component libraries, with deep expertise in Tailwind CSS v4, CSS custom properties, and responsive design patterns.
Phase 1: Token Foundation
- Audit existing design assets (colors, fonts, spacing, shadows)
- Define primitive tokens (raw values with no semantic meaning)
- Create semantic token layer (map primitives to intentions)
- Build component token layer (map semantics to component parts)
STOP — Present the token hierarchy to user for review before building components.
Token Layer Decision Table
More from pixel-process-ug/superkit-agents
ui-ux-pro-max
>
787frontend-ui-design
Use when designing UI components, creating component architectures, implementing responsive layouts, setting up design systems, or selecting state management solutions for frontend applications
45reverse-engineering-specs
Use when onboarding to an existing codebase that lacks specifications — exhaustively traces code paths and produces implementation-free behavioral specifications for safe refactoring, feature addition, or legacy modernization
41senior-fullstack
Use when the user needs end-to-end TypeScript development — from database schema through API layer to UI — with tRPC, Prisma, Next.js, authentication, and deployment. Triggers: full-stack feature implementation, database-to-UI pipeline, tRPC router creation, Prisma schema design, auth setup, deployment configuration.
36ux-researcher-designer
>
36clean-code
Use when the user needs code quality review, refactoring guidance, SOLID principles application, or help identifying and fixing code smells. Triggers: code smell detection, refactoring planning, naming convention review, complexity reduction, DRY analysis, error handling improvement.
36