Slop Patterns

com.sloppatternsPublished by sloppatterns.comOfficial publisherv1.2.1Updated Nov 2, 2026

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

VerifiedStreamable HTTPWeb executableKnowledge & MemoryDeveloper Tools

Overview

AI-generated overview

Checks UI code against a public library of AI design anti-patterns and returns each match with its fix.

What you can do
  • Check CSS, HTML or JSX snippets against the pattern library and get every matching anti-pattern with its fix
  • Browse and search the taxonomy by plain-language query, listing codes, names and one-liners
  • Read a full pattern entry by id or code: what it looks like, why tools produce it, who it hurts, the fix and sources
  • Get just the causal explanation for a pattern, or the library version and changelog for citation
  • Submit a new anti-pattern report for human review
When to use it
Useful when a coding agent generates or reviews front-end UI code and you want AI-default design tells caught and corrected before you see the result. Also handy for looking up a specific pattern or citing a library version.
Requirements
Remote HTTP endpoint at sloppatterns.com/mcp; no account or API key needed. Works with any MCP client that supports HTTP servers.
Before you install
The check tool only covers the 101 patterns with a mechanical tell, so a clean result is not proof of good design. The report tool sends your submission to the maintainers, who review it by hand and credit the reporter; avoid including confidential code. The scanner behind the site's Slop Score is a separate, non-open project.

Installation

In SourceWeft

  1. Open Slop Patterns in the dashboard and add it to a workspace.
  2. Enable the server for the chats that should use its tools.

Web executable via Streamable HTTP. Remote servers run from the web runtime once configured in a workspace.

Use with an agent

Paste this prompt into Claude Code, Codex, Cursor or another agent — or into SourceWeft chat. The agent reads this server's install guide, shows you its publisher, endpoint and sign-in, and adds it to your client once you agree. Keys never go into a command.

Read https://sourceweft.com/mcp/com.sloppatterns%2Fslop-patterns/install.md and connect the MCP server it describes to my client. Before changing any config, show me its publisher, endpoint and sign-in method and wait for my OK. Never put an API key in a command or in a file I would commit; ask me where it should come from.

Read the install guide the agent follows

Other MCP clients

Add this to your client's mcpServers config.

{
  "mcpServers": {
    "slop-patterns": {
      "type": "http",
      "url": "https://sloppatterns.com/mcp"
    }
  }
}

README

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.

Source: README.md at commit a3e704f

Tools

7

check_design

Check UI code for AI design patterns

Check a snippet of CSS, HTML or JSX against the Slop Patterns library and return every AI design anti-pattern it matches, with the fix for each. Covers the 101 documented patterns that have a mechanical tell. Useful for reviewing generated UI code.

ParameterscoderequiredshareStats

list_patterns

List all patterns

List the whole Slop Patterns taxonomy: code, id, name and one-liner for every documented AI design anti-pattern.

Parameterstrack

get_pattern

Get one pattern

Get one full pattern entry by id or code (e.g. "a1" or "the-unchosen-gradient"): what it looks like, why the tools produce it, who it hurts, the fix, sources.

Parametersidrequired

changelog

Library changelog

The library version, what each release added or changed, and how patterns are versioned. Use it to cite a specific version of Slop Patterns.

Takes no parameters.

search_patterns

Search patterns

Plain-language search across the library. "gradient headline" returns A10 Gradient Text Headline.

Parametersqueryrequired

report_pattern

Report a new pattern

Report an AI design anti-pattern that is NOT yet in the library, for a design failure seen repeatedly that a search of the library does not find. Reports are reviewed by a human before anything is published, and published entries credit the reporter.

ParametersnamerequiredcreditexamplewhereSeendescriptionrequired

why

Why a pattern happens

Return only the causal explanation for one pattern — which model, tool or template default produces it.

Parametersidrequired

Version history

1
  1. v1.2.1LatestOct 12, 2026

Score

100% of the applicable checks met

How complete this listing is, computed from the registry entry, the endpoint and public sources. Not a rating of the server and not a statement that it is safe or working today: reachability is a dated check, and no installs or reviews go into the score.

  • Reached in the last 30 daysRequired25 pts
  • Auth declaredRequired10 pts
  • Tools listedRequired15 pts
  • DescriptionRequired15 pts
  • Logo10 pts
  • Documentation15 pts
  • License10 pts