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.
Make AI-built interfaces look designed and pass accessibility: WCAG contrast (computed from Tailwind class pairs), a11y failures, design-token sprawl and the visual tells of generated UI, for any web stack.
An agent skill plus an MCP server in one package. The skill tells your coding agent what slop to avoid; the MCP tools then deterministically verify the result, so the agent can't just claim it's done.
Works with Claude Code, Claude Desktop, Codex and Antigravity.
Rule | Severity | Catches |
| ERROR | Text/background pair fails WCAG AA contrast. |
| ERROR | Image without alt. Describe it, or use alt="" for purely decorative images. |
| ERROR | onClick on a non-interactive element: unreachable by keyboard and screen readers. Use or . |
| ERROR | Icon-only button/link has no accessible name. Add aria-label. |
| ERROR | Focus outline removed without a replacement. Keep a visible focus-visible style (ring/outline) for keyboard users. |
| ERROR | Pinch-zoom disabled. Low-vision users need zoom; remove user-scalable=no / maximum-scale=1. |
| ERROR | Positive tabindex scrambles keyboard order. Use 0 or -1 and fix the DOM order instead. |
| ERROR | Text below 12px is unreadable on most screens. Use 12px+ (14px+ for body copy). |
| WARN | Emoji used as UI iconography reads as a generated template. Use the project's icon set (or nothing). |
| WARN | Gradient-filled headline text is the default AI landing-page look and often fails contrast. Use a solid token color. |
| WARN | Frosted-glass card (bg-white/10 + backdrop-blur) is a generated-UI tell and hurts legibility. Use a solid surface token. |
| WARN | transition-all animates layout properties and causes jank. Transition specific properties (colors, opacity, transform). |
| WARN | 100vh overflows behind mobile browser toolbars. Use min-h-dvh / min-h-svh (100dvh). |
| WARN | z-index in the hundreds/thousands signals a stacking-context fight. Define a small z-index scale. |
| WARN | !important override. Fix specificity or layer order (@layer) instead. |
| WARN | Bouncing/pinging attention animation on UI. Draw attention with hierarchy, and respect prefers-reduced-motion. |
| WARN | Input labelled only by its placeholder (disappears on typing, low contrast). Add a or aria-label. |
LOW_CONTRAST_TEXT resolves text-*/bg-* pairs in the same class string against the Tailwind v4 palette and computes the real WCAG ratio for light and dark: variants, suggesting the nearest passing shade. Translucent backgrounds are skipped (unknown backdrop); check those with check_contrast.
Rules marked ERROR make the audit return status: "FAIL"; WARN is reported but does not fail.
Related MCP server: ui-assert
# Claude Code
claude mcp add ui-unslop -s user -- npx -y ui-unslop-mcp
# Codex
codex mcp add ui-unslop -- npx -y ui-unslop-mcpClaude Desktop (~/Library/Application Support/Claude/claude_desktop_config.json) and Antigravity (~/.gemini/config/mcp_config.json):
{
"mcpServers": {
"ui-unslop": {
"command": "npx",
"args": ["-y", "ui-unslop-mcp"]
}
}
}Restart the app afterwards.
npx -y ui-unslop-mcp install-skills # clients that are installed
npx -y ui-unslop-mcp install-skills --all # every locationClient | Location |
Claude Code |
|
Codex |
|
Antigravity |
|
Claude Desktop has no skills folder, so it receives the rules through the MCP prompt and the load_*_rules tool.
Kind | Name | Purpose |
Prompt |
| The full skill text, for GUI clients |
Tool |
| Returns the full ui-unslop ruleset. Call before writing code if the ui-unslop skill is not already loaded. |
Tool |
| Deterministically scans markup and stylesheets for UI slop and accessibility failures: low-contrast Tailwind text/background pairs, images without alt, clickable divs, unlabelled icon buttons, removed focus rings, disabled zoom, positive tabindex, tiny text, emoji icons, gradient text, glassmorphism, transition-all, 100vh, z-index wars and placeholder-only labels. Accepts files or directories; with no files it audits the git working-tree changes. Suppress a verified false positive with a |
Tool |
| Computes WCAG 2.x contrast ratios. Colors may be #hex, rgb(), hsl(), oklch(), CSS names or Tailwind v4 palette names (slate-400, text-slate-400/80). Returns AA/AAA pass and, for Tailwind colors, the nearest passing shade. Use it before choosing text, border and focus colors. |
Tool |
| Inventories hardcoded design values across stylesheets and markup: distinct colors, font sizes, radii, shadows, z-indexes, font families and off-grid spacing. Flags sprawl beyond a coherent system so you consolidate into tokens instead of inventing more one-offs. |
File paths resolve against the server's working directory and cannot escape it. Directories honour .gitignore and skip node_modules, build output and minified files.
The same audit runs without an agent. It exits 1 on any ERROR, so it works as a pre-commit hook or CI step:
npx -y ui-unslop-mcp audit # git working-tree changes
npx -y ui-unslop-mcp audit src app # files or directories
npx -y ui-unslop-mcp audit src --json # machine-readable
npx -y ui-unslop-mcp rules # list every ruleThe checks are regex and structure based: fast, offline and predictable, but heuristic. For a verified false positive, add a comment on the line or the line above, with a reason:
// unslop-ignore LOW_CONTRAST_TEXT -- why this is safe hereSuppressions without a reason are reported as SUPPRESSION_WITHOUT_REASON errors, and every honoured suppression is listed in the audit output so reviewers can see it.
The agent loads the skill and writes code under its constraints.
Before finishing, the skill requires the audit and verification tools.
On FAIL, the agent fixes every finding and re-runs until PASS. Missing toolchains are reported as SKIPPED, never as passing.
All share the engine in unslop-core.
git clone https://github.com/fikrifirmanf/ui-unslop-mcp
cd ui-unslop-mcp && npm install
npm test # every rule is checked against its good/bad examples
node src/server.mjs # speaks MCP over stdioMIT © Fikri Firman Fadilah
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.
On-demand drift checks: declared CSS color, radius, spacing & type vs your own tokens or a pack
Website checker for AI coding agents. Measures your site in a real browser, with evidence.
Give your agent a real design system: tokens, measured WCAG contrast, and rules to follow.
