skills.rest
imsaif
imsaifCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

brand-colors

Scan React, Tailwind, and CSS code for brand color violations.

3|1|Updated Apr 18, 2025
Search Tags:#consistency#design tokens#tailwind#brand colors#lint#color enforcement
One-click install
npx skills add https://github.com/imsaif/aiex --skill brand-colors
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: brand-colors
Source: https://github.com/imsaif/aiex/tree/main/.claude/skills/brand-colors
Command: npx skills add https://github.com/imsaif/aiex --skill brand-colors

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps maintain AIUX brand color consistency by enforcing a minimalist black & white palette, ensuring colors stay on-brand and accessible.

Core Features & Use Cases

  • Scans files for non-approved brand colors in Tailwind classes, inline styles, and SVG attributes
  • Maps violations to fixed, brand-compliant replacements
  • Auto-fixes common violations and generates brand-compliance reports
  • Integrates into development workflow (pre-commit, CI) to prevent drifts

Quick Start

Check a file: /brand-colors check src/components/MyComponent.tsx Check a directory: /brand-colors check src/components/ Auto-fix a file: /brand-colors fix src/components/MyComponent.tsx Generate a report: /brand-colors report

Frequently Asked Questions about brand-colors

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

FAQPage Schema
How do I enforce brand color consistency across React and Tailwind components?▼

Brand color enforcement scans your React components, Tailwind classes, and inline styles to identify non-approved colors, then reports or auto-fixes violations to keep your UI palette on-brand. Use /brand-colors check to detect issues or /brand-colors fix to apply replacements automatically.

Can I automatically fix color violations in CSS and SVG files?▼

Yes, the /brand-colors fix command auto-corrects color violations across Tailwind classes, inline styles, SVG fill attributes, and CSS declarations, mapping non-brand colors to approved replacements in a single operation.

What's the best way to prevent off-brand colors from entering production?▼

Integrate brand color checks into your development workflow using /brand-colors check in pre-commit hooks or CI pipelines to catch violations before code reaches production, ensuring consistent brand compliance across all component revisions.

Does color enforcement work with design tokens and Tailwind configuration?▼

Yes, the Skill maps violations against your Tailwind class structure and design token palette, supporting both utility-first Tailwind workflows and systems built on CSS custom properties and design tokens for consistent brand enforcement.

How do I generate a report of brand color violations in my codebase?▼

Run /brand-colors report to scan your entire codebase and generate a compliance report listing all color violations, their locations, and mapped replacements—useful for auditing brand consistency across large projects.

What happens when gradients or non-standard color formats are used?▼

The Skill detects gradient violations and non-brand hues like unapproved blues and purples across inline styles and CSS, applying brand-compliant replacements while maintaining the visual intent of your design.

Related Skills

Explore More Design & Creative Skills→
RonnasaydRonnasayd
1

figma-design-system-to-tailwind

Convert Figma design systems into Tailwind CSS v4 configurations and component mappings.

Community
Advanced
DCx7C5DCx7C5

slaalerts-SKILL.md

Detect SLA breaches for vulnerability remediation using CVSS-based deadlines.

Community
Advanced
adilkalamadilkalam
2

cursor-code-style

Enforce Cursor Code Style guidelines on JavaScript/TypeScript and Python code.

Community
Basic
Jorge-IvanJorge-Ivan
1

design-audit

Audit project designs for visual consistency, WCAG compliance, and design system adherence.

Community
Advanced