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.
Stop AI-generated React/Next.js/Tailwind from shipping as slop: skill + MCP verifier for type escapes, broken styles, guessed images, hydration traps and template-looking UI.
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 | Type escape (': any', 'as any', 'as unknown as'). Define explicit types and fix the root cause. |
| ERROR | Type-checker/linter suppression. Fix the underlying error. |
| ERROR | Silent or console-only catch. Surface an error state the user can see and retry. |
| ERROR | Default 'AI SaaS purple' gradient. Use the project's design tokens. |
| ERROR | Placeholder content, stock filler or TODO left in the UI. Use real copy, real data or get_verified_images. |
| ERROR | Unsplash photo URL not from get_verified_images (guessed IDs show wrong or broken photos). Call get_verified_images or use its placeholders. |
| ERROR | Ambient blurred corner blob. Use flat, full-bleed contrast bands instead. |
| ERROR | Interpolated Tailwind class (e.g. |
| ERROR | Count-up state initialised at 0 renders partial nonsense (e.g. '23%') in SSR/screenshots. Render the final value and animate with CSS, or initialise with the target. |
| ERROR | Non-deterministic value rendered in JSX causes a hydration mismatch. Compute it in an effect or pass it from the server. |
| ERROR | Array index used as React key: reordering/filtering reuses the wrong component state. Use a stable id. |
| ERROR | Dead link (href="#"/empty/javascript:). Link to a real route, or use a for actions. |
| WARN | initial opacity 0 leaves sections invisible in SSR/full-page captures. Keep content visible by default; animate a small y-translate. |
| WARN | Heading lacks text-balance; single words will dangle on the last line. Add |
| WARN | Arbitrary hex in a Tailwind class. Prefer semantic tokens (bg-background, text-foreground). |
| WARN | setState directly inside useEffect. Compute derived state during render or with useMemo. |
| WARN | fetch inside useEffect without AbortController/ignore flag races on fast re-renders. Abort in the cleanup, or use the framework's data loader. |
| WARN | Raw HTML injection. Sanitize with DOMPurify (or render structured content) to avoid XSS. |
get_verified_images uses UNSPLASH_ACCESS_KEY or PEXELS_API_KEY from the MCP server environment when set, and otherwise returns safe SVG placeholders, never guessed photo IDs.
Rules marked ERROR make the audit return status: "FAIL"; WARN is reported but does not fail.
Related MCP server: vibecraft-mcp
# Claude Code
claude mcp add frontend-unslop -s user -- npx -y frontend-unslop-mcp
# Codex
codex mcp add frontend-unslop -- npx -y frontend-unslop-mcpClaude Desktop (~/Library/Application Support/Claude/claude_desktop_config.json) and Antigravity (~/.gemini/config/mcp_config.json):
{
"mcpServers": {
"frontend-unslop": {
"command": "npx",
"args": ["-y", "frontend-unslop-mcp"]
}
}
}Restart the app afterwards.
npx -y frontend-unslop-mcp install-skills # clients that are installed
npx -y frontend-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.
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.
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:
Issue | Meaning |
| Tailwind installed, but no |
| Entry CSS exists but nothing imports it |
|
|
| Plain HTML page with no stylesheet, |
Kind | Name | Purpose |
Prompt |
| The full skill text, for GUI clients |
Tool |
| Returns the full frontend-unslop ruleset. Call before writing code if the frontend-unslop skill is not already loaded. |
Tool |
| Deterministically scans React/Next.js/Tailwind files for frontend slop: type escapes, silent catches, AI-purple gradients, placeholder content, guessed image URLs, dynamic Tailwind classes, index keys, dead links, hydration traps, frozen counters and derived-state effects. Accepts files or directories; with no files it audits the git working-tree changes. Suppress a verified false positive with a |
Tool |
| Returns real, working image URLs (+alt text, credit) for a topic via the Unsplash/Pexels API, or safe SVG placeholders if no API key is configured. ALWAYS use this instead of writing remembered Unsplash photo IDs. |
Tool |
| Verifies CSS actually loads: Tailwind entry stylesheet exists and is imported, and every semantic token class (bg-background, text-foreground, ...) used in the given files is defined. Run after generating UI, especially one-shot pages. |
Tool |
| Runs the project's local |
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 frontend-unslop-mcp audit # git working-tree changes
npx -y frontend-unslop-mcp audit src app # files or directories
npx -y frontend-unslop-mcp audit src --json # machine-readable
npx -y frontend-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 NO_TYPE_ESCAPE -- 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/frontend-unslop-mcp
cd frontend-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
This server cannot be deployed
Live React design-system APIs, patterns, and code validation so AI agents build real UI, not slop.
Enforces architectural invariants and code quality rules inside your AI agent's edit loop.
Lints + auto-fixes how AI coding agents discover any new product. 24 rules, 6 tools, score 0-100.
Preflight QA for AI-agent deliverables with structured verdicts and repair guidance.
