What is color-consistency-checker?

Perfect for Frontend Agents working with Tailwind CSS projects, ensuring color consistency across custom UI components. color-consistency-checker is a skill that validates color consistency in Tailwind CSS projects based on a predefined color scheme defined in tailwind.config.ts and app/globals.css

How do I install color-consistency-checker?

Run the command: npx killer-skills add jonsdoesch87-ai/craft-beer-wizard/color-consistency-checker. It works with Cursor, Windsurf, VS Code, Claude Code, and 19+ other IDEs.

What are the use cases for color-consistency-checker?

Key use cases include: Validating color usage in UI components against the official color scheme, Automating color consistency checks for new feature developments, Debugging inconsistent color applications in existing projects.

Which IDEs are compatible with color-consistency-checker?

This skill is compatible with Cursor, Windsurf, VS Code, Trae, Claude Code, OpenClaw, Aider, Codex, OpenCode, Goose, Cline, Roo Code, Kiro, Augment Code, Continue, GitHub Copilot, Sourcegraph Cody, and Amazon Q Developer. Use the Killer-Skills CLI for universal one-command installation.

Are there any limitations for color-consistency-checker?

Requires access to Tailwind CSS project configuration files. Limited to projects using Tailwind CSS framework. Needs predefined color scheme definitions in `tailwind.config.ts` and `app/globals.css`.

color-consistency-checker

Install color-consistency-checker, an AI agent skill for AI agent workflows and automation. Works with Claude Code, Cursor, and Windsurf with one-command...

SKILL.md

Readonly

Color Consistency Checker

Name: color-consistency-checker
Availability: InStock
Author: jonsdoesch87-ai

Prüft ob Farben konsistent mit dem Farbschema verwendet werden.

Offizielles Farbschema

Definiert in tailwind.config.ts und app/globals.css:

Farbe	Hex	Tailwind-Klasse	Verwendung
Primary	`#FFBF00`	`primary`	Akzente, Buttons, Links
Primary Hover	`#E5AC00`	`primary/90`	Hover-States
Primary Foreground	`#1a1a1a`	`primary-foreground`	Text auf Primary
Background	`#1a1a1a`	`background`	Hintergrund
Foreground	`#ededed`	`foreground`	Text
Secondary	`#2a2a2a`	`secondary`	Sekundäre Elemente
Muted	`#2a2a2a`	`muted`	Gedämpfte Bereiche
Muted Foreground	`#a0a0a0`	`muted-foreground`	Gedämpfter Text
Border	`#3a3a3a`	`border`	Rahmen
Destructive	`#ef4444`	`destructive`	Fehler, Löschen
Success	`#4CBB17`	`success`	Erfolg
Ring	`#FFBF00`	`ring`	Focus-Ring

Häufige Probleme

1. Hardcoded Hex statt Tailwind-Klasse

tsx
1// ❌ Schlecht - hardcoded
2className="bg-[#FFBF00] text-black hover:bg-[#E5AC00]"
3className="text-[#FFBF00]"
4className="border-[#FFBF00]"
5
6// ✅ Gut - Tailwind-Klassen
7className="bg-primary text-primary-foreground hover:bg-primary/90"
8className="text-primary"
9className="border-primary"

2. Inkonsistente Hover-States

tsx
1// ❌ Verschiedene Hover-Farben
2hover:bg-[#E5AC00]  // manchmal
3hover:bg-[#d4a000]  // manchmal anders
4
5// ✅ Konsistent
6hover:bg-primary/90

3. Hardcoded Grautöne

tsx
1// ❌ Hardcoded
2bg-[#1a1a1a]
3text-[#ededed]
4border-[#3a3a3a]
5
6// ✅ Semantic
7bg-background
8text-foreground
9border-border

Prüfungs-Workflow

Schritt 1: Finde hardcoded Farben

bash
1# Alle Hex-Farben in TSX/TS Dateien
2rg '#[0-9A-Fa-f]{6}' --type ts --type tsx -g '!*.json'
3
4# Spezifisch Primary-Farbe
5rg '#FFBF00|#ffbf00' --type ts --type tsx
6
7# Bracket-Notation (Tailwind arbitrary values)
8rg '\[#[0-9A-Fa-f]{6}\]' --type ts --type tsx

Schritt 2: Kategorisiere die Funde

Kategorie	Aktion
`#FFBF00` in className	→ `primary`
`#E5AC00` in hover	→ `primary/90`
`#1a1a1a` Background	→ `background`
`#ededed` Text	→ `foreground`
`#3a3a3a` Border	→ `border`
`#ef4444` Error	→ `destructive`
`#4CBB17` Success	→ `success`
Andere Hex-Werte	→ Prüfen ob notwendig

Schritt 3: Ausnahmen identifizieren

Diese hardcoded Farben sind OK:

EBC/SRM Bierfarben in RecipeCard.tsx:

tsx
1// Diese sind dynamisch berechnet!
2if (srm < 4) return "#F8F5D4"; // Pale Straw
3if (srm < 7) return "#F3F993"; // Gold

Print Styles in RecipeCard.tsx:

tsx
1// Print braucht andere Farben
2border-bottom: 2px solid #FFBF00;

OG Images in app/api/og/:
```
tsx
1// Generierte Bilder, kein Tailwind
```

Report-Format

markdown
1## Farbkonsistenz-Prüfung
2
3### 🔴 Kritisch (hardcoded Primary)
4| Datei | Zeile | Aktuell | Vorschlag |
5|-------|-------|---------|-----------|
6| Navbar.tsx | 42 | `bg-[#FFBF00]` | `bg-primary` |
7
8### 🟡 Empfohlen (andere hardcoded)
9| Datei | Zeile | Aktuell | Vorschlag |
10|-------|-------|---------|-----------|
11| Footer.tsx | 15 | `text-[#a0a0a0]` | `text-muted-foreground` |
12
13### ✅ Ausnahmen (OK)
14- RecipeCard.tsx: EBC Farben (dynamisch berechnet)
15- api/og/route.tsx: OG Image Generation

Bekannte Dateien mit vielen Hardcoded Farben

Diese Dateien haben besonders viele hardcoded Farben:

app/cellar/page.tsx - 13 Stellen
components/RecipeCard.tsx - 82 Stellen (viele OK wegen Print/EBC)
components/BrewSession.tsx - 110 Stellen
components/WizardStep2.tsx - 6 Stellen
components/Navbar.tsx - 22 Stellen

Ersetzungs-Regeln

Button Primary

tsx
1// ❌ Vorher
2<Button className="bg-[#FFBF00] text-black hover:bg-[#E5AC00]">
3
4// ✅ Nachher
5<Button className="bg-primary text-primary-foreground hover:bg-primary/90">

Text Primary

tsx
1// ❌ Vorher
2<span className="text-[#FFBF00]">
3
4// ✅ Nachher
5<span className="text-primary">

Tab Active State

tsx
1// ❌ Vorher
2className="data-[state=active]:bg-[#FFBF00] data-[state=active]:text-black"
3
4// ✅ Nachher
5className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground"

Star/Rating

tsx
1// ❌ Vorher
2className={rating ? "text-[#FFBF00] fill-[#FFBF00]" : "text-zinc-600"}
3
4// ✅ Nachher
5className={rating ? "text-primary fill-primary" : "text-muted-foreground"}

color-consistency-checker — tailwind css color validation color-consistency-checker, craft-beer-wizard, community, tailwind css color validation, ide skills, install color-consistency-checker, color consistency in ui design, Claude Code, Cursor, Windsurf

About this Skill

Features

# Core Topics

Agent Capability Analysis

Ideal Agent Persona

Core Value

↓ Capabilities Granted for color-consistency-checker

! Prerequisites & Limits

Browser Sandbox Environment

⚡️ Ready to unleash?