Mk ui design system

Skill ngocsangyem/MeowKit/packages/mewkit/src/migrate/modules/codex/root/.agents/skills/mk-ui-design-system

Production ready. AI Agent Workflow System for Claude Code

Install

npx -y skills add ngocsangyem/MeowKit --skill mk-ui-design-system

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

15 stars15 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Design UI components/design systems, review visual design, check accessibility. Triggers: design system, color palette, font pairing, WCAG check. Data-driven: palettes, fonts, UX guidelines.

SKILL.md

3.0 KB, as published. Nobody here has run it

UI Design System

Data-driven design intelligence: curated palettes, font pairings, product recommendations, UX guidelines, accessibility standards, and quality checklists.

When to Use

Creating or reviewing UI components
Setting up a design system for a new project
Checking WCAG accessibility compliance
Selecting color palettes, typography, or UI styles
Choosing chart types for data visualization
Responsive design review

Process

Understand requirements — what product type? audience? style direction?
Look up design data — read references/data-lookup.md for how to query:
- Color palette → assets/colors.csv (161 WCAG-verified palettes by product type)
- Font pairing → assets/typography.csv (73 pairings with Google Fonts URLs)
- Product direction → assets/products.csv (161 types with style/dashboard/color recs)
- UX check → assets/ux-guidelines.csv (99 Do/Don't rules with severity)
- Chart type → assets/charts.csv (25 types with accessibility grades)
Apply design rules — load from references/ based on task:
- Visual design → references/design-patterns.md
- Accessibility → references/accessibility-standards.md
- Quality check → references/quality-checklist.md
Validate — run quality-checklist.md before handoff

Data Assets (NEW — v2.0)

File	Rows	Content
`assets/colors.csv`	160	WCAG-verified palettes by product type (hex values)
`assets/typography.csv`	73	Font pairings with mood, Google Fonts URLs, Tailwind config
`assets/products.csv`	161	Product type → style, landing pattern, dashboard, color focus
`assets/ux-guidelines.csv`	98	Do/Don't pairs with category + severity
`assets/charts.csv`	25	Data type → best chart, accessibility grade, library

See references/data-lookup.md for lookup patterns and examples.

Gotchas

Aesthetic over accessibility: beautiful design that fails WCAG → check contrast (4.5:1 normal, 3:1 large) before shipping
Desktop-first design: designing for large screens then cramming into mobile → start from 320px
Color-only communication: red/green for status → pair with icon or text label
Ignoring the data: guessing palette when colors.csv has WCAG-verified values → always look up first
Generic product assumptions: all SaaS looks the same → check products.csv for product-specific recommendations

Workflow Integration

Loaded by ui-ux-designer agent during Phase 3 (Build). Also used by developer agent for frontend work.