Inspira UI

What it does

When your agent uses it

• Interactive backgrounds
• Encountering setup
• Motion-v integration errors

Example prompts

• “/inspira-ui”

Requirements

• Node.js
• A Bash shell
• Pre-approved tools (allowed-tools): bash, read, glob, grep

Workflow steps

10 steps, taken from the step headings in SKILL.md.

1. 1Install Core Dependencies
2. 2Setup CN Utility
3. 3Configure CSS Variables
4. 4Verify Setup
5. 5Copy Components
6. 6Accessibility Bug (CRITICAL)
7. 7Missing CSS Imports
8. 8Wrong Props Syntax
9. 9Three.js Without ClientOnly (Nuxt)
10. 10Using Enums Instead of as const

What it can do on your machine

Read from SKILL.md and the folder at commit 8837836. It shows what the files ask for, not the result of running them.

• Tool permissions

  Pre-approves these tools, so the agent can use them without asking each time:

  • bash
  • read
  • glob
  • grep

  From allowed-tools in the SKILL.md frontmatter.

• Runs code

  Ships 2 files in scripts/ (Shell), which the agent can run.

  Shell commands in SKILL.md call:

  • bun
  • npm

  From the folder's file list and the shell code blocks in SKILL.md.

• Network

  Links to these hosts (documentation or services it may open):

  • inspira-ui.com
  • github.com
  • discord.gg

  From URLs in SKILL.md, links to its own repository left out.

• Credentials

  Names no API keys, tokens, secrets or passwords.

  From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Inspira UI loads about 2.6k tokens when it runs, and up to ~12k if it reads all its reference files. Until then it costs about 55 tokens; SKILL.md has 673 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it

~55

When it runs · the whole SKILL.md, loaded when a task matches

~2.6k

With references · SKILL.md plus every file in references/, read only if the agent opens them

~12k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.

SKILL.md

The full file from secondsky/claude-skills at commit 8837836, republished under its MIT licence (© secondsky). 673 words, ~2,561 tokens.

name

inspira-ui

description

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.

allowed-tools

bash, read, glob, grep

license

MIT

metadata.version

2.0.0

metadata.last_verified

2025-11-16

metadata.production_tested

true

metadata.token_savings

~65%

metadata.errors_prevented

13+

metadata.keywords

vue, nuxt, vue 3, nuxt 4, inspira ui, animated components, tailwindcss v4, motion-v, three.js, ogl, webgl, aurora background, shimmer button, morphing text…

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

© secondsky, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 6 other files (scripts, references) in plugins/inspira-ui/skills/inspira-ui of secondsky/claude-skills.

• SKILL.md
• references/CODE_PATTERNS.md
• references/SETUP.md
• references/TROUBLESHOOTING.md
• references/components-list.md
• scripts/setup-inspira.sh
• scripts/verify-setup.sh

Open the folder on GitHubat commit 8837836