Communitygithub.com

TheSonOfThomp/skills

Gere rampas de cores perceptualmente uniformes e componha paletas acessíveis em OKLCH. Cria escalas de 9 a 12 etapas com gama limitada a partir de cores base, unifica vários matizes em cada etapa e valida contraste WCAG e segurança para daltonismo com um script embutido.

O que é skills?

Esta skill é especializada na geração e composição de paletas de cores acessíveis e perceptualmente uniformes, utilizando o espaço de cores OKLCH. Diferente de métodos tradicionais em HSL ou RGB, que produzem variações de brilho e matiz enganosas, o OKLCH garante que 'cores iguais pareçam iguais', mesmo em diferentes níveis de claridade e saturação. A skill gera rampas de 9 a 12 etapas a partir de uma ou mais cores base, com controle sobre a saturação (croma) e até mesmo a derivação de matiz. Todas as cores geradas têm a saturação limitada para permanecerem dentro da gama sRGB, evitando cortes inesperados no navegador. Além da geração, a skill oferece validação integrada: ela verifica o contraste WCAG (AA/AAA), a uniformidade perceptual entre etapas adjacentes usando Delta E e a distinguibilidade das cores sob simulação de daltonismo (deuteranopia). A saída pode ser em formato CSS com `@supports`, tabela ou JSON, facilitando a integração em sistemas de design, tokens e temas claro/escuro. O fluxo de trabalho prioriza a colaboração com o usuário para definir o objetivo (número de etapas, matizes, necessidade de modo escuro) e, em seguida, gera e valida a paleta em uma única chamada de script, garantindo consistência entre matizes diferentes.

Funciona com~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/TheSonOfThomp/skills/tree/HEAD/skills/color-palette
Ver original→Navegar por todas as habilidades

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentação

Paleta de Cores

Expanda cores base em rampas perceptualmente uniformes e componha-as em uma paleta. Toda a matemática é delegada ao gerador embutido; o julgamento desta skill está na configuração e validação.

Princípios (por que OKLCH)

  • Nunca gere rampas em HSL/RGB. A claridade do HSL mente (mesmo valor ≠ mesma percepção de brilho) e o matiz se desvia conforme você cria matizes/sombras. Claridades HSL iguais fazem os amarelos parecerem muito claros e os azuis muito escuros.
  • OKLCH é o espaço de trabalho: L (claridade), C (croma), H (matiz) — números iguais parecem iguais, e é CSS nativo.
  • O croma deve ser limitado por etapa. Alto croma é fisicamente impossível em etapas muito claras/escuras; o gerador o reduz em vez de deixar o navegador cortar.
  • Uma âncora de contraste: texto branco passa WCAG AA a partir de L ≈ 0,55, texto preto a partir de L ≈ 0,60. As etapas intermediárias são posicionadas em torno desses alvos.

Teoria completa e fontes: references/theory.md

Fluxo de trabalho

1. Esclareça o objetivo

Confirme com o usuário (pule o que já é conhecido): cor(es) base ou cores da marca; número de etapas (11 é padrão, 9 enxuto, 12 se houver necessidade de funções no estilo Radix); quais matizes a paleta precisa (marca + semânticos: sucesso/aviso/perigo/info + neutro); modo escuro necessário?

2. Gere as rampas

cd "{skill_dir}/scripts" && python3 generate_ramp.py "#3b82f6" --steps 11 --chroma 90
# paleta multimatiz: uma invocação, nomes separados por vírgula
python3 generate_ramp.py "#3b82f6" "#e11d48" "#22c55e" --names blue,red,green --format css

Flags principais: --chroma N (porcentagem do croma máximo por etapa; 80-95 típico, mais alto = mais vibrante), --hue-drift D (virada deliberada de matiz durante a transição claro→escuro, por ex., amarelos escuros em direção ao laranja; somente mediante solicitação), --cvd (hexes simulados para deuteranopia), --format table|css|json.

Regra multimatiz: gere todos os matizes em UMA invocação para que compartilhem L e porcentagem de croma idênticas em cada etapa — isso é o que faz blue-500 e red-500 parecerem irmãos. Nunca regere um matiz com limites diferentes.

3. Valide

Leia a saída da tabela e verifique:

  • Claridade monotônica, Delta E entre etapas adjacentes aproximadamente constante (coluna de uniformidade)
  • Pares de etapa fg/bg pretendidos passam WCAG AA (texto branco precisa de uma etapa com vs-white ≥ 4,5; texto preto vs-black ≥ 4,5)
  • Aviso de Delta E entre matizes ausente (≥ 0,05 Oklab entre matizes da mesma etapa)
  • Com --cvd: as cores simuladas para deuteranopia ainda são distinguíveis nas etapas usadas para UI com significado

Se o usuário forneceu uma paleta existente para auditar, converta cada etapa para OKLCH (--format json em uma reconstrução ou converta manualmente) e verifique os mesmos quatro pontos.

4. Componha a paleta

  • Atribua funções às etapas (convenção Radix): 1-2 fundos de aplicativo · 3-5 bg de componente (normal/hover/active) · 6-8 bordas/foco · 9-10 bg sólido e hover (etapa 9 = mais pura, maior croma) · 11-12 texto (baixo/alto contraste).
  • Crie aliases semânticos: --danger-500, não --red-500, quando uma escala serve a um significado. Uma escala pode dar suporte a vários aliases.
  • Modo escuro = remapeie, não regere: mantenha a escala, inverta as atribuições semânticas (a etapa mais clara se torna a superfície mais escura, as cores do texto trocam de extremidade). A uniformidade perceptual em OKLCH torna o mapeamento inverso igualmente legível.

5. Entregue

Escreva a saída --format css em um arquivo (propriedades personalizadas com fallbacks hex dentro de @supports), além do relatório de validação no chat. Se um sistema de design for o destino, sugira a nomeação de tokens (escala primitiva + camada de alias semântico).

Correções comuns

SintomaCorreção
As etapas 50/100 parecem desbotadasEsperado — o croma é fisicamente limitado perto do branco; não "corrija" limitando
Os matizes parecem desiguais em vivacidadeMesma invocação para todos os matizes; tente --chroma 80
Uma etapa 500 falha no contraste para texto brancoAceite para texto grande/gráficos, ou abaixe a claridade média (--hue-drift não ajudará; mova a âncora)
Amarelos escuros parecem oliva--hue-drift 10-15 deliberado em direção ao laranja, ou aceite como gosto da marca

Habilidades Relacionadas

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