skills.rest
pantheon-org
pantheon-orgOFFICIAL
Explore all skills by this author →
GitHub

web-reference-sheet-generator

Extract design tokens from CSS and generate Markdown design reference documentation.

9|Updated Feb 21, 2026
Search Tags:#documentation#design system#style guide#component library#web design#css tokens
One-click install
npx skills add https://github.com/pantheon-org/tekhne --skill web-reference-sheet-generator
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-reference-sheet-generator
Source: https://github.com/pantheon-org/tekhne/tree/main/skills/development/front-end/web-reference-sheet-generator
Command: npx skills add https://github.com/pantheon-org/tekhne --skill web-reference-sheet-generator

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill automates the creation of a comprehensive design reference sheet and a companion enforcement skill for any website project, ensuring consistency and clarity in design documentation.

Core Features & Use Cases

  • Automated Reference Sheet Generation: Extracts design tokens (colors, typography, spacing, etc.) from CSS and creates a detailed Markdown reference document.
  • Companion Enforcement Skill: Generates a project-specific SKILL.md to enforce adherence to the documented design system.
  • Use Case: When starting a new project, onboarding a design system, or auditing existing styles, use this Skill to generate a living document that captures the project's visual language.

Quick Start

Use the web-reference-sheet-generator skill to create a design reference for the current project.

Frequently Asked Questions about web-reference-sheet-generator

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

FAQPage Schema
How do I generate a style guide from existing CSS files?▼

To generate a style guide from CSS files, the tool extracts design tokens like colors, typography, and spacing, then validates them against a JSON schema to produce comprehensive Markdown documentation of your design system.

What is a design token and how does it relate to component documentation?▼

A design token is a predefined variable for visual properties like color or spacing. This tool extracts these tokens directly from CSS to document component patterns, layout structures, and accessibility standards into a structured reference sheet.

Can I automatically document dark mode and accessibility rules for my web design system?▼

Yes, you can automatically document dark mode and accessibility rules by analyzing your CSS component patterns. The generated Markdown reference sheet explicitly covers these sections to ensure your web design system remains compliant.

Does this design documentation tool enforce consistency across new web components?▼

Yes, it enforces consistency by generating a companion enforcement skill alongside the reference sheet. This companion skill validates new development against your documented CSS tokens, typography, and layout patterns.

What do I need to prepare before extracting design tokens from my CSS?▼

You need existing CSS files containing your project's design tokens, typography, and layout definitions. The tool analyzes these stylesheets directly to extract the visual language data required to build your reference sheet.

Related Skills

Explore More Design & Creative Skills→
The13thNodeThe13thNode
3

design-reference-scraper

Extract design system patterns from reference websites into structured design tokens.

Community
Intermediate
JetBrainsJetBrains
302

skillshare-ui-website-style

Standardize design tokens and components across UI and website frontends.

Official
Advanced
solitasrohsolitasroh
2

phase-5-design-system

Standardizes UI design tokens and components across Web, iOS, Android, and Flutter projects.

Community
Advanced
tanujsutariatanujsutaria
1

session-checkpoint

Validate iOS build status, inspect Git changes, and assess session goals.

Community
Intermediate