skills.rest
JansenAnalytics
JansenAnalyticsCOMMUNITY
Explore all skills by this author →
GitHub

design-system

Extract design tokens, build component inventories, and audit CSS consistency.

5|Updated Apr 8, 2026
Search Tags:#consistency#css#ui-design#design-system#design-tokens#style-audit#component-inventory
One-click install
npx skills add https://github.com/JansenAnalytics/claudex --skill design-system-jansenanalytics
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system
Source: https://github.com/JansenAnalytics/claudex/tree/main/skills/design-system
Command: npx skills add https://github.com/JansenAnalytics/claudex --skill design-system-jansenanalytics

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Enforce consistent UI by centralizing design tokens, component inventories, and CSS audits to avoid drift across projects.

Core Features & Use Cases

  • Build and maintain a living component inventory across React, Vue, or vanilla projects.
  • Extract and standardize design tokens (colors, typography, spacing) from CSS/SCSS.
  • Audit spacing, color, and typography to ensure visual consistency and adherence to the design system.
  • Use during design reviews and CI checks to catch drift early.

Quick Start

Run the design-system audit on your codebase to generate a component inventory and token report.

Frequently Asked Questions about design-system

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

FAQPage Schema
How do I audit CSS consistency and extract design tokens from my frontend project?▼

Run a design-system audit on your codebase to extract design tokens from CSS/SCSS, build a component inventory, and audit spacing, color, and typography for visual consistency across your frontend project.

What is a component inventory and when do I need one for UI design?▼

A component inventory is a living catalog of UI components across React, Vue, or vanilla projects. You need one to track component usage and catch visual drift early across multiple pages during design reviews.

Does this design token audit work with React and Vue projects?▼

Yes, the design token audit works with React, Vue, and plain CSS projects. It extracts tokens from CSS/SCSS and performs consistency audits across multiple pages regardless of the frontend framework.

Can I integrate CSS consistency auditing into my CI/CD pipeline?▼

Yes, you can integrate CSS consistency auditing into CI/CD pipelines. The audit outputs for spacing, color, and typography are suitable for CI checks to catch design-system drift early before deployment.

How do I standardize spacing and colors from SCSS into design tokens?▼

You can standardize spacing and colors by extracting design tokens directly from SCSS files. The audit identifies existing values and centralizes them into standardized tokens to enforce UI consistency across the project.

Related Skills

Explore More Design & Creative Skills→
managedcodemanagedcode
42

dotnet-stylelint

Configure and run Stylelint validation on CSS/SCSS assets in .NET web projects.

Official
Intermediate
murphytruemanmurphytrueman
155

cicd-integration

Generate CI/CD pipeline configurations for design system quality checks.

Community
Advanced
automata-networkautomata-network

design-bible

Align React, Vue, and HTML UI development with token-driven design system rules.

Official
Advanced
Dragoon0xDragoon0x
4

sync

Export code-defined design tokens to a Tokens Studio-compatible figma.tokens.json file.

Community
Intermediate