skills.rest
dylantarre
dylantarreCOMMUNITY
Explore all skills by this author →
Website𝕏@beatthetarGitHub

token-docs

Generate structured Markdown documentation from CSS, JSON, or JS design tokens.

38|3|Updated Dec 29, 2025
Search Tags:#documentation#markdown#generate#design-system#design-tokens#cross-reference
One-click install
npx skills add https://github.com/dylantarre/design-system-skills --skill token-docs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: token-docs
Source: https://github.com/dylantarre/design-system-skills/tree/main/skills/documentation/token-docs
Command: npx skills add https://github.com/dylantarre/design-system-skills --skill token-docs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill solves the problem of keeping design token documentation in sync with token values.

Core Features & Use Cases

  • Generate comprehensive token documentation with color, typography, spacing, and other token categories.
  • Create living, developer-ready references and style guides that stay updated as tokens evolve.
  • Use it to document new token systems, publish token references for teams, and provide living design-system docs.

Quick Start

Gather token data from your CSS, JSON, or JS sources and run the token-docs generation workflow to produce the documentation pages. Update visuals and guidelines as token values change.

Frequently Asked Questions about token-docs

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

FAQPage Schema
How do I generate design token documentation from JSON or CSS files?▼

Import token data from CSS, JSON, or JS sources to generate design token documentation. The workflow outputs structured Markdown with dedicated sections for color, typography, spacing, and cross-reference tables.

What is the best way to keep design system style guides synchronized with token values?▼

Generate living token documentation to keep design system style guides synchronized with token values. This produces developer-ready Markdown references that stay updated as tokens evolve.

Can I generate cross-reference tables for typography and spacing tokens?▼

Yes, you can generate cross-reference tables for typography and spacing tokens. The workflow outputs structured Markdown that includes cross-reference tables alongside color, typography, and spacing sections.

Does token documentation generation work with JavaScript source files?▼

Yes, token documentation generation works with JavaScript source files. It imports token data directly from JS, as well as CSS and JSON formats, to output structured Markdown references.

What format does the generated design token documentation output?▼

The generated design token documentation outputs as structured Markdown. It includes dedicated sections for color, typography, spacing, and cross-reference tables to serve as a developer-ready reference.

Related Skills

Explore More Design & Creative Skills→
pradyumnasagarpradyumnasagar
6

agent-handoff

Automate inter-skill data transfer and provenance capture via JSON Material Passports.

Community
Advanced
microsoftmicrosoft
2.9k

wiki-vitepress

Package wiki Markdown into a VitePress static site with dark theme and Mermaid diagrams.

Official
Advanced
guideopsguideops

sega

Generates Sega-style design tokens, typography scales, and color palettes for game interfaces.

Community
Intermediate
pradyumnasagarpradyumnasagar
6

roadmap-author

Guide authors through creating and validating ORS SKILL.md files.

Community
Intermediate