design-system
Mechanical implementation invariants for frontend design: token architecture, typography hierarchy, loading order, FOUT prevention, chrome stability, motion timing, color semantics. Use with design when building components, pages, or design systems.
Design system
When to Use
Use this skill when you need mechanical implementation invariants for frontend design: token architecture, typography hierarchy, loading order, FOUT prevention, chrome stability, motion timing, color semantics. Use with design when building components, pages, or design systems. (Aesthetic direction lives in...
Apply with design when implementing UI: components, pages, or design systems. Every color, type, and motion choice should trace back to these rules.
Token architecture
All colors map to a small set of primitives. No random hex values.
- Foreground: Text hierarchy (primary, secondary, muted).
- Background: Surface elevation (base, raised, overlay).
- Border: Separation hierarchy (subtle, default, emphasis).
- Brand: Identity and primary accent.
- Semantic: Destructive, warning, success (and optional info).
Use tokens in code (CSS variables, theme objects); never hardcode hex for UI.
Typography
- Hierarchy: Headlines — heavier weight, tighter letter-spacing for presence. Body — comfortable weight for readability. Labels/UI — medium weight, works at smaller sizes. Data — monospace,
tabular-numsfor alignment. - Combine size, weight, and letter-spacing so hierarchy is clear at a glance. If you squint and can't tell headline from body, hierarchy is too weak.
- Fonts: pair a display font with a bod
Subscribers only
The full skill, its 2 bundled files and every download is included with every paid Complete AI plan.
Details
| Source | connerkward/ckw-design-skill |
|---|---|
| License | MIT |
| Risk label | critical ("critical" means the skill may run commands or touch files — read before use) |
| Files | SKILL.md, references/motion-choreography.md |
| Added | 2026-07-01 |
Related skills
accesslint-audit
Find and fix WCAG 2.2 accessibility issues. Two modes — report (sweep a codebase or page, produce a prioritized written report, no edits) and fix (audit→edit→verify loop on a target). Prefers direct-CDP live-DOM auditing; falls back to a browser-MCP composition or HTML-string audits.
angular
Modern Angular (v20+) expert with deep knowledge of Signals, Standalone Components, Zoneless applications, SSR/Hydration, and reactive patterns.
angular-best-practices
Angular performance optimization and best practices guide. Use when writing, reviewing, or refactoring Angular code for optimal performance, bundle size, and rendering efficiency.
angular-migration
Master AngularJS to Angular migration, including hybrid apps, component conversion, dependency injection changes, and routing migration.
angular-state-management
Master modern Angular state management with Signals, NgRx, and RxJS. Use when setting up global state, managing component stores, choosing between state solutions, or migrating from legacy patterns.
angular-ui-patterns
Modern Angular UI patterns for loading states, error handling, and data display. Use when building UI components, handling async data, or managing component states.