Which frontend frameworks are supported by this skill?

The skill can generate component code and design tokens for Tailwind CSS, React, Vue, Svelte, and even mobile frameworks like SwiftUI and Flutter.

What is included in the generated output?

You receive a full specification including CSS custom properties, component variants, typography scales, spacing tokens, and framework-specific code snippets.

How does the design system ensure accessibility?

It enforces strict WCAG 2.2 AA compliance by validating contrast ratios for every palette and requiring reduced-motion fallbacks for all animations.

Can I use this for niche industries like Crypto or Healthcare?

Yes, the built-in reasoning engine includes specific rules and anti-patterns for 57 different industry sectors to ensure domain-appropriate aesthetics.

Universal Design System

Name: Universal Design System
Author: mkatogui

bymkatogui

•

Design Tools

Generates production-grade, accessible UI designs and component code using a data-driven reasoning engine tailored to 57 industry sectors.

The Universal Design System skill transforms Claude into a senior UI/UX architect capable of building governed brand foundations from scratch. It leverages a specialized BM25 reasoning engine to analyze your project's domain—such as fintech, healthcare, or SaaS—and instantly recommends optimized color palettes, typography pairings, and UI patterns. With support for 600+ W3C DTCG tokens and 43+ core components, it ensures every design is WCAG 2.2 AA compliant and ready for implementation in Tailwind CSS, React, Vue, or Svelte. This skill is ideal for developers who need to bridge the gap between low-fidelity ideas and high-fidelity, accessible production code.

Key Features

01BM25-powered reasoning for industry-specific design and palette selection

02Multi-framework component output including React, Vue, Svelte, and Tailwind CSS

039 structural palettes with automated light/dark mode and high-contrast support

041 GitHub stars

05Automated WCAG 2.2 AA accessibility validation and contrast ratio enforcement

06Extensive library of 600+ design tokens and 43+ production-ready UI components

Use Cases

01Building a data-dense fintech dashboard with enterprise-grade accessibility and typography

02Creating high-conversion SaaS landing pages with optimized hero sections and pricing tables

03Developing accessible educational apps with industry-standard patterns and mobile-responsive grids

Key Features

01BM25-powered reasoning for industry-specific design and palette selection

02Multi-framework component output including React, Vue, Svelte, and Tailwind CSS

039 structural palettes with automated light/dark mode and high-contrast support

041 GitHub stars

05Automated WCAG 2.2 AA accessibility validation and contrast ratio enforcement

06Extensive library of 600+ design tokens and 43+ production-ready UI components

Use Cases

01Building a data-dense fintech dashboard with enterprise-grade accessibility and typography

02Creating high-conversion SaaS landing pages with optimized hero sections and pricing tables

03Developing accessible educational apps with industry-standard patterns and mobile-responsive grids