BeClaude

ux-skill

New
18GitHub TrendingGeneralby Laith0003

Design intelligence engine for AI coding. 120 anti-pattern linter rules, 110 brand DESIGN.md specs, MCP server, 22 commands, 17 IDEs, 17 languages. MIT.

First seen 5/24/2026

Summary

md specs to ensure UI consistency and accessibility.

  • It integrates with MCP servers, supports 17 IDEs and 17 languages, and provides 22 commands for linting, generating, and auditing design systems.
  • This skill helps developers catch design issues early and maintain brand alignment without leaving the code editor.

Install & Usage

1
Open your MCP config
~/.claude.json
2
Add the server config

Add the configuration to "mcpServers": { "ux-skill": { "command": "...", "args": [] } }

3
Restart Claude Code
/mcp

Use Cases

Lint a React component for accessibility anti-patterns and get fix suggestions.
Generate a brand-aligned color palette from a DESIGN.md spec for a new project.
Audit an entire codebase for design system violations across multiple files.
Create a new component following the brand's design tokens and spacing rules.
Check a pull request for design regressions before merging.
Convert a Figma design token export into CSS custom properties matching the brand spec.

Usage Examples

1

/ux-skill lint src/components/Button.tsx --fix

2

Audit the current project for design anti-patterns and output a report.

3

Generate a new Card component following the brand DESIGN.md spec.

View source on GitHub
designmcp

Security Audits

LicenseUnknownSourceWarnRepositoryPass

Frequently Asked Questions

What is ux-skill?

The UX Skill is a design intelligence engine that enforces 120 anti-pattern rules and 110 brand DESIGN.md specs to ensure UI consistency and accessibility. It integrates with MCP servers, supports 17 IDEs and 17 languages, and provides 22 commands for linting, generating, and auditing design systems. This skill helps developers catch design issues early and maintain brand alignment without leaving the code editor.

How to install ux-skill?

To install ux-skill: open your mcp config (~/.claude.json), then add the config to "mcpServers": { "ux-skill": { "command": "...", "args": [] } }. Finally, /mcp in Claude Code.

What is ux-skill best for?

ux-skill is a mcp categorized under General. It is designed for: design, mcp. Created by Laith0003.

What can I use ux-skill for?

ux-skill is useful for: Lint a React component for accessibility anti-patterns and get fix suggestions.; Generate a brand-aligned color palette from a DESIGN.md spec for a new project.; Audit an entire codebase for design system violations across multiple files.; Create a new component following the brand's design tokens and spacing rules.; Check a pull request for design regressions before merging.; Convert a Figma design token export into CSS custom properties matching the brand spec..