Keyword: DESIGN
From @learningwithcole. Free, open source, and every link is the real repo. Lots of copycat versions exist, so only install from these links.
1. Impeccable: design rules that catch "AI slop"
By Paul Bakaus (creator of jQuery UI) · github.com/pbakaus/impeccable · 85K+ ★ · Apache-2.0
1 skill, 24 commands, and 62 detector rules for AI-generated frontend design. Overused fonts, gradient text and cards-in-cards get flagged before you ship.
npx impeccable install
Then run /impeccable init inside Claude Code.
Or, as a Claude Code plugin: /plugin marketplace add pbakaus/impeccable, then open /plugin and install Impeccable from the list.
2. Emil Kowalski's skills: motion and polish
By Emil Kowalski (author of Sonner and Vaul) · github.com/emilkowalski/skills · 49K+ ★ · MIT
15 skills distilled from Emil's design-engineering rules, including:
- "Never use ease-in for UI animations."
- "UI animations should stay under 300ms."
- "Never animate keyboard-initiated actions."
npx skills@latest add emilkowalski/skills
3. Playwright MCP: Claude can see what it built
By Microsoft · github.com/microsoft/playwright-mcp · 38K+ ★ · Apache-2.0
Claude opens your site in a real browser, clicks around, takes screenshots and resizes to phone width. Then it fixes what it actually sees.
claude mcp add playwright npx @playwright/mcp@latest
The prompt I run after installing all three
Audit this page with Impeccable and list the top 5 issues.
Fix them, following Emil Kowalski's animation rules.
Then open it with Playwright at 390px and 1440px wide, screenshot both,
and fix anything that still looks off. Repeat once.
Honest note: skills guide Claude, they don't replace taste. Review the result, and give Claude a reference site you love.
Links this guide cites
That’s the whole guide.
Want the next tool when it posts?
Get new guides by email. The guides stay free here either way.