antislop-ui

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

Updated Dec 17, 2025
One-click install
npx skills add https://github.com/faidzagustiawan/portofolio --skill antislop-ui-faidzagustiawan
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: antislop-ui
Source: https://github.com/faidzagustiawan/portofolio/tree/main/agent/skills/antislop-ui
Command: npx skills add https://github.com/faidzagustiawan/portofolio --skill antislop-ui-faidzagustiawan

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? AI coding agents repeatedly produce the same generic interface patterns—blue-purple gradients, glassmorphism everywhere, bento grids, fake terminal windows, and invented dashboard metrics—which makes products look generated rather than designed. This Skill gives the agent a concrete catalog of these tells with fixes, so UI work reads as intentional design. ## Core Features & Use Cases - Pattern catalog with fixes: Each entry follows a Tell / Why / Fix structure citing core rules (R-01 through R-38), covering color, layout, components, decoration, structural flow, app dashboards, and motion. - App and dashboard guidance: Dedicated section for signed-in screens covering default dashboard shells, invented stat cards, filler activity feeds, and placeholder empty states. - UI Skill Checklist: A 13-item yes/no checklist run alongside the core Delivery Gate before shipping UI work. - Use Case: When asked to build a landing page or dashboard, load this Skill with the antislop core so the agent avoids default gradients, template section orders, and fake data, and instead derives palette, rhythm, and motion from the product's stated identity. ## Quick Start Load this skill together with the antislop core and ask the agent to build or review a landing page or dashboard screen.

Frequently Asked Questions about antislop-ui

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

FAQPage Schema
How do I stop AI-generated UIs from looking generic?▼

Load this skill with the antislop core before UI work. It catalogs common tells like blue-purple gradients, uniform feature cards, and emoji decoration, each with a Tell, Why, and Fix tied to numbered core rules.

What UI patterns does this skill flag as AI slop?▼

It flags generic gradients, excessive glassmorphism and border radius, glow everywhere, bento grids, three-column pricing, fake terminal windows, Lucide-default icon sets, invented dashboard metrics, and endless animation loops, among others.

Does this skill work for dashboards and app screens?▼

Yes, it has a dedicated App & Dashboard section covering default sidebar shells, stat cards with invented numbers, filler activity feeds, charts without a question, and placeholder empty states, with fixes for each.

Can I use this skill without the antislop core file?▼

No, it is designed to load together with antislop.md, which holds the core mechanism and numbered rules. This skill references those rules by number and never duplicates them, so the core is required.

How is the UI checklist used before shipping?▼

The 13-item UI Skill Checklist runs alongside the core Delivery Gate, and every answer must be yes. It verifies palette derivation, accent restraint, real data, functional controls, motion purpose, and responsive keyboard-accessible states.