skills.rest
Emasoft
EmasoftCOMMUNITY
Explore all skills by this author →
Website𝕏@fmuaddibGitHub

amvcp-tokens-color

Generate OKLCh color ramps and semantic role-map CSS for UI elements.

Updated May 8, 2026
Search Tags:#color tokens#wcag contrast#oKLC h#role maps#badge colors#categorical hues
One-click install
npx skills add https://github.com/Emasoft/ai-maestro-visual-communicator-plugin --skill amvcp-tokens-color
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: amvcp-tokens-color
Source: https://github.com/Emasoft/ai-maestro-visual-communicator-plugin/tree/main/skills/amvcp-tokens-color
Command: npx skills add https://github.com/Emasoft/ai-maestro-visual-communicator-plugin --skill amvcp-tokens-color

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It solves inconsistent, hard-to-maintain UI colors by generating perceptually uniform ramps and deriving role-based foreground/background/border/icon token sets that stay readable across themes.

Core Features & Use Cases

  • OKLCh color ramp generation: create accessible, perceptually even ramps and optional P3 wide-gamut variants for accents.
  • Neutral scale from a single ink: derive a full gray family using color-mix so borders and text tones stay consistent.
  • Golden-angle categorical palettes: generate distinct hue sets for badges, activity states, graph nodes, and icon tints.
  • Semantic role maps: emit CSS for roles like MUST/IMO/Q/FYI, 7-state activity, 6 graph-node pipeline roles, and 6 icon tints via data-vc-role.
  • Derived token splitting: automatically compute fg/bg/border/icon splits from a single semantic role while flipping cleanly by theme.
  • WCAG contrast validation: check fg/bg pairs against WCAG AA thresholds before adopting the palette.

Quick Start

Use the skill to generate an OKLCh ramp for a seed accent, apply it to the engine’s 15 color roles, and inject the semantic role map CSS for badge, activity, graph-node, or icon-tint elements.

Frequently Asked Questions about amvcp-tokens-color

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate a WCAG-safe color palette with semantic role maps for UI components?▼

Generate WCAG-safe color palettes by creating an OKLCh color ramp from a seed accent, deriving neutral scales, and emitting semantic role map CSS that targets data-vc-role attributes for consistent visual tinting.

What is OKLCh color ramp generation and when do I need P3 wide-gamut variants?▼

OKLCh color ramp generation creates perceptually uniform color steps for accessible theme scales, while P3 wide-gamut variants provide expanded accent color ranges for displays supporting broader color spaces.

How do I create distinct categorical hue sets for badges, graph nodes, and activity states?▼

Create distinct categorical hue sets by applying golden-angle categorical palette generation, which produces visually separated hues for badges, activity states, pipeline graph nodes, and icon tints.

Can I derive a full neutral scale from a single ink color for borders and text?▼

You can derive a full gray neutral scale from a single ink color using color-mix, ensuring that border tones and text colors remain visually consistent across different UI themes.

How do I automatically split a semantic role into foreground, background, border, and icon tokens?▼

Automatically split semantic roles into fg, bg, border, and icon tokens using derived token splitting, which computes the individual color sets while ensuring they flip cleanly between light and dark themes.

Does this approach check WCAG contrast thresholds before applying badge and icon tint colors?▼

The approach checks WCAG contrast by validating foreground and background color pairs against WCAG AA thresholds before adopting the palette, ensuring badge, activity, and icon tinting remain readable.

Related Skills

Explore More Design & Creative Skills→
dylantarredylantarre
38

color-scale

Generate 11-step OKLCH color scales from a base hex color.

Community
Basic
compozycompozy
2.5k

tailwindcss

Apply Tailwind CSS v4 design tokens and responsive utilities to UI components.

Official
Advanced
thrillmadethrillmade
1

oklch-color-space

Generate OKLCH colors meeting APCA contrast targets for design tokens.

Official
Advanced
evolv3aievolv3ai
3

color-palette

Generate 11-shade color palettes with WCAG contrast checks and Tailwind v4 @theme syntax.

Community
Intermediate