Agent Skills
› mtarcure/claude-vibe-squad
› color-theory
color-theory
GitHub用于构建可复用视觉配色系统的技能，涵盖色彩和谐、语义角色分配、无障碍对比度检查及多状态设计，确保系统级色彩规范。
Trigger Scenarios
需要设计或重构应用配色方案
构建支持亮暗模式的UI令牌系统
解决色彩无障碍访问性问题
Install
npx skills add mtarcure/claude-vibe-squad --skill color-theory -g -y
SKILL.md
Frontmatter
{
"name": "color-theory",
"audience": "specialist",
"description": "Use when constructing a reusable palette for a visual system: choose a harmony, assign semantic roles and light\/dark token values, account for brand and cultural meaning plus color-vision deficiency, and ensure interaction states never rely on hue alone. Not for measuring an existing interface against an accessibility standard."
}
Color Theory
Choose and justify a color system for a design by mechanism — harmony, contrast, and meaning — not by taste alone.
Steps
- State the job the palette must do: hierarchy, mood, brand fit, and any accessibility target.
- Build the palette from a defined relationship (complementary, analogous, triadic, mono) plus neutrals; give each role a name (primary/accent/surface/text), not just a hex.
- Check contrast for every text/background pair against the WCAG target (hand off measurement to
wcag-conformance-audit); never ship a pair on vibes. - Account for color meaning/culture and color-vision deficiency; ensure no state is encoded by hue alone.
- Define the palette as tokens with light/dark values so the system, not a one-off, carries the color.
Acceptance
- Each color has a named role and a stated relationship to the others.
- Every text/background pair meets the declared contrast target; no hue-only signaling.
- The palette is expressed as reusable tokens, not scattered hex values.
Version History
- d5262e2 Current 2026-09-11 11:47
