Inspira Ui

This is a comprehensive skill for working with Inspira UI, a library of 120+ animated Vue/Nuxt components built on TailwindCSS v4, motion-v, GSAP, and Three.js. It's especially useful if you're building landing pages with hero sections, 3D visualizations, or interactive backgrounds and want to avoid the usual setup headaches around CSS variables and motion-v integration. The skill includes verified component selection workflows, explicit import patterns to avoid auto-import issues, and WebGL cleanup code to prevent memory leaks. One notable detail: it flags and fixes an accessibility bug in the original docs where destructive foreground text was invisibly the same color as its background. The security guidance around Three.js dependencies and supply chain verification is also worth following.

skills.sh installs: 572
GitHub stars: 248
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add secondsky/claude-skills --skill inspira-ui --agent claude-code

Installs into .claude/skills of the current project.

Files

Inspira UI - Animated Vue/Nuxt Component Library

Inspira UI is a collection of 120+ reusable, animated components powered by TailwindCSS v4, motion-v, GSAP, and Three.js — crafted to help ship beautiful Vue and Nuxt applications faster.

When to Use
Quick Start
Component Selection
Core Patterns
Critical Pitfalls
Detailed References

When to Use This Skill

Use Inspira UI when building:

Animated landing pages with hero sections, testimonials, and effects
Modern web applications requiring 3D visualizations and interactive elements
Marketing sites with eye-catching backgrounds and text animations
Portfolio sites with image galleries, carousels, and showcase effects
Interactive experiences with custom cursors, special effects, and particle systems
Vue 3 or Nuxt 4 projects requiring production-ready animated components