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

•

Herramientas de Diseño

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

Acerca de

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.

Características Principales

Native support for TailwindCSS v4 and OkLch color space configurations.
Integrated 3D and WebGL capabilities using Three.js and OGL.
Pre-configured error handling for common SSR and accessibility pitfalls.
21 GitHub stars
Automated setup for complex animation libraries like motion-v and GSAP.
120+ copy-paste components for Vue 3 Composition API and Nuxt 4.

Casos de Uso

Developing interactive portfolios featuring custom cursors and fluid typography.
Building high-conversion landing pages with immersive 3D hero sections and backgrounds.
Creating data-rich dashboards with animated 3D globes and visualization components.

Acerca de

Características Principales

Native support for TailwindCSS v4 and OkLch color space configurations.
Integrated 3D and WebGL capabilities using Three.js and OGL.
Pre-configured error handling for common SSR and accessibility pitfalls.
21 GitHub stars
Automated setup for complex animation libraries like motion-v and GSAP.
120+ copy-paste components for Vue 3 Composition API and Nuxt 4.

Casos de Uso

Developing interactive portfolios featuring custom cursors and fluid typography.
Building high-conversion landing pages with immersive 3D hero sections and backgrounds.
Creating data-rich dashboards with animated 3D globes and visualization components.