frontend-unslop-mcp

Stop AI-generated React, Next.js and Tailwind UI from shipping as generic slop: skill + MCP verifier.

An agent skill plus an MCP server in one package. The skill tells your coding agent what Frontend 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

The skill additionally steers the agent away from symmetric 3-column icon cards and requires Loading / Empty / Error states on data-driven components.

Rules marked ERROR make the audit return status: "FAIL"; WARN is reported but does not fail.

Related MCP server: vibecraft-mcp

Quick start

1. Add the MCP server

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

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

Claude Desktop (~/Library/Application Support/Claude/claude_desktop_config.json) and Antigravity (~/.gemini/antigravity/mcp_config.json):

{
  "mcpServers": {
    "frontend-unslop": {
      "command": "npx",
      "args": ["-y", "frontend-unslop-mcp"]
    }
  }
}

Restart the app afterwards.

2. Install the bundled skill

npx -y frontend-unslop-mcp install-skills

Copies frontend-unslop into:

Claude Desktop has no skills folder, so it receives the rules through the MCP prompt and the load_*_rules tool described below. Or install straight from this repo's skills/ directory.

Real images, not hallucinated ones

LLMs guess Unsplash photo IDs, which gives wrong subjects or broken images. Give the server a key and it returns real, relevant photos:

{ "mcpServers": { "frontend-unslop": {
  "command": "npx", "args": ["-y", "frontend-unslop-mcp"],
  "env": { "UNSPLASH_ACCESS_KEY": "your-key" }
} } }

PEXELS_API_KEY works too. Without a key the tool returns deterministic SVG placeholders rather than guessing.

One-shot prompts: styles that actually load

Generating a whole page in one prompt used to produce markup that rendered unstyled: tokens like bg-background were used but never defined, or the stylesheet was never imported. The skill now requires the agent to wire the stylesheet, define every token and create the Tailwind/PostCSS config in the same response, and verify_styles_wired checks it:

MCP surface

Audit output:

{
  "status": "FAIL",
  "totalViolations": 1,
  "findings": [
    { "file": "src/a.ts", "line": 12, "rule": "NO_TYPE_ESCAPE", "severity": "ERROR", "message": "…", "snippet": "…" }
  ],
  "instruction": "Refactor every ERROR finding and re-run the audit before completing the task."
}

File paths are resolved against the server's working directory and cannot escape it.

How it works

1. The agent loads the skill and writes code under its constraints.

2. Before finishing, the skill requires a call to audit_frontend_slop and verify_typescript_compile.

3. On FAIL, the agent fixes every finding and re-runs until PASS.

The checks are regex based: fast, offline and predictable, but heuristic. Expect the occasional false positive and treat them as a safety net, not a substitute for review.

Pairs well with

• backend-unslop-mcp: the same idea for APIs and SQL.

Development

git clone https://github.com/fikrifirmanf/frontend-unslop-mcp
cd frontend-unslop-mcp && npm install
node src/server.mjs        # speaks MCP over stdio

License

MIT © Fikri Firman Fadilah