skills.rest
baloise
baloiseOFFICIAL
Explore all skills by this author →
WebsiteGitHub

ds-create-token

Analyze SCSS files to create design tokens in Base.tokens.json.

111|29|Updated Oct 4, 2019
Search Tags:#design tokens#ui development#token generation#css variables#component scss
One-click install
npx skills add https://github.com/baloise/design-system --skill ds-create-token
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ds-create-token
Source: https://github.com/baloise/design-system/tree/main/.claude/skills/ds-create-token
Command: npx skills add https://github.com/baloise/design-system --skill ds-create-token

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

Manages the transformation of CSS variables into structured design tokens for component use, eliminating manual errors and enhancing design system consistency.

Core Features & Use Cases

  • Automated Token Extraction: Extracts component CSS variables and identifies their type (Alias, Global, Component, Hardcoded) for efficient token generation.
  • Interactive Review Process: Provides an interactive workflow for reviewing and confirming token suggestions before applying them to the token JSON.
  • Customizable Component Tokens: Generates design tokens following a structured path for different component parts, supporting various states and categories.
  • Use Case: Convert CSS variables from your component's SCSS files into a well-organized Base.tokens.json file, enabling consistent UI development.

Quick Start

Run the /ds-create-token <component-name> command to start extracting and confirming design tokens for the specified component.

Frequently Asked Questions about ds-create-token

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

FAQPage Schema
How do I generate design tokens from SCSS files?▼

You can generate design tokens from CSS variables by running the /ds-create-token command with a component name. It analyzes SCSS files, classifies variables as alias, global, component, or hardcoded, and writes structured tokens to Base.tokens.json.

What are alias, global, and component design tokens?▼

Alias, global, and component design tokens represent classifications for CSS variables extracted from SCSS files. Alias tokens reference global values, global tokens hold foundational variables, and component tokens encapsulate values specific to individual UI elements.

Do I need npm run tokens to compile design tokens?▼

Yes, you need npm run tokens to compile design tokens after generation. The Skill creates and writes token suggestions to Base.tokens.json, but requires this npm script to execute the final compilation for UI development.

Can I review design token suggestions before applying them?▼

Yes, you can review design token suggestions before applying them through an interactive workflow. The Skill provides an interactive process to confirm token suggestions and their structured paths before applying them to Base.tokens.json.

Does design token generation work without SCSS files in the component directory?▼

No, design token generation does not work without SCSS files in the component directory. The Skill assumes the presence of SCSS files in the core component directory to analyze and extract CSS variables for structured token creation.

Related Skills

Explore More Design & Creative Skills→
firstsun-devfirstsun-dev

astro-scss-best-practices

Enforce component-scoped SCSS Modules and namespaced token imports in Astro projects.

Official
Intermediate
djankiesdjankies

configuring-tailwind-v4

Configure Tailwind CSS v4 with CSS-first @import and @theme directives.

Community
Advanced
RaNDoM6913RaNDoM6913
1

design-system-reviewer

Analyze frontend components for design system token compliance and hardcoded values.

Community
Advanced
johnlindquistjohnlindquist
24

design

Manage design tokens and export them to CSS, JSON, and Tailwind config.

Community
Advanced