Claude Skills · UI Design
Dark mode
Plan and review a dark mode theme: surfaces, elevation, colour mapping, contrast and images. Use when adding or fixing dark mode.
Install this skill
curl -fsSL https://uxmate.co.in/skill-files/install.sh | bash -s -- uxm-dark-modeOr unzip into ~/.claude/skills/. Then ask Claude Code to do the task, or call /uxm-dark-mode.
What is inside
---
name: uxm-dark-mode
description: Plan and review a dark mode theme: surfaces, elevation, colour mapping, contrast and images. Use when adding or fixing dark mode.
---
# Dark mode
1. Audit the current colour tokens.
2. Define surface layers (background, surface, raised) with lighter surfaces for higher elevation, avoiding pure black (#000) and pure white text; use off-white around 87% opacity for body text.
3. Desaturate bright brand colours for dark backgrounds and recheck contrast (4.5:1 text, 3:1 UI).
4. Rules for borders, shadows (use borders/overlays rather than heavy shadows), images, charts and illustrations.
5. Implementation: CSS custom properties with prefers-color-scheme and a manual toggle that persists the choice; avoid flash on load.
Output token mapping table and a test checklist.More UI Design skills
- Design tokens · Define design tokens (colour, type, spacing, radius, shadow, motion) and output them as JSON and CSS variables.
- Colour palette · Generate an accessible colour palette with scales, semantic colours and contrast results.
- Type scale · Create a typographic scale with font pairing, sizes, line heights and responsive rules.
- Component spec · Write a complete UI component specification with anatomy, variants, states, behaviour and accessibility.