design-system-audit

Detect hardcoded design-token violations in frontend codebases and report fixes.

1|Updated Apr 5, 2026
One-click install
npx skills add https://github.com/microscaler/cylon-skills --skill design-system-audit-microscaler
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-system-audit
Source: https://github.com/microscaler/cylon-skills/tree/main/skills/design-system-audit
Command: npx skills add https://github.com/microscaler/cylon-skills --skill design-system-audit-microscaler

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps teams enforce visual and component consistency by detecting hardcoded design values that bypass the design system, ensuring a cohesive user interface across the frontend.

Core Features & Use Cases

  • Design-token validation: Detects hardcoded colors, typography, spacing and maps them to design tokens.
  • Violation reporting: Generates structured findings with locations and recommended fixes for token usage.
  • Use Case: When a new feature branch introduces custom UI components, run the audit to align visuals with the design system and create a remediation plan.

Quick Start

Run the audit on your frontend repository to identify hardcoded colors, typography overrides, and spacing that violate design tokens.

Frequently Asked Questions about design-system-audit

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

FAQPage Schema
How do I find hardcoded values in frontend components that bypass design tokens?

To find hardcoded values in frontend components, run a design-token audit to scan src/components and src/styles. It detects hardcoded colors, typography, and spacing, then generates structured findings with locations and actionable token-correcting recommendations.

What is design token drift and how do I detect it across feature branches?

Design token drift occurs when custom UI components introduce hardcoded values instead of using the design system. You can detect this drift by running an audit across your feature branches to identify visual inconsistencies and generate a remediation plan.

Can I audit design token violations in my existing src/styles directory?

Yes, you can audit design token violations in src/styles and src/components directories. The audit identifies hardcoded colors, typography overrides, and spacing that violate design tokens, producing structured findings to help align visuals with your design system.

What is the best way to enforce UI consistency when adding new custom components?

The best way to enforce UI consistency is to run a design-token audit on your frontend repository after adding custom components. This detects hardcoded values that bypass the design system and provides a structured remediation plan to realign visuals.

Does a frontend design token audit work without predefined component dependencies?

Yes, a frontend design token audit works without predefined component dependencies. It directly scopes your existing src/components and src/styles directories to detect hardcoded values and map them to your active design tokens.