inspira-ui

secondsky/claude-skillsArchitecture & DesignAudit failedSnapshot 8a29aa8149b0

Installs: 0

Summary

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.

SKILL.md

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

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

# 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

import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

./scripts/verify-setup.sh

<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>

: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>

// DON'T: TypeScript enums
enum ButtonVariant { Primary = "primary" }

// DO: as const objects
const ButtonVariants = { Primary: "primary" } as const;

inspira-ui

Summary

SKILL.md

Inspira UI - Animated Vue/Nuxt Component Library

Table of Contents

When to Use This Skill

Quick Start

1. Install Core Dependencies

2. Setup CN Utility

3. Configure CSS Variables

4. Verify Setup

5. Copy Components

Secure Installation

Component Selection Workflow

Core Usage Patterns

Pattern 1: Animated Landing Page

Pattern 2: Props with TypeScript Interfaces

Pattern 3: Explicit Imports (Critical for Vue.js Compatibility)

Pattern 4: WebGL Component Cleanup

Pattern 5: Client-Only Wrapper (Nuxt)

Critical Pitfalls to Avoid

1. Accessibility Bug (CRITICAL)

2. Missing CSS Imports

3. Wrong Props Syntax

4. Three.js Without ClientOnly (Nuxt)

5. Using Enums Instead of `as const`

Token Efficiency

Detailed Documentation

Keywords

Resources

Related skills

inspira-ui

Summary

Inspira UI - Animated Vue/Nuxt Component Library

Table of Contents

When to Use This Skill

Quick Start

1. Install Core Dependencies

2. Setup CN Utility

3. Configure CSS Variables

4. Verify Setup

5. Copy Components

Secure Installation

Component Selection Workflow

Core Usage Patterns

Pattern 1: Animated Landing Page

Pattern 2: Props with TypeScript Interfaces

Pattern 3: Explicit Imports (Critical for Vue.js Compatibility)

Pattern 4: WebGL Component Cleanup

Pattern 5: Client-Only Wrapper (Nuxt)

Critical Pitfalls to Avoid

1. Accessibility Bug (CRITICAL)

2. Missing CSS Imports

3. Wrong Props Syntax

4. Three.js Without ClientOnly (Nuxt)

5. Using Enums Instead of as const

Token Efficiency

Detailed Documentation

Keywords

Resources

Related skills

5. Using Enums Instead of `as const`