antislop-ui

Detects and corrects generic AI-generated UI patterns in color, layout, components, and motion.

1|Updated Aug 29, 2026
One-click install
npx skills add https://github.com/IzzatFirdaus/task-enterprise-api --skill antislop-ui-izzatfirdaus
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: antislop-ui
Source: https://github.com/IzzatFirdaus/task-enterprise-api/tree/main/.gemini/skills/antislop-ui
Command: npx skills add https://github.com/IzzatFirdaus/task-enterprise-api --skill antislop-ui-izzatfirdaus

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? AI-generated interfaces tend to reuse the same default patterns: blue-purple gradients, glassmorphism everywhere, bento grids, fake terminal windows, and invented dashboard metrics. This Skill provides a rule-based checklist that identifies these generic patterns and prescribes concrete fixes so interfaces reflect a real brand identity instead of training-data defaults. ## Core Features & Use Cases - Pattern Detection: Catalogs dozens of recognizable AI-default tells across visual design, layout, decoration, app dashboards, and motion, each with a Tell, Why, and Fix structure. - Rule-Referenced Fixes: Every pattern cites governing core rules (R-01 through R-38) so corrections stay consistent with the broader antislop system. - UI Skill Checklist: A 13-point verification list covering palette derivation, accent usage, real data, empty states, and accessibility to run before shipping UI work. - Use Case: When building a landing page or admin dashboard, load this Skill alongside the antislop core to audit each section for template layouts, fabricated stats, decorative emoji, and purposeless animation before delivery. ## Quick Start Review my landing page and dashboard code against the antislop-ui checklist and fix any generic AI design patterns you find.

Frequently Asked Questions about antislop-ui

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

FAQPage Schema
How do I make AI-generated UI look less generic?▼

Audit the interface against a catalog of known AI-default patterns like blue-purple gradients, uniform feature cards, and glow effects. Replace defaults with choices derived from a written brand identity, and cap decorative treatments like glass, glow, and shadow to one or two elements.

What are common signs a website was designed by AI?▼

Common tells include blue-to-purple gradients, glassmorphism on every surface, bento grid layouts, fake terminal windows, Lucide-style icons everywhere, emoji in headings, three-tier pricing with a highlighted middle card, and stat cards with invented numbers and deltas.

How should dashboard empty states and loading states be designed?▼

An empty state should explain why it is empty and give the one action that fills it, a loading state should say what is loading, and an error state should name the failure and next step. Generic 'No data available' messages with illustrations fail this standard.

Can I use gradients or dark mode without it looking like AI slop?▼

Yes, when the choice serves a documented purpose. A gradient is acceptable as a hierarchy function with a written reason, and dark mode is valid when brand identity, product type, or audience justifies it. The problem is using them as defaults, not using them at all.

When should I avoid using this UI checklist approach?▼

This Skill only covers UI and visual concerns, so it does not address backend logic, content writing, or non-visual code quality. It also requires the antislop core file for the governing rules and Delivery Gate, so it is not standalone.