style-system-review

Assess UI style-system coherence and maintainability across a codebase.

Updated Apr 26, 2026
One-click install
npx skills add https://github.com/ringlochid/coding-skills --skill style-system-review
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: style-system-review
Source: https://github.com/ringlochid/coding-skills/tree/main/style-system-review
Command: npx skills add https://github.com/ringlochid/coding-skills --skill style-system-review

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Style-system-review helps teams evaluate UI styling choices to ensure a coherent, maintainable visual system across projects, reducing drift and polish debt.

Core Features & Use Cases

  • Token and utility audit across Tailwind, CSS Modules, and design tokens to identify drift.
  • Pattern ownership and responsibility mapping to avoid one-off styles.
  • Evidence-backed recommendations with concrete cleanup targets and next steps.

Quick Start

Analyze the current UI style system and report the top three issues with suggested fixes.

Frequently Asked Questions about style-system-review

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

FAQPage Schema
How do I audit my UI style system for consistency and drift?

To audit a UI style system, assess token usage, repeated utility patterns, and custom CSS ownership. This process validates style-system consistency, documents gaps across the codebase, and identifies actionable cleanup targets to reduce visual drift and polish debt.

What causes design token drift in a frontend codebase?

Design token drift occurs when developers use one-off custom CSS or repeated utility patterns instead of shared tokens. Auditing these patterns maps ownership responsibility and highlights where style-system coherence breaks down across the project.

Can I audit Tailwind and CSS Modules for style-system maintainability?

Yes, you can audit Tailwind and CSS Modules for maintainability by evaluating token usage, responsiveness, and interaction states. This identifies repeated utility patterns and custom CSS ownership to document gaps and recommend concrete improvements.

What is the best way to identify polish debt in a UI style system?

The best way to identify polish debt is to assess interaction states and responsiveness across the codebase. This evaluates style-system coherence, documents existing gaps, and recommends the smallest actionable cleanup targets for improvement.

How do I map pattern ownership to avoid one-off styles in my CSS?

Mapping pattern ownership involves auditing custom CSS and repeated utility patterns to assign responsibility. This highlights one-off styles, validates style-system consistency, and produces evidence-backed recommendations for concrete cleanup targets.