01Frontend & UI10 skills
Gated resource · 42 skillsClaude CodeCursorCodex
42 Claude design skills that kill AI slop.
Every vibe-coded site has the same tell: a purple-to-white gradient, Inter, four cards in a grid, one weak hover. The model ships the median — and the median is dead. These 42 skills are plain SKILL.md rules that overwrite the model's default taste before a single line of CSS gets written. Most install in one command.
6 layers · 42 skills · real GitHub repo + install line + creator credit for every one · free, just drop your email.
How the 42 skills stack.
Don't install all 42. Stack three or four that fight slop at the source, then add eyes. Here's the whole architecture — the full list, repos, and install lines are one email away.
02Image, Graphics, 3D & Video8 skills
03Claude Design (canvas)4 skills
04AI Product Interaction8 skills
05Prompt Architecture8 skills
06Trust & Safety3 skills
Frontend & UI
Pick one as your base taste layer (#1–#3), then add motion and a feedback loop. This is where most of the slop dies.
by Anthropic
The floor everyone agrees on. Forces Claude to commit to one bold aesthetic direction and answer purpose/tone/constraints before any CSS — and bans the default fonts.
npx skills add anthropics/skills --skill frontend-design
by Paul Bakaus
23 one-word commands (polish, critique, animate) that run a deterministic quality pass: 4px grid, OKLCH color, fluid type, AA contrast. Brand mode vs product mode.
npx impeccable install # then /impeccable init
by Leonxlnx
Three dials — variance, motion, density — that make Claude apply real taste by default: asymmetric layouts, motion, an opinionated stack. Stops asking permission.
npx skills add Leonxlnx/taste-skill --skill design-taste-frontend
04animate
by Emil KowalskiEmil Kowalski's motion rules baked in: exits faster than entrances, transform/opacity only for 60fps, honor reduced-motion. Janky UI becomes smooth.
npx skills add delphi-ai/animate-skill --skill animate
by kylezantos
A motion auditor that blends restraint, production polish, and playfulness — weighted by context. Flags scale(0) starts, bare easing, and missing reduced-motion.
npx skills add kylezantos/design-motion-principles
by Composio
Generates a real token system — colors, spacing, type ramps — as CSS variables, so the agent stops inventing a one-off hex for every component.
/plugin marketplace add ComposioHQ/awesome-codex-skills
by GLips
When the Figma file exists and you want faithful translation: production code that respects your design system, with every state generated in one pass.
claude mcp add figma -- npx figma-developer-mcp --stdio
by Microsoft
The highest-leverage thing you can give a design agent: eyes. It screenshots each page across viewports, compares to your reference, and iterates until it matches.
claude mcp add playwright -s user -- npx @playwright/mcp@latest
09brandkit
by LeonxlnxOne-shot brand boards — logo directions, palette, typography, category mockups — as reference frames you then hand to Claude Code for real code.
npx skills add Leonxlnx/taste-skill --skill brandkit
by Owl Listener
The process work juniors skip — research discovery, UX strategy, dev handoff specs, QA checklists. Strong on process; pair it with a taste layer (#1–#3).
/plugin marketplace add Owl-Listener/designer-skills
Image, Graphics, 3D & Video
Generate the assets — images, social graphics, generative art, programmatic video, 3D, and After Effects — without leaving the agent.
by Devon Jones
Generate and edit images in the terminal via Gemini — blog headers, thumbnails, mockups, room redesigns. Multi-turn refinement, ~$0.04 an image.
/plugin install nano-banana@devon-claude-skills
by Daniel Agrici
A smarter image wrapper: Claude interprets intent and builds the prompt for you with a five-part formula. 13 modes, plus a large prompt library to browse.
/plugin marketplace add AgriciDaniel/banana-claude
by Anthropic
Outputs real, editable PNG/PDF graphics — carousels, quote cards, infographics — built in code so fonts, colors, and logos stay correct.
npx skills add anthropics/skills --skill canvas-design
by Anthropic
Code-driven generative visuals — flow fields, noise, particles — unique per render for backgrounds and hero textures. Never looks like stock.
npx skills add anthropics/skills --skill algorithmic-art
by Dojo Coding
A full video studio in Claude Code — voiceovers, music, stock footage, captions, transitions, and a render→review→fix loop. React in, MP4 out. No timeline editor.
/plugin marketplace add DojoCodingLabs/remotion-superpowers
by Remotion
The lighter on-ramp to programmatic video. Describe it in English, Claude writes the TypeScript, Remotion renders frame by frame. Best for explainers and short-form.
npx create-video@latest # Blank template, install Skills
by LobzyJay · ahujasid (MCP)
Drive Blender from text — objects, materials, lighting, cameras, renders — over the Blender MCP. Claude writes the bpy Python; you direct. No 3D skills required.
npx skills add LobzyJay/motion-design-with-claude --skill blender-motion
by LobzyJay · TheLlamainator (MCP)
Animate inside After Effects from a prompt — live MCP commands or generated JSX with ExtendScript expressions and an effects catalog. Loads when AE is the subject.
npx skills add LobzyJay/motion-design-with-claude --skill aftereffects-motion
Claude Design (canvas)
Four ways to drive the design product at claude.ai/design — chat on the left, a live code-based canvas on the right, so fonts, colors, and logos stay editable. Paid plan, web only.
by Anthropic · Claude Design
Finished web/app screens you can iterate element by element by chat — something flat image generators can't do. Best for mockups, carousels, and decks.
by Anthropic · Claude Design
Train the canvas on your brand — logo, fonts, colors — and it applies the system to everything. Hold several and switch per project. Feed it structure first.
by Anthropic · Claude Design
Build one perfect version, save it as a template, then pair it with any design system. The core trick for repeatable content that looks good every time.
by Anthropic · Claude Design
Presentations from a template and your brand colors, exportable. Hand off to Claude Code to ship as a real site, or export to Canva.
AI Product Interaction
Conceptual SKILL.md files from the open Owl-Listener/ai-design-skills repo (MIT). They make Claude design the behavior of AI products.
by Owl Listener
Treat the context window as a design material — token budgets, summarize vs. retrieve, priority ordering, and graceful degradation when it fills.
npx skills add Owl-Listener/ai-design-skills --skill context-window-design
by Owl Listener
Design turn-taking, repair sequences, and grounding checkpoints so a bot recovers from breakdowns instead of improvising.
npx skills add Owl-Listener/ai-design-skills --skill conversation-patterns
by Owl Listener
Rules for when the model should render UI components — date pickers, cards, charts — vs. plain text, and how to fall back safely.
npx skills add Owl-Listener/ai-design-skills --skill generative-ui
by Owl Listener
Stage how an AI reveals its power so users aren't overwhelmed on turn 1 or underusing the tool by turn 50.
npx skills add Owl-Listener/ai-design-skills --skill progressive-disclosure
by Owl Listener
Sequence text, image, and tool-use in one flow — when to look, when to call a tool, when to speak.
npx skills add Owl-Listener/ai-design-skills --skill multimodal-orchestration
by Owl Listener
Define when the agent leads vs. the user, and clean handoff signals so neither side stalls.
npx skills add Owl-Listener/ai-design-skills --skill mixed-initiative-flow
by Owl Listener
Read frustration from caps, punctuation, repetition, and latency — then adapt (simplify, slow down, offer a human) before the user rage-quits.
npx skills add Owl-Listener/ai-design-skills --skill frustration-detection
by Owl Listener
Design correction and rating mechanisms — ambient signals first, explicit ratings sparingly — that actually change behavior.
npx skills add Owl-Listener/ai-design-skills --skill feedback-loops
Prompt Architecture
Also from Owl-Listener/ai-design-skills — structure the system prompt and behavior so it holds across sessions and edge cases.
by Owl Listener
A clean anatomy — identity, context, rules, output spec, examples — with the important instructions first and last, where the model attends most.
npx skills add Owl-Listener/ai-design-skills --skill system-prompt-structure
by Owl Listener
Define a consistent character, voice, and boundaries once, so behavior holds across sessions instead of drifting per reply.
npx skills add Owl-Listener/ai-design-skills --skill persona-architecture
by Owl Listener
Per-context dials for formality, warmth, and confidence so the same model reads right in a crisis ticket and a welcome flow.
npx skills add Owl-Listener/ai-design-skills --skill tone-calibration
by Owl Listener
A response map for frustration, confusion, delight, and distress — validate without amplifying, de-escalate, hand off when needed.
npx skills add Owl-Listener/ai-design-skills --skill emotional-design
by Owl Listener
Parameterized prompt templates with named, typed, bounded variables and conditional sections — consistent output at scale from one source.
npx skills add Owl-Listener/ai-design-skills --skill template-design
by Owl Listener
Example sets that target the failure modes a model keeps missing — tricky cases move behavior more than ten lines of instruction.
npx skills add Owl-Listener/ai-design-skills --skill few-shot-patterns
by Owl Listener
Deliberate reasoning chains for multi-step tasks, structured rather than left to the model to improvise.
npx skills add Owl-Listener/ai-design-skills --skill chain-of-thought-design
by Owl Listener
Testable boundaries — format, length, tone, forbidden content — written so you can actually verify the model followed them.
npx skills add Owl-Listener/ai-design-skills --skill constraint-specification
Trust & Safety
The last three from Owl-Listener/ai-design-skills — trust signals, refusals, and transparency.
by Owl Listener
Explicit behavioral boundaries and refusal patterns — the do's and don'ts as enforceable lines, not vibes.
npx skills add Owl-Listener/ai-design-skills --skill guardrail-design
by Owl Listener
Confidence and source signals so users neither over- nor under-trust an answer — flag uncertainty instead of bluffing.
npx skills add Owl-Listener/ai-design-skills --skill trust-calibration
by Owl Listener
Surface what the model knows, doesn't know, and how sure it is, so users can calibrate their own reliance.
npx skills add Owl-Listener/ai-design-skills --skill transparency-patterns
Spotlight: give your agent eyes
The single highest-leverage skill here is playwright-mcp. Without it you're trusting a blind model. With it, the model opens a real browser, screenshots every page across viewports, compares to your reference, and refactors the CSS until it matches — it grades its own work.
claude mcp add playwright \ -s user -- npx @playwright/mcp@latest › Open the app in headless Chrome. Screenshot every layout at 1920 and 390 wide, compare to my reference, and fix the gaps.
Stack four, not forty-two.
Pick one base taste layer, add motion, one token system, and the feedback loop. Same tool, completely different output.
Base tastefrontend-design / impeccable / taste-skill
Pick one. This is the aesthetic floor.
Motionanimate
Motion that doesn't feel cheap.
Tokenstheme-factory
One token system, no one-off hex values.
Eyesplaywright
The feedback loop, so the model grades itself.
Skills set the aesthetic floor — they get you to senior-looking. But taste still comes from understanding the constraints, not from a blocklist of banned fonts. The judgment about which direction to commit to is still yours.
Get all 42 skills — free
Drop your email and the full directory unlocks instantly — every skill's GitHub repo, install line, and creator. Plus every other resource in the library. One email a week, unsubscribe anytime.
More from the library.
If you live in Claude Code, these pair with the skills above — the setup, the plugin walkthrough, and the autonomous-coding starter.
Setup guides
5 Claude Code Skills That Replaced My $150k Dev Team
These are the 5 agent skills I use every single day to get production-grade code from Claude Code. Each one is a small markdown fi…
Read guide ↗Setup guides
Claude Code Plugin
Plugin Run this inside claude code /plugin install claude-code-setup@claude-plugins-official Official GitHub Page…
Read guide ↗Playbooks
The Overnight AI Coding Starter Kit
Claude Code + Ralph Plugin Setup Guide What is this? A complete guide to setting up autonomous AI coding — where you give AI a tas…
Read guide ↗Playbooks
How to Become an AI Engineer in 6 Months — Complete Resource Guide
A practical, month-by-month roadmap with every resource you need. No CS degree required. Month 1: Coding & Fundamentals Goal: Beco…
Read guide ↗Kill the slop
Give your agent taste.
Stack three or four of these and the same prompt that produced generic slop starts shipping senior-looking work. Free — the whole directory, every repo, every install line.