From shipit-ui-design
Senior-level color work — perceptual color spaces (OKLCH/OKLab), 11-step ramps, accessibility (WCAG/APCA + colorblind safety), image extraction, harmonies, perceptual mixing, gradient interpolation, and token naming. Auto-activates on color-related edits and on edits to color sections of `tokens.css`.
How this skill is triggered — by the user, by Claude, or both
Slash command
/shipit-ui-design:color-engineeringThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Color decisions in a design system propagate everywhere — once a hue or ramp is wrong, every component inherits the mistake. This skill is the toolkit a senior designer reaches for: perceptual ramps, contrast that holds at every weight, colorblind-safe categorical scales, gradients that don't mud out, and tokens that survive a dark-mode flip.
Color decisions in a design system propagate everywhere — once a hue or ramp is wrong, every component inherits the mistake. This skill is the toolkit a senior designer reaches for: perceptual ramps, contrast that holds at every weight, colorblind-safe categorical scales, gradients that don't mud out, and tokens that survive a dark-mode flip.
- Max 300 lines per file. If a generated component would exceed, split before writing.
- No hardcoded design values. Colors, spacing, radii, shadows, durations, easings — all from tokens.
- Every interactive element has hover, active, focus-visible, and disabled states.
- All motion respects
prefers-reduced-motion.- Every image / illustration has alt text or
aria-hiddenif decorative.- Dark mode is never an afterthought — emitted alongside light from the start.
- Stack-respect: never introduce a new framework or styling system; adapt to what's there.
tokens.css color sections, tailwind.config.* color extensions, theme files exporting color tokens./palette, /design init (color portion), /audit (color & contrast scoring).Do not load every reference. Pick by sub-task. Each file is ≤ 300 lines and self-contained.
| Sub-task | Read this |
|---|---|
| Pick the right color space for the operation | references/color-tools/color-spaces.md |
| Convert between hex/rgb/hsl/oklch, CSS syntax | references/color-tools/conversions.md |
| Pick or critique a harmony for a brand | references/color-tools/harmonies.md |
| Generate a 50–950 ramp (Tailwind/Radix style) | references/color-tools/ramps.md |
| Verify contrast / colorblind safety | references/color-tools/accessibility.md |
| Extract a palette from an image | references/color-tools/extraction.md |
| Mix colors, build tints/shades/tones | references/color-tools/mixing-and-modulation.md |
| Build a gradient that doesn't mud out | references/color-tools/gradients.md |
| Decide token names (semantic vs scale) | references/color-tools/naming.md |
Ship a tokens.css color system | references/color-tools/tokens-recipe.md |
| Sanity-check before declaring color work done | references/color-tools/pitfalls.md |
| Find what you need fast | references/color-tools/index.md |
OKLCH is perceptually uniform: equal Lightness steps look equal, Chroma is decoupled from Lightness, and Hue is stable as Lightness changes. Use OKLCH for ramps, mixing, and interpolation. Encode the final value as sRGB hex (or oklch() in CSS where browser support is acceptable — see conversions.md). Keep one source of truth: the OKLCH values in the token build, with hex emitted alongside for legacy contexts.
Why not HSL: HSL's L is luminance-incorrect (yellow at L=50 looks far brighter than blue at L=50), and a fixed-L hue sweep produces wildly uneven brightness. HSL is fine for casual UI tweaks; do not generate ramps or interpolate gradients in it.
shorter hue / longer hue.ramps.md).prefers-contrast and forced-colors. Tokens should degrade gracefully under Windows High Contrast and user-elevated contrast preferences (see tokens-recipe.md).OKLCH gets you to a defensible baseline. Final sign-off is still visual. After generating a ramp, view the swatches at the actual sizes they will appear (a 12px caption is not a 96px hero) and against the surfaces they will sit on. Perceptual math gets the math right; designers correct for context.
accessibility.md for thresholds and the source we align to.culori, colorjs.io, or hand-rolled OKLCH for /palette. Selection criteria in conversions.md — do not hard-pick one in generated code without confirming current maintenance status.All examples in references and generated outputs use these names. Do not invent parallel names.
--color-{hue}-{50..950} (e.g., --color-blue-500).--color-surface, --color-surface-elevated.--color-fg (and --color-fg-muted, --color-fg-subtle where needed).--color-border (and --color-border-strong).--color-brand, --color-ring.--color-success-*, --color-warning-*, --color-danger-*, --color-info-*.Semantic aliases reference scale tokens; dark mode redefines aliases, never the scale (see tokens-recipe.md).
Generate light and dark together. The dark variant is not invert(light) — it is a deliberately re-tuned set of L values (and often C values) on the same hue. See ramps.md for inversion strategies and the trade-offs between hue-preserving, chroma-preserving, and lightness-flipping approaches.
Stop when:
If any of these fails, return to the relevant reference and fix at that layer — do not patch downstream.
/palette-style workextraction.md if image, harmonies.md if mood.ramps.md.accessibility.md.ramps.md (Dark-mode inversion).naming.md, tokens-recipe.md.pitfalls.md.tokens.css. Print swatch + contrast preview to terminal.Skip steps only with a stated reason. Most "the palette feels off" reports trace to a skipped step 3 or 6.
Searches MemPalace before answering questions about past work, people, projects, or prior decisions. Returns verbatim stored content instead of guessing from model memory.
Guides Payload CMS config (payload.config.ts), collections, fields, hooks, access control, APIs. Debugs validation errors, security, relationships, queries, transactions, hook behavior.
Implements vector databases with Pinecone, Weaviate, Qdrant, Milvus, pgvector for semantic search, RAG, recommendations, and similarity systems. Optimizes embeddings, indexing, and hybrid search.
npx claudepluginhub shipiit/shipit-ui-design --plugin shipit-ui-design