skills.rest
bbbang105
bbbang105COMMUNITY
Explore all skills by this author →
WebsiteGitHub

moai-domain-brand-design

Generate design tokens from brand identity files with WCAG 2.1 AA compliance.

Updated Aug 27, 2026
Search Tags:#design#accessibility#UI#design tokens#web design#brand#visual-identity
One-click install
npx skills add https://github.com/bbbang105/flowershop-admin --skill moai-domain-brand-design-bbbang105
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: moai-domain-brand-design
Source: https://github.com/bbbang105/flowershop-admin/tree/main/.claude/skills/moai-domain-brand-design
Command: npx skills add https://github.com/bbbang105/flowershop-admin --skill moai-domain-brand-design-bbbang105

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill enables the development of brand-aligned visual design systems that ensure accessibility, consistency, and scalability across web projects.

Core Features & Use Cases

  • Design Token Extraction: Derives colors, typography, spacing, and component styles from brand identity files.
  • Accessibility Compliance: Enforces WCAG 2.1 AA contrast ratios and Lighthouse performance standards.
  • Use Case: A frontend team needs a unified style guide matching a new brand identity. Use this Skill to generate design tokens that reflect accessibility and brand consistency, streamlining development.

Quick Start

Refer to brand identity documentation, confirm visual identity files are complete, and run this Skill to produce a comprehensive design token set for your project.

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 brand identity files for web projects?▼

Generate design tokens from brand identity files by running this Skill to extract colors, typography, spacing, and component styles into a unified style guide for frontend development.

How do I ensure my web design system meets WCAG 2.1 AA accessibility standards?▼

Ensure web design system accessibility compliance by using this Skill to enforce WCAG 2.1 AA contrast ratios and Lighthouse performance standards automatically during visual token generation.

Do I need visual identity files to create a consistent brand visual system?▼

Yes, you need complete visual identity files and brand design guidelines as input to extract accurate design tokens and ensure brand consistency across your web project.

What is the best way to scale a brand visual identity into frontend component specifications?▼

The best way to scale brand visual identity into frontend components is to generate a comprehensive design token set that reflects accessibility standards and brand consistency for development.

Can I use this Skill to enforce Lighthouse performance standards for UI design?▼

Yes, you can use this Skill to enforce Lighthouse performance standards alongside WCAG 2.1 AA contrast ratios when generating design tokens and UI component design specifications.

Why does my design system lack consistency across different web project themes?▼

Your design system lacks consistency because it does not use unified design tokens derived from brand identity files, which this Skill generates to ensure scalability and theme integration.

Related Skills

Explore More Design & Creative Skills→
HarshodaiHarshodai

brand

Validate brand assets against color palettes and naming conventions.

Community
Advanced
algusaemalgusaem

tailwind-design-system

Build Tailwind CSS design systems with semantic tokens and CVA-based components.

Community
Intermediate
fiftynotaififtynotai
10

ui-design

Generate accessible UI component specifications with WCAG 2.1 AA contrast ratios.

Community
Intermediate
fikriaffikriaf

design-md

Validate DESIGN.md files against Google's spec and check WCAG contrast.

Community
Advanced