The Artifact Atelier

Claude Code Skills for Design

Curated skills that transform Claude from a generic coder into a design-aware craftsman. Install them and watch the slop disappear.

Official Skills

63+

Community Skills

11k

GitHub Stars

Commands

frontend-design

★★★★★

The anti-slop skill. Instructs Claude to make bold design decisions instead of defaulting to generic aesthetics. Works beautifully with React + Tailwind.

React Tailwind

web-artifacts-builder

★★★★★

Build complex HTML artifacts using React, Tailwind CSS, and shadcn/ui. Multi-component support with clean architecture.

Artifacts shadcn/ui

algorithmic-art

★★★★★

Generative art using p5.js with seeded randomness, flow fields, and particle systems. Reproducible beauty.

p5.js Generative

theme-factory

★★★★★

Toolkit for styling artifacts with themes. Slides, docs, reports, HTML pages — all with consistent visual identity.

Theming Multi-format

canvas-design

★★★★★

Visual art in .png and .pdf documents using design philosophy. Bridge between code and visual output.

PNG PDF

brand-guidelines

★★★★★

Apply brand colors and typography consistently across all outputs. Your design system, enforced.

Branding Typography

Owl-Listener / designer-skills

★★★★★

63 design skills + 27 commands organized into 8 plugins: research, systems, strategy, UI, interaction, prototyping, design ops, toolkit. MIT licensed.

/discover · /strategize · /handoff · /evaluate

obra / superpowers

★★★★★

20+ battle-tested skills including TDD, debugging, collaboration. The Swiss Army knife of Claude Code workflows.

/brainstorm · /write-plan · /execute-plan

TypeUI Design Skills

Registry of design skill files + CLI for pulling into agentic tools. Think npm for design intelligence.

Specialized Skills

claude-d3js-skill — D3.js visualizations
web-asset-generator — Favicons, icons, social images
frontend-slides — Animation-rich HTML presentations

awesome-claude-skills

travisvn — 11k stars. The definitive curated list.

Curated

awesome-claude-skills

ComposioHQ — Another well-maintained collection.

Community

shadcn/ui Official Skills

Pattern enforcement + component context.

Official

The shadcn/ui Ecosystem

172 community registries. Copy-paste ownership. The new standard for component architecture.

terminal

# Install any community component with a single command
npx shadcn add @aceternity/aurora-background
npx shadcn add @8bitcn/retro-button
npx shadcn add @arc/animated-card

Notable Community Registries

@8bitcn

8-bit retro styled components. Pixel-perfect nostalgia.

★★★★★

@aceternity

Aurora backgrounds, beams, lens effects. High-impact hero sections.

★★★★★

@arc

Animated, accessible UI components. Motion meets a11y.

★★★★★

@unlumen-ui

Serious attention to animation and design. Polished feel.

★★★★★

@agents-ui (LiveKit)

AI agent interface components. Built for conversational UIs.

★★★★★

@abui

Vercel components.build spec conformant. The official way.

★★★★★

Architecture Philosophy

✓ Copy-paste model: you own the code, zero lock-in
✓ Radix UI primitives: accessible by default
✓ Tailwind CSS: utility-first styling, full customization
✓ Registry schema: registry.json / registry-item.json, namespace support
✓ MCP integration: AI-native component discovery

Tailwind CSS v4

CSS-first configuration, native variables, OKLCH color science, and 3.5x faster builds. The engine under everything.

CSS — @theme block

@import "tailwindcss";

@theme {
  --font-display: "Satoshi", "sans-serif";
  --color-avocado-500: oklch(0.84 0.18 117.33);
  --ease-fluid: cubic-bezier(0.3, 0, 0, 1);
  --color-brand: oklch(0.6 0.25 290);
  --radius-card: 20px;
}

Key Features

CSS-First Configuration

The @theme {} block replaces tailwind.config.js entirely. All design tokens become native CSS custom properties on :root, meaning your editor, browser DevTools, and any CSS tooling can see and use them without a build step. Huge ergonomic win.

P3 Color Palette (OKLCH)

Upgraded from rgb to oklch for a wider gamut and more vivid colors. Perceptually uniform — meaning 0.5 lightness actually looks like 50% brightness across all hues, unlike HSL. P3 gamut means colors on modern Apple displays that sRGB literally cannot represent.

3D Transforms & Expanded Gradients

3D: rotate-x-*, rotate-y-*, scale-z-*, translate-z-* utilities.
Gradients: Conic (bg-conic-*), radial (bg-radial-*), angle (bg-linear-45), OKLCH interpolation modes. Build aurora effects natively.

Performance: 3.5x / 100x Faster

3.5x faster full builds compared to v3. Incremental rebuilds over 100x faster. Achieved through a new engine written in Rust (Oxide). Hot module reload is essentially instant on any project size.

Modern CSS: Container Queries, @starting-style, :has()

Built-in container queries (@container, @sm:, @max-md:). CSS enter/exit transitions via @starting-style — no JavaScript needed. not-* variant for :not(). Cascade layers, @property, color-mix(), logical properties. The full modern CSS toolbox, ergonomically wrapped.

Animation Libraries

From spring physics to After Effects exports. The tools that make interfaces feel alive and intentional.

Spring Physics

Timeline Sequencing

State Machines

Micro-interactions

Framer Motion (Motion)

★★★★★

React-native animation library. Spring physics, layout transitions, gesture support. The backbone of most Awwwards-winning React sites.

React Springs Gestures

GSAP (GreenSock)

★★★★★

Industry standard for complex timeline animations. ScrollTrigger for scroll-driven effects. Framework agnostic. The pro choice.

Any framework ScrollTrigger Timelines

Lottie / LottieFiles

★★★★★

Ultra-lightweight animation format exported from After Effects. Scriptable, interactive, runtime-manipulable. Perfect for icons and loading states.

After Effects JSON Lightweight

Rive

★★★★★

Interactive, state-machine-driven animations. More powerful than Lottie for complex interactivity. Real-time rendering engine with tiny runtime.

State machines Interactive Real-time

The New Wave: Animated Component Libraries

Pre-built, beautifully animated components that slot into your shadcn/ui stack. The fastest path from "blank page" to "I want to build things that look like THIS."

The Standard Stack

React + TypeScript + Tailwind CSS + Framer Motion

Every library in this section builds on this foundation.

Rank	Library	Signature Feature	Rating	License
01	Magic UI	50+ animated components on shadcn. Marquee, dock nav, hero video dialogs.	★★★★★	Free / OSS
02	Aceternity UI	Aurora gradients, beams, GitHub globe, lens effects. High impact.	★★★★★	MIT
03	UI Layout	Motion-focused: animated metrics, scroll reveals, image trails, cursor effects.	★★★★★	Free
04	Cult UI	Dynamic island components, shader effects, fractal grids.	★★★★★	shadcn-compat
05	Eldora UI	20+ clean animated components. Good middle ground.	★★★★★	Free
06	Syntax UI	Polished tabs, pricing tables, testimonials with motion.	★★★★★	Free
07	Hover.dev	38+ interactive animated components + templates.	★★★★★	Templates
08	Animata	Bento grids, fancy borders, mirror text, widget cards.	★★★★★	MIT
09	Inspira UI	Vue/Nuxt ecosystem. Glow borders, lamp effects, particle images.	★★★★★	Vue
10	LunarUI	Premium, tight polished set. React + Vue.	★★★★★	Premium

AI-Powered Design Tools

The market consolidated around three players in 2026. Natural language to production UI.

v0.dev

★★★★★

Vercel's UI component generator. Outputs actual shadcn/ui + Tailwind code. Best for devs with an existing codebase in the Next.js ecosystem.

Best for devs

Bolt.new

★★★★★

Full-stack app generation from prompts. Broader scope than v0 — functional apps, not just components. Rapid prototyping champion.

Full-stack

Lovable.dev

★★★★★

Similar to Bolt — complete functional apps from prompts. Strong on rapid prototyping and iteration loops.

Rapid prototyping

Modern UI Trends

The visual language of 2025-2026. Frosted glass, soft depth, and color science that wasn't possible two years ago.

Before & After: The Glassmorphism Effect

Before

Card Title

A basic card with flat styling, standard borders, and default system fonts.

Click me

After

Card Title

Frosted glass, OKLCH gradients, crafted typography, and depth through light.

Explore

Live CSS Technique Gallery

Gradient Mesh

Conic Gradient

Noise Texture

Glass Layers

CSS — Glassmorphism

.glass-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

Glassmorphism

Frosted glass via backdrop-filter: blur(). Semi-transparent backgrounds, subtle borders, depth through layering. Still the dominant trend.

Aurora Effects

Gradient mesh animations using OKLCH for vivid transitions. CSS conic/radial gradients combined with keyframe animation. This report's background is one.

Neumorphism

Soft, extruded appearance via inner/outer shadows. Beautiful in theory but accessibility concerns (low contrast) limit practical use. Best as an accent, not a system.

Typography & Font Pairing

The fonts that define the look of the modern web, and the pairings that make them sing together.

Pairing 01 — Editorial Elegance

The Quiet Power of Restraint

When a serif headline meets a clean sans-serif body, the contrast creates hierarchy without shouting. Playfair Display brings gravitas; Inter provides invisible comfort for long-form reading.

Pairing 02 — Warm Sophistication

Whispered Elegance, Steady Presence

Instrument Serif in italics has a calligraphic warmth that feels hand-touched. Paired with DM Sans, it balances personality with readability. The pairing used throughout this report.

Pairing 03 — Technical Precision

Engineered for Clarity

Space Grotesk has the geometric precision of a technical diagram but the warmth to work as a headline face. Paired with Inter for body text, it reads as authoritative but approachable. Ideal for developer tools and dashboards.

The 5 Essential Screen Fonts

Inter

The workhorse. Designed specifically for screens. Variable font, 9 weights. If in doubt, use Inter.

★★★★★

Geist

Vercel's font. Geometric, clean modern aesthetic. The look of the developer web in 2025-2026.

★★★★★

DM Sans

Low contrast geometric with a friendly feel. Reads warmer than Inter while maintaining professionalism.

★★★★★

Satoshi / Plus Jakarta Sans

Modern geometric sans-serifs popular in design tools. Satoshi for bold statements, Jakarta for rounded warmth.

★★★★★

CSS — Fluid Typography

/* Fluid type scale using clamp() */
--text-base: clamp(0.95rem, 0.88rem + 0.35vw, 1.1rem);
--text-xl:   clamp(1.3rem,  1.1rem + 1vw,   1.75rem);
--text-3xl:  clamp(2.2rem,  1.8rem + 2vw,  3.5rem);
--text-5xl:  clamp(3.5rem,  2.5rem + 5vw,  7rem);

Color Palette Tools & Science

OKLCH, P3 gamut, perceptual uniformity. Color isn't just aesthetics anymore — it's engineering.

This Report's OKLCH Palette

Violet

Blue

Cyan

Teal

Green

Amber

Rose

Continuous Palette Strip

Palette Generators

Coolors.co

Classic generator

Huemint

ML-powered

Realtime Colors

Live preview

accessibility.build

WCAG-compliant

Accessibility Quick Reference

Criterion	Ratio	Applies To
WCAG AA	4.5:1	Normal text (<18px)
WCAG AA Large	3:1	Large text (18px+ or 14px bold)
WCAG AAA	7:1	Enhanced contrast

CSS-Only Effects & Modern Techniques

Zero JavaScript. Zero dependencies. Just CSS doing things that used to require entire libraries.

Animated Gradients

@keyframes gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.aurora {
  background: linear-gradient(-45deg,
    oklch(0.55 0.28 290),
    oklch(0.72 0.18 200),
    oklch(0.65 0.25 350));
  background-size: 400% 400%;
  animation: gradient-shift 15s ease infinite;
}

Scroll-Driven Animations

/* No JavaScript needed */
.scroll-reveal {
  animation: fade-up both;
  animation-timeline: view();
  animation-range: entry 0% cover 40%;
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
}

The Modern CSS Toolkit

Shapes

clip-path

Complex shapes, polygon masks, text reveals. Pure CSS geometry.

Effects

backdrop-filter

Blur, brightness, contrast for frosted glass. The glassmorphism engine.

Transitions

@starting-style

Enter animations without JS. New CSS that replaces JS transition libraries for simple cases.

Scroll

animation-timeline: scroll()

Scroll-driven animations natively. Progress bars, parallax, reveals — no IntersectionObserver needed.

Logic

:has()

The parent selector CSS never had. Contextual styling based on children. Game-changer for forms.

Pages

View Transitions API

Page transition animations. Smooth cross-page morphs that previously required SPA frameworks.

Open Source Design Systems

The component libraries powering production applications. Compared by philosophy, not just feature count.

System	Approach	Best For	Rating
shadcn/ui	Copy-paste, Radix-based	Full control, customization	★★★★★
Radix UI	Headless primitives	Custom design systems	★★★★★
Mantine	Full-featured + hooks	Complex forms, advanced features	★★★★★
MUI	Material Design	Enterprise, corporate	★★★★★
Chakra UI	Accessible-first	Accessibility-focused projects	★★★★★
NextUI	Performance-optimized	Fast loading, SSR	★★★★★
DaisyUI	Tailwind component classes	Rapid prototyping	★★★★★
Park UI	Ark UI + Panda CSS	Modern alternative stack	★★★★★

SVG Illustration Libraries

Free, high-quality illustration sets for landing pages, onboarding, and empty states. 100+ sources catalogued at getillustrations.com.

unDraw

No attribution required. Growing library.

Humaaans

Mix-and-match human illustrations.

Open Peeps

Hand-drawn people for scenes.

Starter Toolkit

Three opinionated stacks, each tested and proven. Pick the one that matches your context and start building immediately.

Stack A

Beautiful HTML Artifacts

Self-contained, single-file. No build step, no framework. Just HTML that looks incredible. This report is built with Stack A.

Fonts: Inter + Instrument Serif via Google Fonts CDN
Colors: OKLCH-based palette with P3 gamut
Layout: CSS Grid + Flexbox
Effects: CSS gradients, backdrop-filter, clip-path
Animation: CSS @keyframes + transitions
Typography: Fluid type scale with clamp()

Stack B

React Applications

The production-grade stack for interactive apps. Component-driven with motion built into the foundation.

Base: shadcn/ui + Tailwind CSS v4
Animation: Magic UI or Aceternity UI (shadcn-compatible)
Motion: Framer Motion for page transitions
Icons: Lucide React
Font: Geist from Vercel
Tools: v0.dev for rapid component generation

Stack C

Claude Code Skills

Install these skills and Claude becomes a design-aware partner instead of a generic code generator.

frontend-design — Anti-slop design quality
web-artifacts-builder — Artifact creation framework
theme-factory — Consistent theming
Owl-Listener/designer-skills — Full design toolkit
algorithmic-art — Generative art via p5.js
brand-guidelines — Brand consistency enforcement

This card has a rotating gradient border

Pure CSS. No JavaScript. Uses @property for the angle, conic-gradient for the colors, and mask-composite: exclude to cut out the inner fill. One of the most requested effects in modern UI.

Claude Code Skills for Design

frontend-design

web-artifacts-builder

algorithmic-art

theme-factory

canvas-design

brand-guidelines

Owl-Listener / designer-skills

obra / superpowers

TypeUI Design Skills

Specialized Skills

awesome-claude-skills

awesome-claude-skills

shadcn/ui Official Skills

The shadcn/ui Ecosystem

Notable Community Registries

@8bitcn

@aceternity

@arc

@unlumen-ui

@agents-ui (LiveKit)

@abui

Architecture Philosophy

Tailwind CSS v4

Key Features

Animation Libraries

Framer Motion (Motion)

GSAP (GreenSock)

Lottie / LottieFiles

Rive

The New Wave: Animated Component Libraries

The Standard Stack

Creative Coding & Generative Art

AI-Powered Design Tools

v0.dev

Bolt.new

Lovable.dev

Modern UI Trends

Before & After: The Glassmorphism Effect

Card Title

Card Title

Live CSS Technique Gallery

Glassmorphism

Aurora Effects

Neumorphism

Typography & Font Pairing

The 5 Essential Screen Fonts

Inter

Geist

DM Sans

Satoshi / Plus Jakarta Sans

Color Palette Tools & Science

This Report's OKLCH Palette

Palette Generators

Coolors.co

Huemint

Realtime Colors

accessibility.build

Accessibility Quick Reference

CSS-Only Effects & Modern Techniques

Animated Gradients

Scroll-Driven Animations

The Modern CSS Toolkit

clip-path

backdrop-filter

@starting-style

animation-timeline: scroll()

:has()

View Transitions API

Open Source Design Systems

SVG Illustration Libraries

Starter Toolkit

Beautiful HTML Artifacts

React Applications

Claude Code Skills

This card has a rotating gradient border

Resource Directory