ux-color-system
✓Fantasy-themed color tokens and semantic color usage. Use when applying colors, creating themes, or ensuring color accessibility. Covers surface/text relationships, state colors, and dark theme patterns. (project)
Installation
SKILL.md
Semantic color architecture for the Fantasy Phonics game. Uses CSS custom properties for maintainable, accessible theming.
| --theme-on-surface on --theme-surface | 12.5:1 | AAA | | --theme-on-surface-variant on --theme-surface | 4.8:1 | AA | | --theme-primary on --theme-surface | 7.2:1 | AAA | | --color-success on --theme-surface | 6.1:1 | AA |
This project uses dark theme as default. If adding light theme:
Fantasy-themed color tokens and semantic color usage. Use when applying colors, creating themes, or ensuring color accessibility. Covers surface/text relationships, state colors, and dark theme patterns. (project) Source: matthewharwood/fantasy-phonics.
Facts (cite-ready)
Stable fields and commands for AI/search citations.
- Install command
npx skills add https://github.com/matthewharwood/fantasy-phonics --skill ux-color-system- Category
- *Creative Media
- Verified
- ✓
- First Seen
- 2026-02-01
- Updated
- 2026-02-18
Quick answers
What is ux-color-system?
Fantasy-themed color tokens and semantic color usage. Use when applying colors, creating themes, or ensuring color accessibility. Covers surface/text relationships, state colors, and dark theme patterns. (project) Source: matthewharwood/fantasy-phonics.
How do I install ux-color-system?
Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.) Copy and run this command: npx skills add https://github.com/matthewharwood/fantasy-phonics --skill ux-color-system Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code or Cursor
Where is the source repository?
https://github.com/matthewharwood/fantasy-phonics
Details
- Category
- *Creative Media
- Source
- skills.sh
- First Seen
- 2026-02-01