skills.rest
Dragoon0x
Dragoon0xCOMMUNITY
Explore all skills by this author →
Website𝕏@0xDragoonLabGitHub

slop

Detect 12 AI-generated UI design patterns in frontend code.

4|Updated Apr 11, 2026
Search Tags:#code review#pr review#design audit#slop detection#frontend quality#ai authorship check#tailwind audit
One-click install
npx skills add https://github.com/Dragoon0x/dragoon-skills --skill slop-dragoon0x
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: slop
Source: https://github.com/Dragoon0x/dragoon-skills/tree/main/skills/slop
Command: npx skills add https://github.com/Dragoon0x/dragoon-skills --skill slop-dragoon0x

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

AI-generated frontend code often includes generic, inconsistent design patterns that betray its origin, create visual slop, and deviate from your codebase's established design standards, making code harder to maintain and less professional for end users.

Core Features & Use Cases

  • 12 Deterministic Detection Rules: Catches specific AI tells including shadow variant explosion, generic violet-to-pink gradients, lorem ipsum placeholders, inline styles, off-grid spacing, off-palette colors, Tailwind class bloat, missing alt text, leftover console.log statements, emoji in headings, and default transition-all usage.
  • Codebase-Aware Scanning: When paired with a dragoon.json manifest from a prior scan, rules adjust to match your project's unique spacing grid and color palette for more accurate, relevant findings.
  • Actionable Findings: Every detected issue includes the exact file, line, column, offending code snippet, explanation of why it is a problem, and a concrete fix, with severity ratings (low/medium/high) for prioritization. Ideal for PR reviews, pre-ship quality checks, and design hygiene audits.

Quick Start

Use the slop skill to scan your project's UI code for AI-generated design patterns and get specific, actionable fixes for every issue found.

Frequently Asked Questions about slop

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I detect AI-generated UI code patterns in a frontend project?▼

AI-generated frontend code is detected by scanning for 12 specific design tells like generic violet-to-pink gradients, shadow variant explosion, lorem ipsum placeholders, and Tailwind class bloat. The scanner returns concrete findings with exact file locations, offending snippets, severity ratings, and actionable fixes.

What are common AI design tells in Tailwind and CSS code?▼

Common AI design tells in Tailwind and CSS include shadow variant explosion, generic violet-to-pink gradients, off-grid spacing, off-palette colors, Tailwind class bloat, inline styles, missing alt text, leftover console.log statements, emoji in headings, and default transition-all usage.

How do I automate design hygiene audits before shipping a PR?▼

Design hygiene audits are automated by running a slop detection scan as a pre-PR quality gate. This process evaluates web application CSS, Tailwind, or component frameworks against deterministic rules, returning prioritized low, medium, or high severity findings with specific code fixes.

Can I customize code review rules to match my project's design system?▼

Code review rules are customized by pairing the scan with a dragoon.json manifest from a prior scan. This enables codebase-aware scanning, allowing rules to adjust and match your project's unique spacing grid and color palette for more accurate, relevant findings.

Does slop detection work with component frameworks or only plain CSS?▼

Slop detection works with web applications using CSS, Tailwind, or component frameworks. It identifies 12 specific AI-generated design patterns across these environments, checking for issues like off-grid spacing, inline styles, Tailwind class bloat, and missing alt text.

What is the best way to review PRs for AI-generated frontend quality issues?▼

The best way to review PRs for AI-generated frontend quality issues is to run a deterministic design audit that catches specific patterns like generic gradients, emoji in headings, and default transition-all usage. This provides exact file locations and severity ratings to prioritize code fixes.

Related Skills

Explore More Software Engineering Skills→
Dragoon0xDragoon0x
4

handoff

Generate engineering handoff documentation from dragoon.json manifest data.

Community
Intermediate
yangmiokyangmiok

frontend-code-review

Automate frontend code reviews against standardized checklists for .tsx, .ts, and .js files.

Community
Basic
RyderFreeman4LogosRyderFreeman4Logos
12

commit

Audit code commits against formatting, tests, security, and review gates.

Community
Advanced
bbvch-aibbvch-ai
9

design-system

Provide Vue.js, Tailwind CSS, and PrimeVue design tokens and component patterns.

Official
Intermediate