skills.rest
jg-chalk-io
jg-chalk-ioCOMMUNITY
Explore all skills by this author →
GitHub

moai-design-systems

Automate design system creation and validation with tokens, components, and WCAG 2.2 checks.

Updated Nov 24, 2025
Search Tags:#figma#wcag#storybook#design-tokens#component-library
One-click install
npx skills add https://github.com/jg-chalk-io/Nora-LiveKit --skill moai-design-systems
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: moai-design-systems
Source: https://github.com/jg-chalk-io/Nora-LiveKit/tree/main/.claude/skills/moai-design-systems
Command: npx skills add https://github.com/jg-chalk-io/Nora-LiveKit --skill moai-design-systems

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Enables building consistent, accessible UI with tokens, component libraries, and automated testing.

Core Features & Use Cases

  • Design Tokens: Centralize colors, spacing, typography for consistent UI.
  • Component Library: Atomic design patterns with accessible components.
  • Accessibility: WCAG 2.2 compliance with automated testing workflows.

Quick Start

Set up a tokens file and a basic component library; integrate WCAG checks into Storybook.

Frequently Asked Questions about moai-design-systems

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

FAQPage Schema
How do I set up design tokens for consistent UI across components?▼

Design tokens centralize colors, spacing, and typography as reusable values. Define tokens in a structured format, then use Style Dictionary to generate platform-specific outputs for your component library. This ensures consistency across all UI elements and makes global theme changes instant.

Can I automate WCAG 2.2 accessibility checks in my design system workflow?▼

Yes. Integrate axe DevTools and automated testing into Storybook to validate color contrast, keyboard navigation, and ARIA patterns against WCAG 2.2 standards. This catches accessibility issues early and prevents non-compliant components from reaching production.

What's the best way to sync design tokens from Figma to code?▼

Use Figma MCP with Style Dictionary to automate token export from Figma directly into your codebase. This eliminates manual sync steps, keeps design and code in alignment, and supports theming and token aliasing out of the box.

How do I build an atomic component library with accessibility built in?▼

Structure components using atomic design patterns with WCAG-compliant markup and ARIA attributes. Document each component in Storybook, then run automated accessibility tests to validate keyboard support and screen reader compatibility before publishing.

Do I need separate tools for tokens, components, and accessibility testing?▼

No. Style Dictionary handles tokens, Storybook serves as your component documentation and testing hub, and axe DevTools provides integrated accessibility validation. These tools work together in a single workflow rather than requiring separate systems.

Related Skills

Explore More Design & Creative Skills→
jleechanorgjleechanorg

design-md

Define and validate design tokens in a DESIGN.md file.

Official
Intermediate
Higashi-KotaHigashi-Kota

ui-theme

Generate CSS variables and Tailwind theme from JSON design tokens.

Community
Intermediate
ydnikolaevydnikolaev
8

ux-designer

Build cohesive design systems and token libraries for web and mobile projects.

Community
Intermediate
figmafigma
1.9k

implement-design

Translate Figma designs into UI code using design tokens and existing components.

Official
Advanced