Communitygithub.com

TheSonOfThomp/skills

Génère des rampes de couleurs perceptuellement uniformes et compose des palettes accessibles en OKLCH. Construit des échelles de 9 à 12 pas avec vérification du gamut, unifie plusieurs teintes à chaque pas, et valide le contraste WCAG et la sécurité pour le daltonisme avec un script fourni. À utiliser lorsque l'utilisateur demande de créer une rampe de couleurs, générer une palette ou une échelle de couleurs, étendre une couleur de marque en teintes/ombres, construire des tokens de couleurs pour un système de design, ou vérifier le contraste et l'accessibilité d'une palette.

Qu'est-ce que skills ?

Cette compétence d'agent IA spécialisée dans la génération de palettes de couleurs accessibles et perceptuellement uniformes utilise l'espace colorimétrique OKLCH, mathématiquement plus fidèle à la perception humaine que HSL ou RGB. Elle s'appuie sur un générateur Python intégré (`generate_ramp.py`) qui crée des rampes de 9 à 12 pas à partir de couleurs de base, avec clampage automatique du gamut pour éviter les couleurs irréalisables aux extrêmes de luminosité. La compétence valide systématiquement le contraste WCAG (AA) pour les textes blanc et noir, ainsi que la sécurité pour le daltonisme (simulation deutéranope). Elle permet de générer plusieurs teintes en une seule invocation pour garantir une luminosité et une saturation cohérentes entre les pas (par exemple, `blue-500` et `red-500` apparaissent comme des nuances sœurs). La sortie est compatible avec les systèmes de design modernes (tokens CSS, conventions Radix) et prend en charge le mode sombre par remappage sémantique sans régénération. L'agent guide l'utilisateur à travers un flux de travail en cinq étapes : clarification des besoins, génération, validation, composition et livraison. Des correctifs courants sont fournis sous forme de tableau (par exemple, l'absence de vivacité aux extrêmes est normale, les jaunes foncés peuvent nécessiter une dérive de teinte vers l'orange). La compétence est conçue pour être utilisée avec des agents comme Claude Code, Cursor ou Codex, et nécessite Python 3 ainsi que l'accès au répertoire `scripts`.

Compatible avec~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/TheSonOfThomp/skills/tree/HEAD/skills/color-palette
Voir l'original→Voir toutes les compétences

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentation

Palette de couleurs

Étendre les couleurs de base en rampes perceptuellement uniformes et les composer en une palette. Tous les calculs sont délégués au générateur fourni ; le jugement de cette compétence réside dans la configuration et la validation.

Principes (pourquoi OKLCH)

  • Ne jamais générer de rampes en HSL/RGB. La luminosité HSL ment (même valeur ≠ même luminosité perçue) et la teinte dérive lorsque vous nuancez/ombrez. Une luminosité HSL égale rend les jaunes trop clairs et les bleus trop foncés.
  • OKLCH est l'espace de travail : L (luminosité), C (chroma), H (teinte) — des nombres égaux se ressemblent, et il est natif en CSS.
  • Le chroma doit être limité au gamut par pas. Un chroma élevé est physiquement impossible aux pas très clairs/foncés ; le générateur le réduit plutôt que de laisser le navigateur l'écrêter.
  • Un ancrage de contraste : le texte blanc passe WCAG AA à partir de L ≈ 0.55, le texte noir à partir de L ≈ 0.60. Les pas intermédiaires sont placés autour de ces cibles.

Théorie complète et sources : references/theory.md

Flux de travail

1. Clarifier l'objectif

Confirmer avec l'utilisateur (ignorer ce qui est déjà connu) : couleur(s) de base ou couleurs de marque ; nombre de pas (11 est standard, 9 pour une palette légère, 12 si des rôles de style Radix sont nécessaires) ; quelles teintes la palette doit inclure (marque + sémantique : succès/avertissement/danger/info + neutre) ; mode sombre requis ?

2. Générer les rampes

cd "{skill_dir}/scripts" && python3 generate_ramp.py "#3b82f6" --steps 11 --chroma 90
# palette multi-teintes : une invocation, noms séparés par des virgules
python3 generate_ramp.py "#3b82f6" "#e11d48" "#22c55e" --names blue,red,green --format css

Indicateurs clés : --chroma N (pourcentage du max de gamut par pas ; 80-95 typique, plus élevé = plus vif), --hue-drift D (dérive de teinte intentionnelle clair→foncé, par ex. jaunes foncés vers l'orange ; uniquement sur demande), --cvd (hexadécimaux simulés pour deutéranopie), --format table|css|json.

Règle multi-teintes : générer toutes les teintes en UNE SEULE invocation afin qu'elles partagent une luminosité et un pourcentage de chroma identiques à chaque pas — c'est ce qui fait que blue-500 et red-500 se ressemblent. Ne jamais régénérer une teinte avec des limites différentes.

3. Valider

Lire le tableau de sortie et vérifier :

  • Luminosité monotone, ΔE entre pas adjacents approximativement constant (colonne d'uniformité)
  • Les paires de pas fg/bg prévues passent WCAG AA (le texte blanc nécessite un pas avec vs-white ≥ 4.5 ; le texte noir vs-black ≥ 4.5)
  • Avertissement de ΔE inter-teinte absent (≥ 0.05 Oklab entre teintes du même pas)
  • Avec --cvd : les couleurs de pas simulées pour deutéranopie sont encore distinguables aux pas utilisés pour l'interface porteuse de sens

Si l'utilisateur a fourni une palette existante à auditer, convertir chaque pas en OKLCH (--format json sur une reconstruction, ou conversion manuelle) et vérifier les quatre mêmes points.

4. Composer la palette

  • Assigner des rôles aux pas (convention Radix) : 1-2 fonds d'application · 3-5 fonds de composants (normal/survol/actif) · 6-8 bordures/focus · 9-10 fonds solides et survol (pas 9 = le plus pur, chroma le plus élevé) · 11-12 texte (faible/fort contraste).
  • Aliaser sémantiquement : --danger-500, pas --red-500, lorsqu'une échelle sert une seule signification. Une échelle peut servir plusieurs alias.
  • Mode sombre = remapper, ne pas régénérer : conserver l'échelle, inverser les assignations sémantiques (le pas le plus clair devient la surface la plus foncée, les couleurs de texte échangent les extrémités). L'uniformité perceptuelle en OKLCH rend le mappage inversé tout aussi lisible.

5. Livrer

Écrire la sortie --format css dans un fichier (propriétés personnalisées avec des valeurs de repli hexadécimales dans @supports), plus le rapport de validation dans le chat. Si un système de design est la destination, suggérer une nomenclature des tokens (échelle primitive + couche d'alias sémantique).

Correctifs courants

SymptômeCorrectif
Les pas 50/100 semblent délavésAttendu — le chroma est physiquement limité près du blanc ; ne « corrigez » pas en l'écrêtant
Les teintes semblent inégales en vivacitéMême invocation pour toutes les teintes ; essayez --chroma 80
Un pas 500 échoue au contraste pour texte blancAcceptez-le pour les grands textes/graphiques, ou abaissez la luminosité (--hue-drift n'aidera pas ; déplacez l'ancrage)
Les jaunes foncés ressemblent à de l'oliveDélibéré : --hue-drift 10-15 vers l'orange, ou acceptez-le comme goût de marque

Skills associés

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