How do I use ui-unslop-mcp?

1. Click on "Deploy Server". 2. Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state. 3. In the chat, type @ followed by the MCP server name and your instructions, e.g., "@ui-unslop-mcp Audit my components for WCAG contrast and a11y errors before I ship." That's it! The server will respond to your query, and you can continue using it as needed. Here is a step-by-step guide with screenshots.

ui-unslop-mcp

by fikrifirmanf

Overview Schema Source Related Servers Discussions Admin

JavaScript

Local

ui-unslop-mcp

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.

npm License: MIT MCP

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.

What it catches

Rule	Severity	Catches
`LOW_CONTRAST_TEXT`	ERROR	Text/background pair fails WCAG AA contrast.
`IMG_WITHOUT_ALT`	ERROR	Image without alt. Describe it, or use alt="" for purely decorative images.
`CLICKABLE_NON_INTERACTIVE`	ERROR	onClick on a non-interactive element: unreachable by keyboard and screen readers. Use or .
`ICON_ONLY_CONTROL_UNLABELLED`	ERROR	Icon-only button/link has no accessible name. Add aria-label.
`FOCUS_INDICATOR_REMOVED`	ERROR	Focus outline removed without a replacement. Keep a visible focus-visible style (ring/outline) for keyboard users.
`ZOOM_DISABLED`	ERROR	Pinch-zoom disabled. Low-vision users need zoom; remove user-scalable=no / maximum-scale=1.
`POSITIVE_TABINDEX`	ERROR	Positive tabindex scrambles keyboard order. Use 0 or -1 and fix the DOM order instead.
`TINY_TEXT`	ERROR	Text below 12px is unreadable on most screens. Use 12px+ (14px+ for body copy).
`EMOJI_AS_ICON`	WARN	Emoji used as UI iconography reads as a generated template. Use the project's icon set (or nothing).
`GRADIENT_TEXT`	WARN	Gradient-filled headline text is the default AI landing-page look and often fails contrast. Use a solid token color.
`GLASSMORPHISM_CARD`	WARN	Frosted-glass card (bg-white/10 + backdrop-blur) is a generated-UI tell and hurts legibility. Use a solid surface token.
`TRANSITION_ALL`	WARN	transition-all animates layout properties and causes jank. Transition specific properties (colors, opacity, transform).
`FULL_VIEWPORT_HEIGHT`	WARN	100vh overflows behind mobile browser toolbars. Use min-h-dvh / min-h-svh (100dvh).
`Z_INDEX_ARMS_RACE`	WARN	z-index in the hundreds/thousands signals a stacking-context fight. Define a small z-index scale.
`IMPORTANT_OVERRIDE`	WARN	!important override. Fix specificity or layer order (@layer) instead.
`ATTENTION_ANIMATION`	WARN	Bouncing/pinging attention animation on UI. Draw attention with hierarchy, and respect prefers-reduced-motion.
`PLACEHOLDER_AS_LABEL`	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

Quick start

1. Add the MCP server

# Claude Code
claude mcp add ui-unslop -s user -- npx -y ui-unslop-mcp

# Codex
codex mcp add ui-unslop -- npx -y ui-unslop-mcp

Claude 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.

2. Install the bundled skill

npx -y ui-unslop-mcp install-skills        # clients that are installed
npx -y ui-unslop-mcp install-skills --all  # every location

Client	Location
Claude Code	`~/.claude/skills/`
Codex	`~/.codex/skills/`
Antigravity	`~/.gemini/config/skills/` (and `~/.gemini/antigravity/skills/` if present)

Claude Desktop has no skills folder, so it receives the rules through the MCP prompt and the load_*_rules tool.

MCP surface

Kind	Name	Purpose
Prompt	`ui-unslop`	The full skill text, for GUI clients
Tool	`load_ui_unslop_rules`	Returns the full ui-unslop ruleset. Call before writing code if the ui-unslop skill is not already loaded.
Tool	`audit_ui_slop`	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 `unslop-ignore RULE_ID -- reason` comment on or above the line.
Tool	`check_contrast`	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	`analyze_design_tokens`	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.

CLI and CI

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 rule

Suppressing a false positive

The 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 here

Suppressions 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.

How it works

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.

The unslop family

All share the engine in unslop-core.

Development

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 stdio

License

This server cannot be deployed

Shareable, User-Owned Context BackendPeople, applications, and agents read, write, and coordinate together in one context lake. Reach it over MCP, a CLI, a Python SDK, or REST.fulcradynamics.comAd

Maintenance

ActivityMaintained

ResponsivenessNo issues

Resources

GitHub Repository

Need Help?

Related Servers

Related MCP Connectors

OverlayQA AOAuth
com.overlayqa
Run accessibility, contrast, and design token audits and file QA issues from your AI coding tool.
421
validator
dev.swatchdog
On-demand drift checks: declared CSS color, radius, spacing & type vs your own tokens or a pack
Design Tools Developer Tools
26
UXMachine AOAuth
io.github.qtorb
Website checker for AI coding agents. Measures your site in a real browser, with evidence.
Browser Automation Testing & QA Tools
41
CSS Crème A
com.csscreme
Give your agent a real design system: tokens, measured WCAG contrast, and rules to follow.
Design Tools Developer Tools
131

Related MCP Servers

UI Keeper
Developer Tools Code Analysis Testing & QA Tools
PankajKumar1947
F
license
Not graded
quality
B
maintenance
Enables AI coding agents to inspect a project's design tokens and component catalog, audit React/Tailwind files against seven static UI quality rules, score overall UI health, and apply auto-fixes that are re-audited and reverted on regression. It works both locally over filesystem access and remotely on raw TSX/JSX or CSS snippets passed directly as strings.
Updated a month ago (2026-09-14 06:54 UTC)
-
ui-assert
Testing & QA Tools Developer Tools
Aakashpai
A
license
Not graded
quality
B
maintenance
Enables coding agents and CI to verify rendered web UIs against design token usage, layout constraints, and accessibility rules, returning concise pass/fail verdicts with actionable findings.
Updated a month ago (2026-09-15 08:15 UTC)
MIT
housestyle-mcp
Design Tools Developer Tools Code Analysis
myanptl
A
license
A
quality
C
maintenance
Enables AI agents to audit and fix CSS for generic AI-built design patterns, covering fonts, palettes, contrast, and type scales.
Updated a month ago (2026-09-24 01:37 UTC)
6
22 npm
MIT
Design GL
Design Tools Testing & QA Tools Developer Tools
talkstream
A
license
Not graded
quality
B
maintenance
Enables AI coding agents to audit rendered web pages for design and UI defects by measuring geometry, styles, contrast and motion in a local browser and judging them against evidence-tiered rules. Findings come back as short, fixable items expressed in the project's own design tokens, while only sanitized numeric measurements leave the machine.
Updated a month ago (2026-09-27 07:38 UTC)
Apache 2.0

ui-unslop-mcp

What it catches

Quick start

1. Add the MCP server

2. Install the bundled skill

MCP surface

CLI and CI

Suppressing a false positive

How it works

The unslop family

Development

License

Maintenance

Resources

Related MCP Connectors

Related MCP Servers

UI Keeper

ui-assert

housestyle-mcp

Design GL