skills.rest
sreejithraman
sreejithramanCOMMUNITY
Explore all skills by this author →
GitHub

design-system

Guide design token architecture and CSS import order for cohesive UI.

Updated Aug 23, 2026
Search Tags:#architecture#tokens#design-system#design-tokens#component-library#UI-patterns
One-click install
npx skills add https://github.com/sreejithraman/shayna --skill design-system-sreejithraman
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system
Source: https://github.com/sreejithraman/shayna/tree/main/.claude/skills/design-system
Command: npx skills add https://github.com/sreejithraman/shayna --skill design-system-sreejithraman

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design inconsistencies and fragmented token usage slow product delivery. This Skill provides guidance on design tokens, architecture, import order, and design-to-code translation to keep UI cohesive and scalable.

Core Features & Use Cases

  • Token Architecture: Three-Tier Token System (Primitive → Semantic → Component)
  • CSS Import Order: Enforce token-first stylesheets for consistent theming
  • Design-to-Code Translation: Map visual specs to tokens and components for faster handoff
  • Use Case: Establish a reusable token system for a component library to ensure uniform color, spacing, and typography across projects.

Quick Start

Define a token set and a base Button component skeleton that uses design tokens (color, spacing, typography) following the 3-tier token pattern.