skills.rest
Michal-J-Kolodziej
Michal-J-KolodziejCOMMUNITY
Explore all skills by this author →
GitHub

style-audit

Identify and correct styling deviations across codebases using defined standards.

Updated Jan 21, 2026
Search Tags:#consistency#css#style#audit#tailwind#glassmorphism#design-system
One-click install
npx skills add https://github.com/Michal-J-Kolodziej/WalkWithMe --skill style-audit
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: style-audit
Source: https://github.com/Michal-J-Kolodziej/WalkWithMe/tree/main/.claude/skills/style-audit
Command: npx skills add https://github.com/Michal-J-Kolodziej/WalkWithMe --skill style-audit

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The app styling is inconsistent across screens and components, leading to a fragmented user experience. This Skill provides a systematic audit to detect deviations in spacing, typography, colors, borders, glassmorphism, and component patterns, and to propose actionable fixes to unify the design language.

Core Features & Use Cases

  • Scans codebases (src/components/ and src/routes/) for canonical design tokens and patterns.
  • Produces a prioritized Fix Plan and a STYLE_AUDIT.md with categorized deviations (Critical/Major/Minor/Intentional) and a verification checklist.
  • Supports scoped audits with arguments like [scope: full | spacing | typography | colors | glass | component-name] and can be integrated into maintenance cycles after feature work.

Quick Start

Run the style-audit command to start scanning your codebase for styling deviations and generate a prioritized fix plan.

Frequently Asked Questions about style-audit

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

FAQPage Schema
How do I audit my codebase for inconsistent CSS and styling deviations?▼

You can audit styling deviations by scanning your src/components and src/routes directories against canonical design tokens, which produces a STYLE_AUDIT.md containing categorized deviations, a prioritized fix plan, and a verification checklist to unify your design language.

What is the best way to enforce design system consistency in a Tailwind project?▼

Enforcing design system consistency involves scanning your codebase to ensure canonical design tokens and component patterns are applied correctly, identifying any fragmented styling, and producing an actionable plan to correct deviations across your application.

Can I run a scoped styling audit for just typography or spacing issues?▼

Yes, you can run a scoped styling audit using arguments like [scope: spacing | typography | colors | glass | component-name], allowing you to target and correct specific design areas instead of scanning the entire codebase at once.

How do I fix glassmorphism inconsistencies across UI components?▼

Fixing glassmorphism inconsistencies requires scanning your UI components to compare their styles against canonical design standards, identifying deviations, and following a generated fix plan to align borders, colors, and visual effects.

Does this styling audit tool produce actionable reports for developers?▼

Yes, the styling audit produces a STYLE_AUDIT.md report that includes categorized lists of deviations marked as Critical, Major, Minor, or Intentional, alongside a prioritized fix plan and a verification checklist for developers.

Related Skills

Explore More Design & Creative Skills→
somachaksomachak

modern-css-architecture

Standardize design tokens and component styling patterns for Tailwind-based React projects.

Community
Intermediate
vladimir-shirmanovvladimir-shirmanov

normalize

Align a feature's UI with design-system tokens and components.

Community
Advanced
datlechindatlechin

tailwind-design-system

Automate Tailwind CSS design token and component library creation.

Community
Intermediate
vallafedericovallafederico

solid-styling

Guide styling SolidJS components with CSS Modules, Tailwind CSS, Sass/Less, and CSS-in-JS.

Community
Intermediate