Awesome Design Skills: A Curated Guide
A verified, curated directory of design skills for AI coding agents. Helps you pick the right skill for logos, UI components, animations, presentations, icons, and full design systems.
Skill Directory
Visual Design & UI Systems
| Skill |
What It Does |
Install |
Source |
| UI/UX Pro Max |
67 UI styles, 161 industry rules, 161 color palettes, 57 font pairings, 25 chart types. Most comprehensive UI system. |
git clone https://github.com/nextlevelbuilder/ui-ux-pro-max-skill ~/.claude/skills/ui-ux-pro-max |
GitHub |
| Taste |
Senior UI/UX engineering with metric-based rules. 7 variants: core taste + soft (premium), minimalist (editorial), brutalist, stitch (Google Stitch), output (anti-truncation), redesign. |
git clone https://github.com/Leonxlnx/taste-skill ~/.claude/skills/taste |
GitHub |
| Impeccable |
18 design sub-skills (/polish, /audit, /typeset, /overdrive, /colorize, /layout, etc.). Anti-pattern detection. CLI scanner with 24 design quality checks. |
git clone https://github.com/pbakaus/impeccable ~/.claude/skills/impeccable |
GitHub |
| Design & Refine |
Generates multiple distinct UI variations with side-by-side comparison at /__design_lab. Figma-style commenting. Next.js, Vite, Remix, Astro. |
git clone https://github.com/0xdesign/design-plugin ~/.claude/skills/design-plugin |
GitHub |
| Interface Design |
Design engineering with craft, memory, and enforcement. 6 design directions (precision, warmth, sophistication, etc.) for consistent UI across projects. |
git clone https://github.com/Dammyjay93/interface-design ~/.claude/skills/interface-design |
GitHub |
Components & Icons
| Skill |
What It Does |
Install |
Source |
| Shadcnblocks |
Expert knowledge of 1,338 blocks and 1,189 shadcn/ui components. Intelligent component selection and composition. |
git clone https://github.com/masonjames/Shadcnblocks-Skill ~/.claude/skills/shadcnblocks |
GitHub |
| Better Icons |
Search 200,000+ icons from 150+ collections (Lucide, Material, Heroicons, Tabler). Auto-learns your preferred icon sets. React/Vue/Svelte/SVG export. |
git clone https://github.com/better-auth/better-icons ~/.claude/skills/better-icons |
GitHub |
SVG & Logo Design
| Skill |
What It Does |
Install |
Source |
| SVG Design |
Comprehensive SVG creation and editing. Logos, icons, path commands, gradients, masks, filters, CSS animation, optimization/sprites, accessibility, boolean operations. 8 reference files. |
git clone https://github.com/tryopendata/skills ~/.claude/skills/tryopendata-skills |
GitHub |
| SVG Logo Designer |
Professional vector logos with 3-5 concepts per project. Horizontal, vertical, square, icon-only layouts. Clean semantic SVG. |
git clone https://github.com/rknall/claude-skills ~/.claude/skills/rknall-claude-skills |
GitHub |
| Algorithmic Art |
p5.js generative art with seeded randomness, flow fields, particle systems. 90% algorithmic, 10% parameters. |
Part of Anthropic Skills |
GitHub |
SVG workflow tips: Use SVG Design for hands-on SVG creation, editing, and optimization (SVGO, sprites, boolean ops). Use SVG Logo Designer for quick multi-concept logo generation. Pair with Anime.js v4 for SVG morphing and timeline animation. Use Better Icons when you need existing icons in SVG format rather than creating from scratch. Visualise handles quick inline SVG diagrams without a dedicated SVG skill.
3D & Creative Coding
| Skill |
What It Does |
Install |
Source |
| Three.js Skills |
3D scenes, geometry, materials, lighting, camera controls, WebXR integration. Full Three.js API reference. |
git clone https://github.com/cloudai-x/threejs-skills ~/.claude/skills/threejs |
GitHub |
| WebGPU Skill |
GPU compute and shaders using WebGPU and Three.js Shading Language (TSL). |
git clone https://github.com/dgreenheck/webgpu-claude-skill ~/.claude/skills/webgpu |
GitHub |
| Motion Canvas |
Programmatic vector animations with TypeScript. Explainer videos, tutorials, data visualizations. |
git clone https://github.com/apoorvlathey/motion-canvas-skills ~/.claude/skills/motion-canvas |
GitHub |
Image Generation
| Skill |
What It Does |
Install |
Source |
| Z-Image |
Generate images from text using Alibaba's free Z-Image-Turbo model (ModelScope API). 2,000 free calls/day. Custom dimensions 512-2048px. English + Chinese prompts. |
git clone https://github.com/FuturizeRush/zimage-skill ~/.claude/skills/zimage |
GitHub |
Animation & Motion
| Skill |
What It Does |
Install |
Source |
| Animate |
Animation patterns for Next.js/React based on Emil Kowalski's course. 8 working examples. |
git clone https://github.com/delphi-ai/animate-skill ~/.claude/skills/animate |
GitHub |
| CSS Animation |
Self-contained HTML/CSS animations for feature walkthroughs, demos, onboarding. No JS dependencies (uses Google Fonts). |
git clone https://github.com/neonwatty/css-animation-skill ~/.claude/skills/css-animation |
GitHub |
| Anime.js v4 |
Anime.js v4 animation patterns with API reference and examples. Timeline sequencing, staggering, SVG morphing. |
git clone https://github.com/BowTiedSwan/animejs-skills ~/.claude/skills/animejs |
GitHub |
Data Visualization
| Skill |
What It Does |
Install |
Source |
| Visualise |
Inline interactive visuals: SVG diagrams, HTML widgets, Chart.js charts, explainers. Progressive loading. No dependencies. |
git clone https://github.com/bentossell/visualise ~/.claude/skills/visualise |
GitHub |
Presentations & Documents
| Skill |
What It Does |
Install |
Source |
| PPTX |
Full PowerPoint toolkit: read, edit, create .pptx files. Thumbnail grids, XML access, PDF conversion. |
Part of Anthropic Skills. Deps: pip install "markitdown[pptx]" Pillow + npm install -g pptxgenjs |
GitHub |
Theming & Branding
| Skill |
What It Does |
Install |
Source |
| Theme Factory |
10 pre-set themes with colors/fonts. Apply to any artifact. |
Part of Anthropic Skills |
GitHub |
| Brand Guidelines |
Apply Anthropic's brand colors and typography. Template for creating brand guideline skills. |
Part of Anthropic Skills |
GitHub |
| Canvas Design |
Advanced typography with 80+ fonts, color harmony, and text rendering effects. |
Part of Anthropic Skills |
GitHub |
| Web Artifacts Builder |
Multi-component HTML artifacts using React, Tailwind, shadcn/ui. For claude.ai web artifacts. |
Part of Anthropic Skills |
GitHub |
Which Skill Should I Use?
By Task
| Task |
Recommended Skill |
Why |
| "Design a landing page" |
UI/UX Pro Max + Taste (soft) |
Pro Max gives structure, Taste gives premium feel |
| "Make a logo" |
SVG Design or SVG Logo Designer |
SVG Design for full control (path editing, optimization); Logo Designer for quick 3-5 concept generation |
| "Add animations" |
Animate (React/Next.js), CSS Animation (vanilla), or Anime.js (timeline/SVG) |
Pick by framework and complexity |
| "Find icons" |
Better Icons |
200K+ icons, auto-learns preferences |
| "Build a component library" |
Shadcnblocks + Impeccable |
Shadcnblocks for components, Impeccable for QA |
| "Create a presentation" |
PPTX |
Full PowerPoint read/write/create |
| "Redesign my app" |
Taste (redesign variant) |
Audits and upgrades without breaking functionality |
| "Make a chart/diagram" |
Visualise |
Inline interactive charts and diagrams |
| "Design review / audit" |
Impeccable |
24 design quality checks + /audit command |
| "Apply a theme" |
Theme Factory |
10 pre-built themes, instant application |
| "Create/edit SVG icons" |
SVG Design |
Path commands, icon grids, pixel alignment, sprites |
| "Optimize SVGs" |
SVG Design |
SVGO config, sprite sheets, file-size reduction |
| "Animate SVG elements" |
SVG Design (CSS) or Anime.js (JS) |
SVG Design for CSS keyframes; Anime.js for timeline/morphing |
| "Build an icon system" |
SVG Design + Better Icons |
SVG Design for custom icons; Better Icons for 200K+ existing |
| "Generate data art" |
Algorithmic Art |
p5.js generative art with seeded randomness |
| "Build a 3D scene" |
Three.js Skills |
Full Three.js API + WebXR |
| "Create an animated explainer" |
Motion Canvas |
TypeScript vector animations |
| "Generate an image" |
Z-Image |
Free, 2K calls/day, no OpenAI key needed |
| "Compare UI options" |
Design & Refine |
Side-by-side variations with commenting |
By Framework
| Framework |
Best Skills |
| Next.js / React |
Taste, Animate, Shadcnblocks, Design & Refine |
| Tailwind CSS |
UI/UX Pro Max, Impeccable, Shadcnblocks |
| Vanilla HTML/CSS |
CSS Animation, Visualise, SVG Logo Designer |
| Vue / Svelte |
Better Icons (multi-framework), UI/UX Pro Max |
| Three.js / WebGL |
Three.js Skills, WebGPU Skill |
| SVG / Vector Graphics |
SVG Design, SVG Logo Designer, Visualise |
| p5.js / Creative Coding |
Algorithmic Art |
| PowerPoint |
PPTX |
Security Notes
All skills listed here have been reviewed for safety:
- No
curl | sh pipes or obfuscated code
- No credential harvesting (env var collection)
- No base64 decoding of hidden payloads
- No raw IP URL connections
Before installing any skill not listed here, check for these patterns:
# Quick security scan
grep -rn 'curl.*|.*sh\|base64.*decode\|eval(\|exec(' /path/to/skill/ --include="*.md" --include="*.js" --include="*.ts" --include="*.py" --include="*.sh"
Tips
- Start with one skill per category. Don't install everything at once.
- Taste + UI/UX Pro Max is the most popular combination for general UI work.
- Impeccable is the best for design QA and catching anti-patterns.
- Skills that are "Part of Anthropic Skills" come from the official Anthropic collection and are the safest option.
- Check skill GitHub repos for recent activity — abandoned skills may have outdated patterns.
- When skills conflict (different design opinions), the last-installed skill's rules typically take precedence.
