Anti-Slop UI & Aesthetics
Anti-Slop Frontend Design Skill for AI Coding Agents
Stops AI agents from outputting generic purple-gradient, rounded-slop interfaces. Enforces editorial typography, calibrated contrast, intentional whitespace, and hardware-accelerated micro-motion.
Install Design Taste Frontend Skill
$ bunx skills add NaveenGumaste/keyskills/design-taste-frontendGuaranteed Outcomes
Why install Design Taste Frontend?
Banish Generic AI Aesthetics
No more purple buttons, excessive glows, centered mesh heroes, or repetitive three-card grids.
Calibrated Typography
Enforces strict type scales, deliberate letter-spacing, and readable line heights tailored to the application's mood.
Performance-First Animation
Ensures 60fps micro-motion using transform and opacity transitions while respecting prefers-reduced-motion.
SKILL.md Directives
What the agent enforces
When installed, your autonomous agent loads these strict directives into memory before executing code generation or repo initialization:
# Anti-Slop Design System Directives
- BAN generic AI gradients (purple-to-blue blobs) and bubbly 3D icons.
- Prefer high-contrast, intentional neutrals (#0a0a0a dark, #f5f4f2 warm paper).
- Pair an editorial or distinct display serif/sans with a precision monospace.
- Hardware-accelerate all animations (transform, opacity only; zero height/margin transitions).Questions & Answers
Frequently asked questions
Why do AI agents generate sloppy UIs by default?
LLMs default to the average patterns in their training data, resulting in generic Bootstrap/Tailwind purple gradients and repetitive layouts. This skill injects strict architectural rules and design dials before UI code is generated.
How does the agent know which typography to pick?
The skill directs the agent to infer the project's purpose and tone, choosing distinct pairings (like an editorial serif with a crisp monospace) instead of defaulting to generic sans-serif fonts.
README Badge Generator
Badge your repository
Show contributors your repo uses high-agency agent skills.
[](https://keyskills.ngxlabs.tech)More portable agent skills
SEO Setup
Discoverability & Search Rank
Equips autonomous coding agents to automatically generate metadata, OpenGraph cards, sitemap.xml, robots.txt, and JSON-LD schemas during repository init.
Git Hygiene
Commit & Branch Discipline
Maintains disciplined git history by enforcing Conventional Commits, branch prefixes, pre-commit safety checks, and atomic changes.
Codebase Cleanup
Repository Hygiene
Cleans up agent debris: scratch scripts, unused imports, orphan test outputs, and temporary benchmark files before finishing tasks.