Is TailwindCSS v4 mandatory for these components?

The components are specifically optimized for TailwindCSS v4 features like the OkLch color space and the new CSS-first configuration approach.

Which animation libraries are included in this skill?

The skill provides implementation guidance for motion-v, GSAP, Three.js, and OGL, covering everything from simple transitions to complex WebGL effects.

Does Inspira UI support Nuxt 4?

Yes, Inspira UI is fully compatible with Nuxt 4 and Vue 3, providing specific patterns for ClientOnly wrappers to ensure SSR compatibility.

Does this skill handle accessibility?

Yes, it includes critical fixes for common accessibility bugs, such as correcting foreground color contrasts for destructive UI actions.

How does this skill save AI tokens?

By providing Claude with structured implementation patterns and pre-verified code, it reduces the need for iterative debugging and trial-and-error prompting, saving approximately 65% in token usage.

Inspira UI for Vue and Nuxt

Name: Inspira UI for Vue and Nuxt
Author: secondsky

bysecondsky

•

Design Tools

Streamlines the implementation of over 120 animated Vue and Nuxt components using TailwindCSS v4, motion-v, and Three.js.

Inspira UI is a production-ready design skill that empowers Claude to build high-performance, visually stunning interfaces using a collection of 120+ animated components. Optimized for Vue 3 and Nuxt 4, it leverages modern styling tools like TailwindCSS v4 and advanced animation libraries such as GSAP and Three.js. This skill helps developers bypass common configuration hurdles, such as CSS variable setup and SSR-related WebGL issues, while offering significant token savings by providing direct, verified implementation patterns for complex UI elements like 3D globes, aurora backgrounds, and interactive particle systems.

Key Features

01Native support for TailwindCSS v4 and OkLch color space configurations.

02Integrated 3D and WebGL capabilities using Three.js and OGL.

03Pre-configured error handling for common SSR and accessibility pitfalls.

0421 GitHub stars

05Automated setup for complex animation libraries like motion-v and GSAP.

06120+ copy-paste components for Vue 3 Composition API and Nuxt 4.

Use Cases

01Developing interactive portfolios featuring custom cursors and fluid typography.

02Building high-conversion landing pages with immersive 3D hero sections and backgrounds.

03Creating data-rich dashboards with animated 3D globes and visualization components.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add secondsky/claude-skills inspira-ui

For use in Claude.ai and ChatGPT

Download Skill