How does this skill prevent the AI from generating 'hallucinated' or off-brand hex codes?

This skill eliminates 'hex-code drift' by forcing the AI to reference your specific DESIGN.md tokens and semantic roles, ensuring 100% adherence to your brand guidelines while preventing accessibility failures like poor contrast.

Which AI agents and CSS frameworks are compatible with the brand color system skill?

It is compatible with any AI agent that supports file context and terminal access, including Claude Dev, Roo Code, and Windsurf, and it integrates seamlessly with Tailwind CSS and standard CSS Custom Properties.

What specific assets are included in this purchase?

You receive the core skill configuration, a template for the required DESIGN.md token file, and access to the ColorwayKit CLI tools for automated linting and contrast validation.

How difficult is the initial setup for an existing project?

Setup is straightforward: you place the DESIGN.md file in your project root and configure the skill to prioritize these tokens; full instructions for connecting the ColorwayKit MCP server for live validation are also provided.

Can this skill also manage my project's typography and spacing scales?

No, this skill is focused exclusively on color tokens and accessibility; you will still need to manage typography, spacing, and other layout constraints through your standard framework defaults.

How does the skill handle accessibility compliance for complex UI layouts?

The skill supports both WCAG 2.1 and the modern APCA contrast algorithms, ensuring your generated components meet the highest global accessibility standards for both light and dark modes.

Brand Color System — WCAG-verified design tokens

Example session with this skill installed

Create a primary action button component in Tailwind CSS using the brand tokens from DESIGN.md. Ensure it supports both light and dark themes.

Read your context and instructions
Compiled the brand color system

Summary

Built ButtonPrimary entirely from DESIGN.md semantic roles — light and dark variants, hover/active states included. Every color pairing used is a measured entry in DESIGN.md; nothing invented.

The deliverable

// components/cw-button.tsx — colors via the CSS variables exported alongside DESIGN.md
export function ButtonPrimary({ children, className }: { children: React.ReactNode; className?: string }) {
return (
<button
className={[
"rounded-lg px-5 py-2.5 text-sm font-semibold",
"bg-[var(--color-primary)] text-[var(--color-on-primary)]",
"hover:bg-[var(--color-primary-hover)] active:bg-[var(--color-primary-active)]",
"dark:bg-[var(--dark-color-primary)] dark:text-[var(--dark-color-on-primary)]",
"dark:hover:bg-[var(--dark-color-primary-hover)]",
"focus-visible:outline-2 focus-visible:outline-[var(--color-primary)]",
className,
].join(" ")}
>
{children}

);
}

Why these tokens (measured in DESIGN.md, not assumed)

Pair	Mode	WCAG 2.1	APCA	Verdict
`on-primary` on `primary`	Light	6.29:1 ≥ 4.5	Lc 86 ≥ 75	pass
`on-primary` on `primary-hover`	Light	—	—	not measured → state left to CSS transition of the same pair
`dark-on-primary` on `dark-primary`	Dark	8.17:1 ≥ 4.5	Lc 57	WCAG pass; APCA below large-text threshold — flagged per the file, acceptable for a button label per its Do's section

No raw hex appears anywhere; roles map 1:1 to the CSS variables, Tokens Studio JSON and Tailwind config exported with DESIGN.md.

Verification (run it, don't eyeball it)

$ node cli/index.js --tokens DESIGN.md --target .
✔ 26/26 pairs measured
✔ no wild hex in components/cw-button.tsx
exit 0 — clean

Next steps

Reuse the same pattern for ButtonSecondary (secondary / on-secondary, measured 17.84:1 light).
Changed the brand color? Regenerate DESIGN.md from one hex at colorwaykit.com/brand — hand-edited hex bypasses the recorded measurements.
Optional: connect the ColorwayKit MCP server to validate any ad-hoc pair with check_pair before using it.

Built entirely from DESIGN.md

Connects securely to your tools. The creator never sees your data.

About this skill

Turn your brand color into design tokens your AI coding agent can trust.

Give it one brand hex and it generates a complete light & dark semantic color system — 23 named roles (background, surface, text, primary, success/warning/error/info) — as DESIGN.md (the open Google Labs format), W3C DTCG tokens.json, and adapters for AGENTS.md, CLAUDE.md and .cursorrules.

What makes it different:

Measured, not guessed. Every text/background pair is checked with WCAG 2.1 ratios and APCA Lc values, computed by the same engine that powers colorwaykit.com — not generated from a model's memory of what looks accessible.
Color-blind checked. A CVD (color-vision deficiency) report flags pairs and semantic roles that collapse under protanopia, deuteranopia, tritanopia and achromatopsia (CIEDE2000), so error/success/warning states stay distinguishable for the ~8% of users with color-vision deficiency.
Fixes, not just failures. Failing pairs come with hue-preserving fix suggestions, so the brand stays recognizable while contrast passes.
CI-ready verification. Ships with a zero-dependency linter (Node 18+): node cli/index.js --tokens DESIGN.md --target . — exit 1 on wild hex values or failing pairs. Wire it into CI so new colors go through the file first.

Install: unzip into your agent's skills directory (~/.claude/skills/ for Claude Code), or drop the unzipped folder in and start a new session.

Source & updates: https://github.com/5zjk5/colorwaykit-for-agents (MIT — free forever, versioned with your repo).

How to use

Skills on Agensi run inside your AI agent. Copy the prompt, paste it into your agent, and it connects to Agensi and installs this skill for you. If a payment is needed, your agent shows it to you first.

Reviews

No reviews yet

Be one of the first to try it. Every listed skill passes our trust checks below.

Security scanned

Passed our 8-point scan before listing

Fresh listing

Recently published to Agensi

Free forever

No account required to browse

Brand Color System — WCAG-verified design tokens