token-craft

Define design token architecture across primitive, semantic, and component layers.

Updated Aug 27, 2026

Search Tags:#theming #breakpoints #design-system #spacing #design-tokens #shadow #radius

Ready to run

npx skills add https://github.com/olzn/system-craft --skill token-craft

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: token-craft
Source: https://github.com/olzn/system-craft/tree/main/token-craft
Command: npx skills add https://github.com/olzn/system-craft --skill token-craft

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

token-craft provides a structured approach to designing, naming, and distributing design tokens across primitive, semantic, and component layers, ensuring consistent theming and scalable foundations.

Core Features & Use Cases

Establish three-layer token models (primitive, semantic, component) and naming conventions (--{category}-{property}-{modifier}).
Define and apply foundation scales for spacing, radius, shadow, z-index, breakpoints, and motion.
Audit codebases for hardcoded values and align tokens with colour, type, and motion systems from specialist crafts (colour-craft, type-craft, motion-craft).

Quick Start

Define and implement your token scales in a project to standardize design decisions.

Frequently Asked Questions about token-craft

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I structure design tokens across primitive, semantic, and component layers?▼

Structure design tokens by defining primitive base values, mapping them to semantic roles, and deriving component-specific variables using a --{category}-{property}-{modifier} naming convention to ensure scalable theming.

What is the best way to audit a codebase for hardcoded spacing and shadow values?▼

Audit codebases for hardcoded values by mapping raw numbers to established design token scales, replacing them with semantic or component-level variables to ensure consistent theming across the project.

How do I define foundation scales for spacing, radius, and z-index?▼

Define foundation scales by establishing systematic increment rules for spacing, radius, and z-index properties, then distributing them as primitive design tokens for consistent application.

Can I use design tokens to standardize responsive breakpoints and motion scales?▼

Yes, design tokens can standardize responsive breakpoints and motion scales by capturing these properties as primitive variables and distributing them through semantic and component layers for consistent theming.

How do naming conventions affect design system token architecture?▼

Naming conventions enforce design system token architecture by using the --{category}-{property}-{modifier} pattern to maintain clear relationships between primitive, semantic, and component layers during theming.