Anti-slop frontend skill
Portable skills that teach AI agents real layout, typography, motion, and spacing. No more boilerplate UI.
or paste a SKILL.md into your project
What it fixes
These are the signatures LLMs default to when they try to look designed. The skill bans them unless the brief asks.
The default feature row. Banned. Use asymmetric grids, zig-zag, or scroll-pinned layouts.
The LLM house color. Reach past it deliberately.
The top visual tell. Zero allowed.
The lazy default stack. Pick type with intent.
Frosted blur as a default is a tell. Use it only for premium, media-overlay vibes, with a solid fallback.
BETA, v2.0, early access. Banned unless the brief is a launch.
How it works
Infer the page kind, the vibe words, the audience, and the quiet constraints. Then declare a one-line design read before anything else.
Choose DESIGN_VARIANCE, MOTION_INTENSITY, and VISUAL_DENSITY from the brief. Every layout and motion decision is gated by these three values.
When the brief reads as Material, Fluent, Carbon, Polaris, or shadcn, reach for the official package instead of reinventing it.
A forty-point pre-flight matrix gates every shipment. If any box fails, the output is not done. The check is not optional.
Drag them. The baseline is 7 / 6 / 4, overridden by the design read, never edited in the file.
A registry of frontend and image-generation skills. Install all, or pick one by name.
Works with Codex, Cursor, and Claude Code. Or copy a SKILL.md into your repo.
single skill: add the flag --skill "design-taste-frontend"
Real output from the skill, not mockups.
Give your agent a design read, three dials, and a pre-flight check. The rest is just code.
Star on GitHub