no-slop

Stop AI-generated frontend from looking like slop.

An MCP server for Claude Code that reviews JSX components, generates design-aware prompts, and verifies that AI output actually matches your requirements — before you ship it.

Install

1. Add to Claude Code

Open or create ~/.claude/mcp.json and add:

{
  "mcpServers": {
    "no-slop": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "no-slop-mcp"]
    }
  }
}

2. Restart Claude Code and run /mcp — you should see no-slop with four tools listed.

That's it. No cloning, no building.

Note: no-slop uses your Anthropic API key to review components. Claude Code passes this automatically — you don't need to configure anything extra.

What it does

• setup_profile — save your design system once (colors, typography, spacing, freeform notes). Generates a DESIGN.md you can commit and share with your team.
• review_component — paste a JSX component, get a score (0–100) and actionable fixes across five dimensions: visual design, accessibility, responsiveness, code patterns, and UX heuristics (Nielsen, Gestalt, Fitts, Hick, Miller).
• generate_prompt — describe what you want to build, get back a detailed prompt with your design constraints embedded so Claude produces something opinionated, not generic. Comes with a verification checklist.
• verify_component — paste the AI's output and your requirements, get a per-requirement checklist and a next_prompt to paste back to the AI to fix gaps. Set auto_fix: true to run the fix loop automatically.

Usage

Set up your design profile

Set up my no-slop profile

Claude will ask about your colors, typography, spacing, and any freeform notes — or offer named presets if you don't have strong opinions. Saves to .no-slop/profile.json in your project and writes DESIGN.md.

Review a component

Review this component with no-slop: <paste JSX>

Example output:

{
  "score": 41,
  "summary": "Multiple accessibility and UX issues.",
  "issues": [
    {
      "category": "accessibility",
      "severity": "critical",
      "description": "Clickable div has no keyboard handler or role",
      "fix": "Replace with <button> or add role='button' + onKeyDown handler"
    },
    {
      "category": "ux",
      "severity": "critical",
      "description": "Submit button has no loading state — no feedback after click (Nielsen #1)",
      "fix": "Disable the button and show a spinner while the request is in flight"
    },
    {
      "category": "ux",
      "severity": "warning",
      "description": "Error message says 'Invalid input' with no guidance (Nielsen #9)",
      "fix": "State what failed and how to fix it: 'Email already registered — sign in or reset password'"
    }
  ]
}

Generate a design-aware prompt

Use no-slop to generate a prompt for a login form

Returns a detailed prompt with your design system and UX requirements embedded — ready to paste into a new Claude conversation — plus a verification checklist for the next step.

Verify AI output

Use no-slop to verify this component against my requirements: <paste JSX>

Returns a per-requirement checklist (done/partial/missing) and a next_prompt to paste back to the AI to close gaps. Add auto_fix: true to run the fix loop automatically (up to 5 iterations).

Override your profile for a single call

All tools accept an optional context field to override the saved profile inline:

Review this component for a dark glassmorphism style

Skills (optional)

Skills add guided slash commands: /no-slop:profile, /no-slop:review, /no-slop:generate, /no-slop:verify. They walk you through each tool step by step instead of writing the prompt yourself.

To add them, register no-slop as a Claude Code plugin. Add to ~/.claude/settings.json:

{
  "extraKnownMarketplaces": {
    "no-slop-npm": {
      "source": {
        "source": "github",
        "repo": "sera-wi/no-slop"
      }
    }
  },
  "enabledPlugins": {
    "no-slop@no-slop-npm": true
  }
}

Restart Claude Code and the /no-slop:* commands will appear in autocomplete.

Design profile

.no-slop/profile.json (all fields optional):

{
  "colors": {
    "primary": "#6366f1",
    "background": "#0f172a",
    "text": "#f8fafc",
    "accent": "#f59e0b"
  },
  "typography": {
    "fontFamily": "Inter",
    "scale": [12, 14, 16, 20, 24, 32, 48]
  },
  "spacing": {
    "unit": 4,
    "scale": [4, 8, 12, 16, 24, 32, 48, 64]
  },
  "borderRadius": "8px",
  "freeform": "Dark sidebar, cards with subtle shadows, no visible borders"
}

Commit .no-slop/profile.json to share your design constraints with your team.

Review dimensions

| Dimension | What it checks | |---|---| | visual | Spacing consistency, typography scale, color hierarchy, visual weight | | accessibility | WCAG contrast ratios, ARIA attributes, keyboard navigation, semantic HTML | | responsiveness | Layout breakpoints, mobile behavior, flexible units | | code | Component structure, prop naming, hook usage, React patterns | | ux | Nielsen's 10 heuristics, Gestalt laws, Fitts/Hick/Miller, NN/G form rules |

Development

git clone https://github.com/sera-wi/no-slop
cd no-slop
npm install
npm test          # 47 tests
npm run build     # compile to dist/
npm run test:watch

License

MIT