audit-styles

Audit Svelte component style blocks for design token violations.

1|Updated Feb 28, 2026

Search Tags:#css #audit #svelte #ui-design #design-tokens #style-audit

Ready to run

npx skills add https://github.com/im9/inboil --skill audit-styles

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: audit-styles
Source: https://github.com/im9/inboil/tree/main/.claude/skills/audit-styles
Command: npx skills add https://github.com/im9/inboil --skill audit-styles

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Audit component CSS for arbitrary colors, font sizes, and spacing that violate the design token system defined in docs/ai/ui-design.md. Report violations and optionally fix.

Core Features & Use Cases

Scan Svelte component <style> blocks for values that violate the design token system defined in docs/ai/ui-design.md.
Report violations and optionally fix them.
Use in CI workflows to enforce token compliance across a codebase.

Quick Start

Run the audit-styles tool on your Svelte project to detect token violations and automatically apply fixes.

Frequently Asked Questions about audit-styles

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

FAQPage Schema

How do I audit Svelte component style blocks for CSS design token violations?▼

You can audit Svelte components by scanning style blocks for arbitrary colors, font sizes, and spacing that violate the design token system, generating a report of violations and optionally applying automated fixes.

What problems does a CSS design token audit solve for my UI?▼

A CSS design token audit enforces token opacity steps, allowed color families, and border rules to identify and fix inconsistent UI styling across your project.

Can I enforce design token compliance in CI workflows for my Svelte project?▼

Yes, you can use the style audit tool in CI workflows to enforce token compliance across your Svelte codebase by checking colors, font sizes, spacing, and borders automatically.

What's the best way to fix arbitrary CSS colors and spacing in Svelte components?▼

The best way to fix arbitrary CSS colors and spacing is to run an automated audit that identifies values violating the design token system and applies the specified compliant tokens.

Do I need a design docs file to audit CSS tokens in my project?▼

Yes, the audit checks CSS values against the design token system defined in your project's docs, specifically referencing a file like docs/ai/ui-design.md for the allowed token rules.