Design & Creative Skills

Comprehensive web design principles covering layout, typography, color theory, accessibility, and responsive patterns.

Create distinctive, production-grade frontend interfaces. Official Anthropic skill for UI/UX development with Claude Code.

Professional UI/UX design skill with Figma-to-code workflows, design system management, and accessibility-first component design.

Generate images using AI models (DALL-E, Stable Diffusion, Flux). Prompt engineering, style control, and batch generation.

Build and maintain Tailwind CSS design systems with tokens, component patterns, and consistent styling across projects.

shadcn/ui component library skill. Install, customize, and compose accessible React components with Radix UI and Tailwind.

Converts Figma design files into production-ready HTML, CSS, and React components with accurate spacing, typography, and responsive behavior.

Build and document reusable UI component libraries with Storybook, accessibility testing, design token integration, and multi-framework exports.

Sets up design token systems, component libraries, and style guides with consistent theming, spacing scales, and typography hierarchies.

Implements responsive design patterns using CSS Grid, Flexbox, and container queries with mobile-first breakpoint strategies.

Generate multi-mode design tokens and theme configurations for light/dark modes, brand palettes, and CSS custom properties compatible with any design system.

Audits web pages and components for WCAG 2.1/2.2 compliance, identifies accessibility violations, and generates fix recommendations with code examples.

Generates harmonious color schemes with WCAG accessibility checks, contrast ratio validation, and export to CSS custom properties or design tokens.

Create CSS animations, Framer Motion sequences, Lottie JSON exports, and GSAP timelines for UI transitions, loading states, and micro-interactions.

Creates optimized SVG icons with consistent stroke weights, viewBox sizing, and accessibility attributes. Supports icon sprite sheet generation.

Generate low-fidelity wireframes and information architecture diagrams using ASCII art, Mermaid, or HTML/CSS skeleton layouts for rapid UX prototyping.

Optimize SVG files for web use by removing redundant markup, applying SVGO transforms, converting to symbol sprites, and generating accessible inline SVGs.

Create and manage DESIGN.md files for project design specs

Generate walkthrough videos from Stitch app designs

Create animation-rich HTML presentations from scratch or PowerPoint

Gives Claude a design system and philosophy with 50 visual styles and matched typography. Outputs bold aesthetic choices, distinctive typography, purposeful color palettes, and production-ready component code.