55 skills
Animation & Motion (17)
12 Principles of Animation
Audit animations against Disney's 12 principles adapted for web
Audit animations against Disney's 12 principles adapted for web
npx ui-skills add 12-principles-of-animation
Animate Presence
Exit animations with Motion's AnimatePresence for modals, toasts, page transitions
Exit animations with Motion's AnimatePresence for modals, toasts, page transitions
npx ui-skills add animate-presence
CSS Transitions
CSS transitions reference for timing, easing, and property selection
CSS transitions reference for timing, easing, and property selection
npx ui-skills add css-transitions
Easing Blueprint
Easing curve selection guide for matching motion to intent
Easing curve selection guide for matching motion to intent
npx ui-skills add easing-blueprint
Axiom UIKit Animation Debugging
Diagnose CAAnimation issues, spring physics, device-specific jank
Diagnose CAAnimation issues, spring physics, device-specific jank
npx skills add syntag-umd/claude-agent-skills --skill axiom-uikit-animation-debugging
Fixing Motion Performance
Fix repaints, layout thrashing, GPU layer issues in animations
Fix repaints, layout thrashing, GPU layer issues in animations
npx ui-skills add fixing-motion-performance
Framer Motion Animator
Page transitions, gestures, scroll-based animations, orchestrated sequences
Page transitions, gestures, scroll-based animations, orchestrated sequences
npx skills add syntag-umd/claude-agent-skills --skill framer-motion-animator
Motion Gestures
whileHover, whileTap, whileDrag, onPan, whileFocus, whileInView - spring-first gesture patterns for React
whileHover, whileTap, whileDrag, onPan, whileFocus, whileInView - spring-first gesture patterns for React
npx ui-skills add motion-gestures
Motion (Nuxt)
Motion component API and composables for Vue 3 / Nuxt
Motion component API and composables for Vue 3 / Nuxt
npx skills add onmax/nuxt-skills --skill motion
Shared Layout Animations
Seamless layout transitions using Motion's layoutId
Seamless layout transitions using Motion's layoutId
npx ui-skills add shared-layout-animations
Shadow Design
Generate beautiful, realistic layered CSS shadows
Generate beautiful, realistic layered CSS shadows
npx ui-skills add shadow-design
Gradients
Linear, radial, conic, diamond - color spaces, color hints, layering, GPU-safe animation
Linear, radial, conic, diamond - color spaces, color hints, layering, GPU-safe animation
npx ui-skills add gradients
Three.js Animation
Keyframe, skeletal, morph target animations and procedural motion
Keyframe, skeletal, morph target animations and procedural motion
npx skills add cloudai-x/threejs-skills --skill threejs-animation
Animation Rules
Comprehensive UI animation guidelines - timing, easing, performance, accessibility, springs, gestures
Comprehensive UI animation guidelines - timing, easing, performance, accessibility, springs, gestures
npx ui-skills add animation-rules
Yui's Bouncy Motion
Damped-physics keyframe animations that settle and bounce naturally. Amplitude-decay ladders, two-phase chaining, mass-matched timing
Damped-physics keyframe animations that settle and bounce naturally. Amplitude-decay ladders, two-phase chaining, mass-matched timing
Custom skill: ~/.claude/commands/Yuis-bouncy-motion.md
Yui's Material Technique
CSS mechanics for material behavior - asymmetric squash, border-radius morphs, discrete pivot swaps, independent transform channels
CSS mechanics for material behavior - asymmetric squash, border-radius morphs, discrete pivot swaps, independent transform channels
Custom skill: ~/.claude/commands/yuis-material-technique.md
Yui Reveal Transitions
CSS reveal animations - shutter, curtain, paint wipe, thread weave. Two-phase chaining, staggered delays, directional wipes
CSS reveal animations - shutter, curtain, paint wipe, thread weave. Two-phase chaining, staggered delays, directional wipes
Custom skill: ~/.claude/commands/yui-reveal-transition-animations.md
UI/UX Design (16)
Baseline UI
Opinionated UI baseline to prevent AI-generated interface slop
Opinionated UI baseline to prevent AI-generated interface slop
npx ui-skills add baseline-ui
Canvas Design
Create visual art in .png and .pdf using design philosophy
Create visual art in .png and .pdf using design philosophy
npx ui-skills add canvas-design
Design Lab
Generate five distinct UI variations, collect feedback, produce implementation plans
Generate five distinct UI variations, collect feedback, produce implementation plans
npx ui-skills add design-lab
Frontend Design
Production-grade frontend interfaces with high design quality
Production-grade frontend interfaces with high design quality
npx skills add anthropics/skills --skill frontend-design
Implement Design
Translate Figma designs into production code with 1:1 visual fidelity
Translate Figma designs into production code with 1:1 visual fidelity
npx skills add figma/mcp-server-guide --skill implement-design
Interaction Design
Microinteractions, motion design, transitions, user feedback patterns
Microinteractions, motion design, transitions, user feedback patterns
npx ui-skills add interaction-design
Interface Design
Dashboards, admin panels, apps, tools, interactive products
Dashboards, admin panels, apps, tools, interactive products
npx ui-skills add interface-design
Mobile Design
Mobile-first design for iOS and Android, touch, performance, offline
Mobile-first design for iOS and Android, touch, performance, offline
npx skills add sickn33/antigravity-awesome-skills --skill mobile-design
UI/UX Pro Max
50 styles, 21 palettes, 50 font pairings, 9 stacks
50 styles, 21 palettes, 50 font pairings, 9 stacks
npx ui-skills add ui-ux-pro-max
Web Design Guidelines
Review UI against Web Interface Guidelines for best practices
Review UI against Web Interface Guidelines for best practices
npx skills add vercel-labs/agent-skills --skill web-design-guidelines
Interface Craft
Storyboard animation DSL, DialKit live controls, design critique - by Josh Puckett
Storyboard animation DSL, DialKit live controls, design critique - by Josh Puckett
npx ui-skills add interface-craft
UI Questionnaire
Ask detailed questions before implementing UI - visual, typography, animations, states, accessibility
Ask detailed questions before implementing UI - visual, typography, animations, states, accessibility
npx ui-skills add ui-questionnaire
Rams
Run accessibility and visual design review
Run accessibility and visual design review
npx ui-skills add rams
Emil Design Eng
Emil Kowalski's philosophy on UI polish, component design, animation decisions, and invisible details
Emil Kowalski's philosophy on UI polish, component design, animation decisions, and invisible details
npx skills add emilkowalski/skill
Make Interfaces Feel Better
Design engineering principles for polish - hover states, shadows, borders, typography, micro-interactions, optical alignment
Design engineering principles for polish - hover states, shadows, borders, typography, micro-interactions, optical alignment
npx skills add jakubkrehel/make-interfaces-feel-better
OKLCH Skill
OKLCH color space - convert hex/rgb/hsl, generate palettes, check contrast, handle gamut, theme with Tailwind v4
OKLCH color space - convert hex/rgb/hsl, generate palettes, check contrast, handle gamut, theme with Tailwind v4
npx skills add anthropics/skills --skill oklch-skill
Layout & Responsive (6)
Frontend Responsive Design Standards
Responsive layouts with fluid containers and mobile-first breakpoints
Responsive layouts with fluid containers and mobile-first breakpoints
npx skills add am-will/codex-skills --skill "Frontend Responsive Design Standards"
Responsive Design
Container queries, fluid typography, CSS Grid, mobile-first strategies
Container queries, fluid typography, CSS Grid, mobile-first strategies
npx skills add wshobson/agents --skill responsive-design
Responsive Web Design
CSS Grid, Flexbox, media queries, adaptive interfaces across devices
CSS Grid, Flexbox, media queries, adaptive interfaces across devices
npx skills add aj-geddes/useful-ai-prompts --skill responsive-web-design
Tailwind CSS
Utility-first framework for rapid UI development with dark mode
Utility-first framework for rapid UI development with dark mode
npx skills add bobmatnyc/claude-mpm-skills --skill tailwind-css
Tailwind CSS Mobile First
Mobile-first responsive patterns for Tailwind CSS v4
Mobile-first responsive patterns for Tailwind CSS v4
npx skills add josiahsiegel/claude-plugin-marketplace --skill tailwindcss-mobile-first
Tailwind CSS Patterns
Layout utilities, flexbox, grid, spacing, typography, colors
Layout utilities, flexbox, grid, spacing, typography, colors
npx skills add giuseppe-trisciuoglio/developer-kit --skill tailwind-css-patterns
Design Systems & Tokens (3)
Design Systems
Build and scale design systems, component libraries, brand consistency
Build and scale design systems, component libraries, brand consistency
npx skills add syntag-umd/claude-agent-skills --skill design-systems
Design Tokens
DTCG spec tokens, color spaces, theming, multi-platform systems
DTCG spec tokens, color spaces, theming, multi-platform systems
npx skills add syntag-umd/claude-agent-skills --skill design-tokens
Tailwind Advanced Design Systems
Advanced design systems with design tokens and @theme configuration
Advanced design systems with design tokens and @theme configuration
npx skills add syntag-umd/claude-agent-skills --skill tailwindcss-advanced-design-systems
Accessibility & Quality (4)
Fixing Accessibility
Identify and fix accessibility issues across components
Identify and fix accessibility issues across components
npx ui-skills add fixing-accessibility
Fixing Metadata
Ship correct, complete metadata for SEO and social sharing
Ship correct, complete metadata for SEO and social sharing
npx ui-skills add fixing-metadata
WCAG Audit Patterns
WCAG 2.2 audits with automated testing and remediation guidance
WCAG 2.2 audits with automated testing and remediation guidance
npx ui-skills add wcag-audit-patterns
Web Performance Optimization
Core Web Vitals, bundle size, caching strategies, runtime performance
Core Web Vitals, bundle size, caching strategies, runtime performance
npx skills add sickn33/antigravity-awesome-skills --skill web-performance-optimization
Code Quality & Review (4)
Code Reviewer
Review code for correctness, maintainability, and project standards
Review code for correctness, maintainability, and project standards
npx skills add google-gemini/gemini-cli --skill code-reviewer
Frontend Patterns
React, Next.js, state management, performance optimization patterns
React, Next.js, state management, performance optimization patterns
npx skills add sickn33/antigravity-awesome-skills --skill frontend-patterns
Karpathy Guidelines
Reduce common LLM coding mistakes, surgical changes, surface assumptions
Reduce common LLM coding mistakes, surgical changes, surface assumptions
npx skills add forrestchang/andrej-karpathy-skills --skill karpathy-guidelines
Vercel React Best Practices
React and Next.js performance optimization from Vercel Engineering
React and Next.js performance optimization from Vercel Engineering
npx skills add vercel-labs/agent-skills --skill vercel-react-best-practices
Workflow & Planning (4)
Ask Questions if Underspecified
Clarify requirements before implementing when doubts arise
Clarify requirements before implementing when doubts arise
npx skills add trailofbits/skills --skill ask-questions-if-underspecified
Executing Plans
Execute implementation plans in separate sessions with review checkpoints
Execute implementation plans in separate sessions with review checkpoints
npx skills add obra/superpowers --skill executing-plans
Find Skills
Discover and install new agent skills from the community
Discover and install new agent skills from the community
npx skills add vercel-labs/skills --skill find-skills
Humanizer
Remove signs of AI-generated writing to sound more natural
Remove signs of AI-generated writing to sound more natural
npx skills add blader/humanizer --skill humanizer
Platform Specific (1)
SwiftUI UI Patterns
SwiftUI views, TabView architecture, component-specific patterns
SwiftUI views, TabView architecture, component-specific patterns
npx ui-skills add swiftui-ui-patterns
MCP Servers (5)
Motion
Motion.dev Studio, animation code generation
Motion.dev Studio, animation code generation
motion
Pencil
.pen design files
.pen design files
pencil
Figma
Figma design integration
Figma design integration
figma
Vercel
Deploy, manage projects, and fetch logs from Vercel
Deploy, manage projects, and fetch logs from Vercel
vercel
Context7
Up-to-date library documentation
Up-to-date library documentation
context7