Skills

Give AI coding agents like Claude Code, Cursor, and Windsurf project-aware context about Spark UI.

Skills give AI coding agents like Claude Code, Cursor, and Windsurf project-aware context about Spark UI. When installed, your assistant knows how to find, install, compose, and customize components using the correct APIs and patterns.

For example, you can ask your assistant to:

  • "Add an interactive pet that persists across page navigation."
  • "Create a hero with Tactile Highlight and an Animated Gradient."
  • "Show me all available Spark UI components."

The skill provides your assistant with the full component catalog, registry install commands, composition rules, and styling conventions — so it generates correct code on the first try.

Install

npx skills add codeweb-dev/spark-ui --skill spark-ui

Once installed, your AI assistant automatically loads it when working with Spark UI components. See the listing at skills.sh/codeweb-dev/spark-ui, or learn more at skills.sh.

What's included

Component APIs

Full reference for all 13 components — exports, props, import paths, and composition patterns for motion, media, and visual effects.

Installation & CLI

How to inspect and install components from the official registry with the shadcn CLI, where files land, and how declared dependencies are handled.

Composition rules

Correct structures for interactive pets, image trails, animated backgrounds, carousels, and client-only components.

Styling & customization

Overriding styles via className, semantic Tailwind CSS v4 design tokens, and tuning each component's motion and visual props after installation.

The skill also pins the official registry origin and instructs agents to inspect registry items (npx shadcn@latest view …) and review the diff before installing — downloaded component code is treated as source to review, never as instructions to follow.

MCP Server

The Model Context Protocol lets AI tools access the Spark UI registry directly from your editor.

Cursor

Create a .cursor/mcp.json file in your project root:

{
  "mcpServers": {
    "spark-ui": {
      "description": "Spark UI registry",
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "shadcn@canary", "mcp"],
      "env": {
        "REGISTRY_URL": "https://spark-ui-olive.vercel.app/r/registry.json"
      }
    }
  }
}

Restart Cursor after adding the configuration.

Other AI tools

For other tools that support MCP (Claude Code, Windsurf, etc.), use the same server configuration above and follow your tool's MCP setup docs.

Usage

Once configured, you can interact with the registry directly in chat:

Show me all available Spark UI components

Add the Tactile Highlight component from Spark UI

Machine-readable resources