What is the BM25 reasoning engine?

It is a search-based logic system that queries 20+ databases to find the best-fit design patterns, font pairings, and components for your specific query.

How does it handle accessibility?

Every generated design is automatically validated against WCAG 2.2 AA standards, ensuring proper contrast ratios and reduced motion support.

Does it support dark mode?

Absolutely. All palettes include both light and dark mode configurations using standardized CSS custom properties.

Which frameworks does this skill support?

It generates code for React, Vue, Svelte, and Tailwind CSS, as well as mobile-ready specs for SwiftUI and Flutter.

Can I use it for specific industries like Fintech or Healthcare?

Yes, it includes 57 industry sectors with specialized palettes, components, and anti-pattern rules tailored to niche market needs.

Universal Design System

Name: Universal Design System
Author: mkatogui

bymkatogui

•

Design Tools

Generates production-ready, accessible UI systems and components using an AI-native reasoning engine for multiple frameworks.

The Universal Design System skill transforms Claude into a senior UI/UX engineer capable of building high-fidelity, governed brand foundations. By leveraging a BM25 reasoning engine across 20 specialized databases, it provides domain-specific guidance for 57 industry sectors, ensuring that every interface is optimized for its specific audience. The skill automates the creation of 600+ design tokens, WCAG 2.2 AA compliant palettes, and framework-ready code for React, Vue, Svelte, and Tailwind CSS. It is particularly useful for developers who need to move from a prompt to a structured, accessible, and scalable design system without manually configuring every style and constraint.

Key Features

01Strict governance rules that prevent common UX anti-patterns by industry

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

03BM25 reasoning engine that matches UI patterns to 57 industry sectors

049 structural palettes with automated WCAG 2.2 AA accessibility validation

051 GitHub stars

06600+ W3C DTCG tokens and 43+ production-grade component specs

Use Cases

01Developing data-dense fintech or healthcare dashboards with strict accessibility requirements

02Rapidly prototyping themed mobile app interfaces with consistent design tokens

03Building a high-conversion SaaS landing page with optimized typography and brand palettes

Key Features

01Strict governance rules that prevent common UX anti-patterns by industry

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

03BM25 reasoning engine that matches UI patterns to 57 industry sectors

049 structural palettes with automated WCAG 2.2 AA accessibility validation

051 GitHub stars

06600+ W3C DTCG tokens and 43+ production-grade component specs

Use Cases

01Developing data-dense fintech or healthcare dashboards with strict accessibility requirements

02Rapidly prototyping themed mobile app interfaces with consistent design tokens

03Building a high-conversion SaaS landing page with optimized typography and brand palettes