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.
npx skills add https://github.com/secondsky/claude-skills --skill inspira-uiInspira 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.
Use Inspira UI when building:
Key Benefits:
# Required for all components
bun add -d clsx tailwind-merge class-variance-authority tw-animate-css
bun add @vueuse/core motion-v
# Optional: For 3D components (Globe, Cosmic Portal, etc.)
bun add three @types/three
# Optional: For WebGL components (Fluid Cursor, Neural Background, etc.)
bun add ogl
Create lib/utils.ts:
import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
Add to your main.css. See references/SETUP.md for complete CSS configuration with OkLch colors.
./scripts/verify-setup.sh
Browse inspira-ui.com/components, copy what you need into components/ui/.
This installs 6+ packages including 3D libraries (three, ogl) with large dependency trees. Before installing, follow supply chain security best practices:
npm config set ignore-scripts true (or Bun: disabled by default)socket package score npm <pkg> or use socket npm install <pkg> to check packagesLoad the dependency-upgrade skill for full security configuration including Socket CLI integration, cooldown setup, lockfile validation, and CI enforcement.
What type of effect do you need?
bun add three @types/threebun add ogl (for WebGL cursors)For complete implementation details (props, full code, installation):
Fetch https://inspira-ui.com/docs/llms-full.txt - LLM-optimized documentation with structured props tables and working code examples.
<template>
<AuroraBackground>
<Motion
:initial="{ opacity: 0, y: 40, filter: 'blur(10px)' }"
:while-in-view="{ opacity: 1, y: 0, filter: 'blur(0px)' }"
:transition="{ delay: 0.3, duration: 0.8, ease: 'easeInOut' }"
class="relative flex flex-col items-center gap-4 px-4"
>
<div class="text-center text-3xl font-bold md:text-7xl">
Your amazing headline
</div>
<ShimmerButton>Get Started</ShimmerButton>
</Motion>
</AuroraBackground>
</template>
<script setup lang="ts">
import { Motion } from "motion-v";
import AuroraBackground from "~/components/ui/AuroraBackground.vue";
import ShimmerButton from "~/components/ui/ShimmerButton.vue";
</script>
<script setup lang="ts">
// ALWAYS use interface-based props
interface Props {
title: string;
count?: number;
variant?: "primary" | "secondary";
}
const props = withDefaults(defineProps<Props>(), {
count: 0,
variant: "primary",
});
</script>
<script setup lang="ts">
// ALWAYS include explicit imports even with Nuxt auto-imports
import { ref, onMounted, computed } from "vue";
import { useWindowSize } from "@vueuse/core";
const { width } = useWindowSize();
</script>
<script setup lang="ts">
import { onUnmounted } from "vue";
let animationFrame: number;
let renderer: any;
onUnmounted(() => {
// CRITICAL: Clean up WebGL resources to prevent memory leaks
if (animationFrame) cancelAnimationFrame(animationFrame);
if (renderer) renderer.dispose();
});
</script>
<template>
<ClientOnly>
<FluidCursor />
</ClientOnly>
</template>
The original Inspira UI docs have --destructive-foreground set to the same color as --destructive, making text invisible. Use the corrected value:
:root {
--destructive: oklch(0.577 0.245 27.325);
--destructive-foreground: oklch(0.985 0 0); /* CORRECTED */
}
/* REQUIRED in main.css */
@import "tailwindcss";
@import "tw-animate-css"; /* Often forgotten! */
// DON'T: Object syntax
const props = defineProps({ title: { type: String } });
// DO: Interface syntax
interface Props { title: string; }
const props = defineProps<Props>();
<!-- WRONG: Will fail during SSR -->
<GithubGlobe :markers="markers" />
<!-- CORRECT -->
<ClientOnly>
<GithubGlobe :markers="markers" />
</ClientOnly>
as const// DON'T: TypeScript enums
enum ButtonVariant { Primary = "primary" }
// DO: as const objects
const ButtonVariants = { Primary: "primary" } as const;
Average Token Savings: ~65%
Errors Prevented: 13+ common issues including:
@import "tw-animate-css"For complete setup with all CSS variables: references/SETUP.md
For all 120+ components with dependencies: references/components-list.md
For troubleshooting common issues: references/TROUBLESHOOTING.md
For TypeScript patterns and conventions: references/CODE_PATTERNS.md
Frameworks: Vue, Vue 3, Nuxt, Nuxt 4, Composition API, script setup
Styling: TailwindCSS v4, OkLch, CSS variables, dark mode
Animation: motion-v, GSAP, Three.js, WebGL, OGL, canvas
Components: aurora background, shimmer button, morphing text, 3D globe, fluid cursor, confetti, neon border, icon cloud, flip card, particles
Use Cases: landing pages, hero sections, animated backgrounds, interactive UI, marketing sites, portfolios, 3D websites
Problems Solved: Vue animations, Nuxt animations, animated components, 3D effects, particle effects, modern UI effects
Production Status: ✅ Production-Ready
Token Efficiency: ✅ ~65% savings
Error Prevention: ✅ 13+ common issues prevented
Last Updated: 2025-11-12
Take secondsky/inspira-ui from the repository into ~/.claude/skills for personal
use, or into .claude/skills inside a project.
The agent identifies a skill by the name field in its header. Two skills with the
same name cannot sit side by side — one of them will be ignored.
The instructions reference npm.
Without those the skill loads but fails at the first command.