design-system

Name: design-system
Availability: InStock
Author: JansenAnalytics

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

Ready to run

npx skills add https://github.com/JansenAnalytics/claudex --skill design-system-jansenanalytics

💬 Prompt for ChatGPT / Claude Chat▼

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.