English Français العربية

Slop Patterns

Official registry Developer tools

Checks UI code for AI-default design patterns and gives the fix. By Precious Studio.

Source code Website Documentation

What can you do with Slop Patterns?

  • Claude Code (plugin, MCP plus a skill):
  • 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 as com.sloppatterns/slop-patterns.
  • Cursor: add the server in Settings → MCP (type HTTP, URL above), then copy cursor/slop-patterns.mdc into .cursor/rules/.

Install

Add this to your client's MCP configuration (Claude Desktop: claude_desktop_config.json; Cursor: .cursor/mcp.json; VS Code and others use the same "mcpServers" shape).

Remote (streamable-http)
Claude Code 
claude mcp add --transport http slop-patterns 'https://sloppatterns.com/mcp'
JSON configuration (Claude Desktop, Cursor, VS Code) 
{
    "mcpServers": {
        "slop-patterns": {
            "type": "http",
            "url": "https://sloppatterns.com/mcp"
        }
    }
}

Documentation

From the project's README on GitHub, refreshed weekly. Links open on GitHub.

Slop 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 in api/.
  • 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 as com.sloppatterns/slop-patterns.
  • Cursor: add the server in Settings → MCP (type HTTP, URL above), then copy cursor/slop-patterns.mdc into .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 534 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 ./dist or npx slop-patterns scan example.com. See cli/.
  • 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.

Frequently asked questions

What is Slop Patterns?

Checks UI code for AI-default design patterns and gives the fix. By Precious Studio.

How do I install Slop Patterns?

It runs as a remote server. In Claude Code: claude mcp add --transport http slop-patterns 'https://sloppatterns.com/mcp'. For other clients, paste the JSON configuration from this page into their MCP settings.

Does Slop Patterns need an API key?

Its registry entry lists no required key or secret. Some features may still need an account with the service it connects to.

Is Slop Patterns open source?

Yes. Its code is on GitHub under the MIT license.

Who maintains Slop Patterns?

It is published by pavithralamahewa. AI.tn lists it but does not maintain or endorse it.

From the official MCP Registry. Listing is not an endorsement: review a server's code and permissions before giving it access to your data.