Audits React and JSX/TSX components for design system drift, component duplication, repeated inline JSX, conflicting Tailwind classes, and accessibility/contrast violations, providing automated fixes.
Detects the presence of shadcn/ui component libraries and prevents agents from rebuilding custom modal, dialog, or sheet components, encouraging reuse of existing catalog components.
Extracts design tokens from Tailwind CSS v3 and v4 configurations (including @theme, @utility), enforces the 4px spacing grid, and detects and optimizes conflicting or arbitrary Tailwind utility classes.
This server does not currently have a deployable release on Glama. Follow the repository's setup instructions to install and configure it for your MCP client, including any required credentials and local dependencies.
The local-first frontend quality and verification layer for AI coding agents (Cursor, OpenCode, Claude Code, Windsurf, Codex).
Read the Complete Usage & Setup Guide (USAGE.md)
AI coding assistants generate React and Tailwind code rapidly, but frequently introduce silent frontend quality degradation:
Design System Drift: Hardcoding arbitrary colors (#1e293b) or off-grid pixel values (p-[18px], m-[13px]) instead of adhering to project tokens.
Component Duplication & Primitive Monoliths: Rebuilding raw primitive tags (<button className="...">, <input ...>) rather than reusing existing catalog components (e.g. Button, Input, Dialog).
Repeated Inline JSX: Copy-pasting complex composite JSX structures (e.g., status badges or metric cards) instead of extracting reusable components.
Tailwind Class Bloat & Conflicts: Adding contradictory classes (flex block, text-left text-center, p-4 px-6).
Accessibility & Contrast Violations: Low-contrast text combinations failing WCAG 2.1 AA ($< 4.5:1$), unlabelled inputs, or missing image alt attributes.
UI Keeper solves this by providing a comprehensive static analysis, design token extraction, component discovery, and automated verification layer accessible via the Model Context Protocol (MCP) and a high-performance CLI.
Related MCP server: ui-assert
graph TD
Agent[AI Agent: Cursor / OpenCode / Claude] -->|MCP JSON-RPC| UIKeeper[UI Keeper Engine]
UIKeeper -->|Extract| DS[Design Tokens & Catalog]
UIKeeper -->|Analyze| AST[TypeScript AST Scanner]
AST -->|Audit| Rules[7 Static UI Quality Rules]
Rules -->|Verify| Loop[Detect -> Fix -> Re-audit Loop]
Loop -->|Report| Score[UI Health Score: 0-100%]Discovers and extracts tokens across CSS files (globals.css, token.css, theme.css).
Full support for Tailwind CSS v3 (tailwind.config.ts/js) and Tailwind CSS v4 (@import "tailwindcss", @theme, @utility, @plugin).
Extracts colors (hex, rgb, hsl, oklch), 4px spacing scale, typography, radii, shadows, and breakpoints.
Scans .tsx/.jsx files across components/, src/components/, app/components/, ui/, src/ui/.
Extracts exported component names, prop types, variants, and categories (button, card, input, modal, navigation, layout, feedback, typography).
Prevents agents from reinventing already existing components.
Rule ID | Name | Description |
| No Hardcoded Colors | Flags raw hex/rgb/hsl strings and maps them to nearest design system color tokens. |
| Strict 4px Spacing Grid | Enforces the 4px base spacing scale. Converts rems, checks radii, and fixes brackets (e.g. |
| No Duplicate Components | Detects raw primitive tags when a matching catalog component exists. |
| Repeated JSX Detector | Identifies identical monolithic JSX structural patterns repeated 2+ times and recommends extraction. |
| Class Conflict Optimizer | Detects contradictory Tailwind layout, typography, or spacing classes and prunes redundancy. |
| WCAG Contrast Checker | Calculates static relative luminance and flags contrast ratios failing WCAG AA ($< 4.5:1$). |
| Library Component Guard | Prevents building custom modal/dialog/sheet code when libraries like |
Applies automated fixes and immediately verifies them:
Detect: Audits the file and records baseline issue count.
Fix: Applies high-confidence token substitutions and class optimizations.
Re-audit: Re-analyzes the modified file.
Decision: Keeps changes only if total issues decrease; automatically reverts on regression.
Calculates a weighted UI Health Score:
Token Adoption (35%): Adherence to colors, radii, and 4px spacing grid.
Component Reuse (35%): Catalog usage and absence of monolithic JSX duplicates.
Code Cleanliness (30%): Absence of class conflicts and WCAG contrast violations.
Outputs an overall score with letter grade (A+, A, B, C, D, F) and actionable recommendations.
UI Keeper exposes 10 standardized MCP tools compatible with any MCP client:
Tool Name | Scope | Description | Key Parameters |
| Local / Project | Extracts design tokens (colors, spacing, typography, radius, shadows, breakpoints). |
|
| Local / Project | Returns complete project UI model (framework, styling engine, tokens, catalog, routes). |
|
| Local / Project | Audits target files/directories against design system rules with issue locations and fixes. |
|
| Edge / Remote | Audits raw TSX/JSX source code directly without requiring local disk access. |
|
| Edge / Remote | Parses tokens directly from raw CSS string content (e.g. from |
|
| Local / Project | Returns comprehensive 0-100% UI health score, letter grade, and recommendations. |
|
| Any | Generates production-ready, typed, token-compliant React component code. |
|
| Local / Project | Searches existing catalog components by keyword or category to avoid duplicate code. |
|
| Any | Finds the exact or closest matching design token for a given color or spacing value. |
|
| Local / Project | Applies automated fixes and verifies improvement using the verification loop. |
|
The repository is structured as a modular TypeScript monorepo:
ui-keeper/
├── packages/
│ ├── core/ # @ui-keeper/core (Domain schemas, AST scanners, token parsers, 7 audit rules, auto-fix loop)
│ ├── cli/ # @ui-keeper/cli (Command-line tool: init, analyze, audit, fix, score, generate, hook)
│ └── local-mcp/ # @ui-keeper/local-mcp (Local Stdio MCP server for direct filesystem access)
└── apps/
└── remote-mcp/ # @ui-keeper/remote-mcp (Cloudflare Workers edge MCP server built with Hono)For full step-by-step installation, client configuration (OpenCode, Cursor, Claude, Windsurf), CLI references, and Git pre-commit hook setups, read USAGE.md.
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
Loading tool schema changelog…
This server cannot be deployed
Run accessibility, contrast, and design token audits and file QA issues from your AI coding tool.
Live React design-system APIs, patterns, and code validation so AI agents build real UI, not slop.
Scores your code across 12 areas, with findings, fix prompts, and re-assessment in your AI agent
On-demand drift checks: declared CSS color, radius, spacing & type vs your own tokens or a pack
