About Slop Patterns
Slop Patterns is an MIT-licensed library and MCP server for coding agents that identifies AI-default UI design patterns and suggests fixes. Its taxonomy covers 531 patterns, with the server sharing code rules with the scanner and CLI.
Key features
- 01531-pattern design taxonomy
- 02check_design tool for UI code
- 03Shared rules with scanner and CLI
- 04Stable pattern codes and URLs
Use cases
- 01Review generated UI for design anti-patterns
- 02Apply suggested fixes before presenting UI
MCP support
The remote MCP server at https://sloppatterns.com/mcp exposes the check_design tool to MCP clients. Coding agents can use it to check UI code and address detected patterns.
Configuration
Remote servers need no local install. Pick your client, then copy the config or install in one click.
https://sloppatterns.com/mcpclaude mcp add --transport http com-sloppatterns-slop-patterns https://sloppatterns.com/mcp{"mcpServers":{"com-sloppatterns-slop-patterns":{"type":"http","url":"https://sloppatterns.com/mcp"}}}Open in Cursor{"servers":{"com-sloppatterns-slop-patterns":{"type":"http","url":"https://sloppatterns.com/mcp"}}}Open in VS Code{"mcpServers":{"com-sloppatterns-slop-patterns":{"type":"http","url":"https://sloppatterns.com/mcp"}}}{"mcpServers":{"com-sloppatterns-slop-patterns":{"serverUrl":"https://sloppatterns.com/mcp"}}}Run commands in a terminal; paste JSON into the client’s MCP config and restart. Servers that need sign-in will prompt on first connect.
Tools
7| Parameter | Type | Required | Description |
|---|---|---|---|
| code | string | Yes | The CSS, HTML or JSX to check. Paste it whole; partial snippets work but full files are more accurate. |
| shareStats | boolean | No | Optional, defaults to false. If true, contribute an anonymous count of WHICH rule codes fired to the public monthly figures at https://sloppatterns.com/#stats. Never sends your code, your URL, or any identifier. |
Details
From the project READMESlop Patterns
A public library of AI design anti-patterns: what they look like, why the tools produce them, and what to do instead. Live at sloppatterns.com.
- License: MIT (LICENSE). Only the pattern library is here and MIT:
patterns.json, the pattern text and sources, the site, and the MCP server inapi/. - Scanner code is not open. The Slop Score scanner at sloppatterns.com/score (browser capture, live checks and grading) is a separate project and is not included in this repo.
- The MCP server runs at
https://sloppatterns.com/mcp. No account or key. See the "For agents" page on the site. - The research note, The Same Page, is in
research/.
Maintained by Pavithra Lamahewa at Precious Studio. Suggest a pattern from the site, or open an issue.
Use it in your AI tools
Your coding agent calls check_design on the UI it writes and fixes what it finds before you see it.
- Claude Code (plugin, MCP plus a skill):
/plugin marketplace add pavithralamahewa/slop-patterns /plugin install slop-patterns@slop-patterns - Any MCP client:
npx add-mcp https://sloppatterns.com/mcp, or add an HTTP server with that URL. It is in the official MCP Registry ascom.sloppatterns/slop-patterns. - Cursor: add the server in Settings → MCP (type HTTP, URL above), then copy
cursor/slop-patterns.mdcinto.cursor/rules/.
Use the taxonomy
Every pattern has a stable code (for example A10) and a stable URL (https://sloppatterns.com/#gradient-text-headline). Codes never change meaning; when an entry is revised, its version and updated fields change.
- All 531 patterns as data:
taxonomy.json. Each entry says whether it is checked automatically (101 are; the scanner, the MCP server and the command line share 104 code rules, and 57 of them have passed a hand audit on whole pages) or needs a person. - Command line:
npx slop-patterns check ./distornpx slop-patterns scan example.com. Seecli/. - One rule set: the scanner, the MCP server and the command line run the same
rules.js, so they never disagree. - Cite it: see
CITATION.cff. GitHub shows a "Cite this repository" button from it.
Comments
New to MCP?
From what the protocol is to installing your first server, these answers cover most first questions.
An open protocol that defines how AI applications connect to external tools and data in a uniform way. Clients talk to the model; MCP servers provide tools, resources and prompt templates. They exchange standard messages, so one server can be reused by many clients.