skills.rest
yekinya
yekinyaCOMMUNITY
Explore all skills by this author →
GitHub

moai-domain-brand-design

Generates WCAG-compliant design tokens and component specifications from brand identity files.

2|Updated May 27, 2026
Search Tags:#typography#accessibility#brand identity#color palette#design tokens#tailwind css#wcag
One-click install
npx skills add https://github.com/yekinya/moai-novel --skill moai-domain-brand-design-yekinya
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: moai-domain-brand-design
Source: https://github.com/yekinya/moai-novel/tree/main/moai-novel/.claude/skills/moai-domain-brand-design
Command: npx skills add https://github.com/yekinya/moai-novel --skill moai-domain-brand-design-yekinya

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Translating a brand identity document into consistent, accessible design tokens and component specs is error-prone and often produces contrast failures or inconsistent spacing. This Skill extracts structured design tokens from a visual identity file and enforces WCAG 2.1 AA contrast, hero-first layout chaining, and performance budgets automatically. ## Core Features & Use Cases - Design Token Extraction: Outputs color, typography, spacing, radius, and shadow tokens as structured JSON compatible with CSS custom properties and Tailwind CSS v4. - WCAG 2.1 AA Enforcement: Validates every color combination against contrast ratio requirements and halts with a conflict report (including three passing alternatives) when brand colors fail. - Component Specifications: Defines button, card, navigation, and section layout specs with states, sizes, and responsive grid rules. - Use Case: After completing a brand interview that produces visual-identity.md, run this Skill to generate a complete token set and component spec for a marketing site, catching a failing primary-color contrast pair before any code is written. ## Quick Start Generate design tokens and component specifications from my visual-identity.md file and verify all color pairs pass WCAG AA contrast.

Frequently Asked Questions about moai-domain-brand-design

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

FAQPage Schema
How do I generate design tokens from a brand identity file?▼

Provide a visual-identity.md file with no unresolved _TBD_ markers, and the Skill extracts color, typography, spacing, radius, and shadow tokens. Output is structured JSON compatible with CSS custom properties and Tailwind CSS v4 theme configuration.

How to check brand colors for WCAG AA contrast compliance?▼

The Skill validates every color pair against WCAG 2.1 AA ratios: 4.5:1 for body text, 3:1 for large text and UI components. Failing pairs halt execution and return a report with the actual ratio and three alternative foreground colors that pass.

Does this design skill support Figma integration?▼

Figma integration is disabled by default. When figma.enabled is set to true in design.yaml and a public Figma file URL is provided, tokens are extracted from Figma; otherwise visual-identity.md remains the sole source of truth.

What happens when brand colors conflict with generated design tokens?▼

Execution halts and returns a BRAND_DESIGN_CONFLICT report listing the defined color, the generated token, the conflict explanation, and two to three resolution options. Fallback colors are never generated silently.

What are the limitations of automated design token generation?▼

The Skill requires a complete visual-identity.md as input and cannot proceed with unresolved _TBD_ markers. It also rejects common generic patterns like default purple gradients and uncustomized stock icon sets unless the brand explicitly justifies them.

Related Skills

Explore More Design & Creative Skills→
modu-aimodu-ai
4

moai-domain-brand-design

Extract brand design tokens from visual-identity.md and enforce WCAG 2.1 AA accessibility.

Official
Advanced
TavokAITavokAI

tailwind-design-system

Create scalable design systems with Tailwind CSS v4 using CSS-first configuration.

Official
Advanced
mxyhimxyhi
467

audit

Audit interface quality across accessibility, performance, theming, and responsive design.

Community
Advanced
aramark-destinationsaramark-destinations

create-brand-tokens

Create or update a tokens.css file with only brand tokens differing from root defaults.

Official
Advanced