skills.rest
Dzakiamriz22
Dzakiamriz22COMMUNITY
Explore all skills by this author →
GitHub

ai-slop-detector

Detect and rewrite generic AI-generated UI patterns in frontend code.

1|Updated Jul 15, 2026
Search Tags:#design#ui#accessibility#refactoring#frontend#code-quality
One-click install
npx skills add https://github.com/Dzakiamriz22/frontend-pack --skill ai-slop-detector-dzakiamriz22
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ai-slop-detector
Source: https://github.com/Dzakiamriz22/frontend-pack/tree/main/skills/ai-slop-detector
Command: npx skills add https://github.com/Dzakiamriz22/frontend-pack --skill ai-slop-detector-dzakiamriz22

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill identifies and removes generic, low-quality UI patterns often produced by AI models, ensuring your frontend code meets professional design standards.

Core Features & Use Cases

  • Automated Quality Gate: Scans for common slop patterns like excessive gradients, poor typography, and inconsistent spacing.
  • Intelligent Refactoring: Provides specific detection feedback and complete code rewrites to fix identified issues.
  • Use Case: After generating a landing page, run this skill to ensure the hero section, spacing, and typography align with modern design systems rather than generic AI defaults.

Quick Start

Run the ai-slop-detector on the current component to identify and fix any generic UI patterns.

Frequently Asked Questions about ai-slop-detector

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

FAQPage Schema
How do I fix generic AI-generated UI patterns in frontend code?▼

To fix generic AI-generated UI patterns, you can scan your frontend components to detect low-quality visual defaults like excessive gradients and poor typography, then apply automated refactoring to establish professional design consistency.

What are common AI slop patterns in UI design?▼

Common AI slop patterns in UI design include excessive gradients, poor typography choices, inconsistent spacing, and generic component structures that fail to adhere to modern design system tokens and semantic HTML standards.

How do I audit frontend code for design consistency and accessibility?▼

Auditing frontend code for design consistency involves scanning components to verify adherence to modern design system tokens, checking for semantic HTML structure, and identifying spacing or typography inconsistencies for automated refactoring.

Can I refactor generated frontend code to use semantic HTML and design tokens?▼

Yes, you can refactor generated frontend code by scanning for generic AI patterns and applying intelligent rewrites that enforce semantic HTML structure, consistent spacing, and alignment with modern design system tokens.

Does the ai-slop-detector work without external dependencies?▼

Yes, the ai-slop-detector operates without requiring any external dependencies or specific component installations, allowing you to run design audits directly on your existing frontend development workflows.

Related Skills

Explore More Design & Creative Skills→
stacksjsstacksjs
2

stacks-redesign

Audit and upgrade Stacks.js UI patterns in stx templates and Crosswind classes.

Official
Intermediate
HellKaiser45HellKaiser45

frontend-design-review

Analyze UI implementations against design system tokens and accessibility guidelines.

Community
Advanced
leadgenjayleadgenjay
11

taste

Audit frontend components against anti-slop UI rules and brand constraints.

Community
Advanced
DavidLam-ossDavidLam-oss
283

openprd-frontend-design

Enforce aesthetic intent and asset verification in frontend interface design.

Community
Advanced