Communitygithub.com

TheSonOfThomp/skills

Erzeuge wahrnehmungsgleichmäßige Farbskalen und erstelle zugängliche Farbpaletten in OKLCH. Baut gamut-begrenzte 9-12-Stufen-Skalen aus Basisfarben, vereinheitlicht mehrere Farbtöne pro Stufe und validiert WCAG-Kontrast und Farbblindheitssicherheit mit einem gebündelten Skript. Verwende dies, wenn der Benutzer nach einer Farbskala, Farbpalette, Farbverlauf, Erweiterung einer Markenfarbe in Töne/Schatten, Erstellung von Design-System-Farbtokens oder Überprüfung einer Palette auf Kontrast/Farbblindheitszugänglichkeit fragt.

Was ist skills?

Dieses Skill generiert wahrnehmungsgleichmäßige Farbskalen und komponiert daraus zugängliche Farbpaletten, die auf dem OKLCH-Farbraum basieren. Es delegiert die mathematische Berechnung an ein gebündeltes Python-Skript (`generate_ramp.py`), während die Kernaufgaben des Skills in der Konfiguration und Validierung liegen. Der Skill unterstützt die Erstellung von 9-12-Stufen-Skalen aus einer oder mehreren Basisfarben, wobei alle Farbtöne in einem einzigen Durchlauf generiert werden, um eine identische Helligkeits- und Chroma-Verteilung zu gewährleisten. Er validiert die Ergebnisse auf Monotonie der Helligkeit, gleichmäßige Abstände (ΔE), WCAG-Kontrast (AA) und Farbblindheitssicherheit (mit `--cvd`). Das Skill eignet sich für Entwickler*innen und Designer*innen, die mit Tools wie Claude Code, Cursor oder Codex arbeiten, um konsistente Designsystem-Farbtokens zu erstellen, bestehende Paletten zu auditieren oder Markenfarben in vollständige, barrierefreie Skalen zu erweitern.

Funktioniert mit~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/TheSonOfThomp/skills/tree/HEAD/skills/color-palette
Original anzeigen→Alle Skills durchsuchen

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Dokumentation

Farbpalette

Erweitere Basisfarben zu wahrnehmungsgleichmäßigen Skalen und setze sie zu einer Palette zusammen. Die gesamte Mathematik wird an den gebündelten Generator delegiert; die Aufgabe dieses Skills liegt in der Konfiguration und Validierung.

Prinzipien (Warum OKLCH)

  • Erstelle niemals Skalen in HSL/RGB. HSL-Helligkeit lügt (gleicher Wert ≠ gleiche wahrgenommene Helligkeit) und der Farbton driftet beim Abdunkeln/Aufhellen. Gleiche HSL-Helligkeit lässt Gelb zu hell und Blau zu dunkel erscheinen.
  • OKLCH ist der Arbeitsraum: L (Helligkeit), C (Chroma), H (Farbton) — gleiche Zahlen sehen gleich aus, und es ist natives CSS.
  • Chroma muss pro Stufe gamut-begrenzt werden. Hohe Chroma ist bei sehr hellen/dunklen Stufen physikalisch unmöglich; der Generator reduziert sie, anstatt dass der Browser sie abschneidet.
  • Ein Kontrastanker: Weißer Text besteht WCAG AA ab L ≈ 0,55 abwärts, schwarzer Text ab L ≈ 0,60 aufwärts. Die mittleren Stufen werden um diese Ziele herum platziert.

Vollständige Theorie und Quellen: references/theory.md

Arbeitsablauf

1. Ziel klären

Bestätige mit dem Benutzer (überspringe, was bereits bekannt ist): Basisfarbe(n) oder Markenfarben; Stufenanzahl (11 ist Standard, 9 kompakt, 12 wenn Radix-artige Rollen benötigt werden); welche Farbtöne die Palette benötigt (Marke + semantisch: Erfolg/Warnung/Gefahr/Info + neutral); Dunkelmodus erforderlich?

2. Die Skalen generieren

cd "{skill_dir}/scripts" && python3 generate_ramp.py "#3b82f6" --steps 11 --chroma 90
# Multi-Farbton-Palette: ein Aufruf, durch Komma getrennte Namen
python3 generate_ramp.py "#3b82f6" "#e11d48" "#22c55e" --names blau,rot,gruen --format css

Wichtige Flags: --chroma N (Prozent des gamut-Maximums pro Stufe; 80–95 typisch, höher = intensiver), --hue-drift D (bewusste Farbtonverschiebung hell→dunkel, z. B. dunkles Gelb in Richtung Orange; nur auf Anfrage), --cvd (deutan-simulierte Hex-Werte), --format table|css|json.

Multi-Farbton-Regel: Generiere alle Farbtöne in EINEM Aufruf, damit sie auf jeder Stufe identische Helligkeit und Chroma-Prozentsätze teilen — das sorgt dafür, dass sich blau-500 und rot-500 wie Geschwister anfühlen. Generiere niemals einen Farbton mit anderen Grenzen neu.

3. Validieren

Lies die Tabellenausgabe und überprüfe:

  • Helligkeit monoton, ΔE zwischen benachbarten Stufen annähernd konstant (Gleichmäßigkeitsspalte)
  • Beabsichtigte Vordergrund-/Hintergrund-Stufenpaare bestehen WCAG AA (weißer Text benötigt eine Stufe mit vs-white ≥ 4,5; schwarzer Text vs-black ≥ 4,5)
  • Keine Warnung zu ΔE zwischen Farbtönen (≥ 0,05 Oklab zwischen gleichnamigen Stufen)
  • Mit --cvd: Deutan-simulierte Stufen sind an den für bedeutungstragende UI verwendeten Stufen noch unterscheidbar

Wenn der Benutzer eine bestehende Palette zur Prüfung bereitgestellt hat, konvertiere jede Stufe in OKLCH (--format json bei einer Rekonstruktion oder manuelle Konvertierung) und überprüfe dieselben vier Punkte.

4. Die Palette komponieren

  • Rollen Stufen zuweisen (Radix-Konvention): 1–2 App-Hintergründe · 3–5 Komponenten-Hintergrund (normal/hover/active) · 6–8 Rahmen/Fokus · 9–10 Solider Hintergrund und Hover (Stufe 9 = reinste, höchste Chroma) · 11–12 Text (niedriger/hoher Kontrast).
  • Semantisch aliasen: --danger-500, nicht --rot-500, wenn eine Skala einer Bedeutung dient. Eine Skala kann mehrere Aliase bedienen.
  • Dunkelmodus = neu zuordnen, nicht neu generieren: Behalte die Skala bei, kehre die semantischen Zuweisungen um (hellste Stufe wird dunkelste Oberfläche, Textfarben tauschen die Enden). Die wahrnehmungsmäßige Gleichmäßigkeit in OKLCH macht die umgekehrte Zuordnung gleichermaßen lesbar.

5. Ausliefern

Schreibe die --format css-Ausgabe in eine Datei (CSS-Custom-Properties mit Hex-Fallbacks innerhalb von @supports) sowie den Validierungsbericht in den Chat. Wenn ein Designsystem das Ziel ist, schlage eine Token-Benennung vor (primitive Skala + semantische Aliasebene).

Häufige Korrekturen

SymptomLösung
Stufen 50/100 wirken blassErwartet — Chroma ist nahe Weiß physikalisch begrenzt; „behebe“ es nicht durch Beschneiden
Farbtöne wirken ungleich in ihrer LebendigkeitGleicher Aufruf für alle Farbtöne; versuche --chroma 80
Eine 500er-Stufe besteht Kontrast für weißen Text nichtAkzeptiere es für großen Text/Grafiken oder senke die mittlere Helligkeit (--hue-drift hilft nicht; verschiebe den Anker)
Dunkles Gelb wirkt olivBewusster --hue-drift 10–15 in Richtung Orange oder akzeptiere es als Markengeschmack

Verwandte Skills

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community