Agent skill · design visual · secondsky
inspira-ui
120+ Vue/Nuxt animated components with TailwindCSS v4, motion-v, GSAP, Three.js. Use for hero sections, 3D effects, interactive backgrounds, or encountering setup, CSS variables, motion-v integration errors.
Why this skill is useful
Provides a library of 120+ animated components with specific integration patterns for Vue/Nuxt that the AI wouldn't generate on its own.
What it needs
Requires bun installed locally. About 5k tokens when loaded. Last updated 2026-08-06. 204 stars on the source repository.
What this skill does
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. Table of Contents 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 Key Benefits: 120+ copy-paste components (not a traditional npm library) Full TypeScript support with Vue 3 Composition API TailwindCSS v4 with OkLch color space Responsive and mobile-optimized Free and open source (MIT license) Quick Start 1. Install Core Dependencies 2. Setup CN Utility Create lib/utils.ts: 3. Configure CSS Variables Add to your main.css. See references/SETUP.md for complete CSS configuration with OkLch colors. 4. Verify Setup 5. Copy Components Browse inspira-ui.com/components, copy what you need into components/ui/. Secure Installation This installs 6+ packages including 3D libraries (three, ogl) with large dependency trees. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills secondsky/inspira-ui