Claude Code Skills

Enhance your development experience with Claude Code skills for the Vuer UIKit ecosystem. These skills provide AI-powered assistance for different aspects of Dial and UIKit.

What are Claude Code Skills?

Claude Code skills are knowledge bases that integrate with Claude Code CLI and Claude.com, providing AI-powered assistance without leaving your editor. Each skill is focused on a specific domain for efficient loading and targeted help.

Plugin Installation (Recommended)

The easiest way to install all skills is via the Claude Code plugin system:

# Add the vuer-uikit marketplace
/plugin marketplace add vuer-ai/vuer-uikit

# Install the plugin (includes all 4 skills)
/plugin install vuer-uikit@vuer-uikit

Or run Claude Code directly with the plugin from GitHub:

claude --plugin github:vuer-ai/vuer-uikit

The plugin includes 4 skills:

  • getting-started - Installation and quick start guide
  • dial-cli - CLI tool for schema generation
  • dial - Runtime React components
  • uikit - 50+ UI components

Available Skills

🔧 dial-cli Skill

Command-line tool for generating UI control schemas from TypeScript annotations.

Use when:

  • Running dial-cli to generate schemas
  • Parsing @dial annotations
  • Setting up CLI workflows
  • Configuring CI/CD integration

What's included:

  • CLI commands and options reference
  • Complete annotation reference
  • Type system and inference details
  • CLI usage patterns and examples

Installation:

/skill add https://raw.githubusercontent.com/vuer-ai/vuer-uikit/main/skills/dial-cli/SKILL.md

📖 Learn more →

âš¡ dial Skill

Runtime React components for rendering UI controls from Dial schemas.

Use when:

  • Integrating DialProvider and DialPanel in React
  • Loading and using generated schemas
  • Building dynamic UI control panels
  • Implementing Dial patterns in production

What's included:

  • DialProvider and DialPanel API documentation
  • Component usage patterns and examples
  • Vite/TypeScript integration guide
  • Schema loading and type safety

Installation:

/skill add https://raw.githubusercontent.com/vuer-ai/vuer-uikit/main/skills/dial/SKILL.md

📖 Learn more →

🎨 vuer-uikit Skill

General-purpose React UI component library with 50+ components.

Use when:

  • Building UIs with Button, Card, Modal, Table, etc.
  • Customizing themes and colors
  • Implementing responsive layouts
  • Styling components with Tailwind CSS

What's included:

  • Component library overview and quick examples
  • Detailed component API reference
  • Theme customization and CSS variables
  • Dark mode setup and color utilities

Installation:

/skill add https://raw.githubusercontent.com/vuer-ai/vuer-uikit/main/skills/uikit/SKILL.md

🚀 getting-started Skill

Installation, quick start, and basic usage patterns.

Use when:

  • Setting up a new project with Vuer UIKit
  • Installing dependencies
  • Configuring Vite or Next.js
  • Understanding ThemeProvider setup

Installation:

/skill add https://raw.githubusercontent.com/vuer-ai/vuer-uikit/main/skills/getting-started/SKILL.md

Quick Setup - Add All Skills

Option 1: Plugin (Recommended)

/plugin marketplace add vuer-ai/vuer-uikit
/plugin install vuer-uikit@vuer-uikit

Option 2: Individual Skills

# Getting started guide
/skill add https://raw.githubusercontent.com/vuer-ai/vuer-uikit/main/skills/getting-started/SKILL.md

# CLI tool
/skill add https://raw.githubusercontent.com/vuer-ai/vuer-uikit/main/skills/dial-cli/SKILL.md

# Runtime components
/skill add https://raw.githubusercontent.com/vuer-ai/vuer-uikit/main/skills/dial/SKILL.md

# UIKit components
/skill add https://raw.githubusercontent.com/vuer-ai/vuer-uikit/main/skills/uikit/SKILL.md

Option 3: Add to your project's CLAUDE.md

# Project Context

Vuer UIKit Development Skills

@import https://raw.githubusercontent.com/vuer-ai/vuer-uikit/main/skills/getting-started/SKILL.md
@import https://raw.githubusercontent.com/vuer-ai/vuer-uikit/main/skills/dial-cli/SKILL.md
@import https://raw.githubusercontent.com/vuer-ai/vuer-uikit/main/skills/dial/SKILL.md
@import https://raw.githubusercontent.com/vuer-ai/vuer-uikit/main/skills/uikit/SKILL.md

Using the Skills

Once installed, you can ask Claude Code questions like:

For dial-cli:

  • "How do I run dial-cli on my components?"
  • "What's the difference between @dial-min and @dial-mins?"
  • "Show me CI/CD integration examples"

For dial:

  • "How do I set up DialProvider?"
  • "Show me a complete Dial integration example"
  • "How do I handle value changes in Dial?"

For vuer-uikit:

  • "How do I create a modal dialog?"
  • "Show me how to implement dark mode"
  • "What input variants are available?"

How Skills Load

Claude loads only the skill name and description at startup for fast performance. The full skill content loads only when Claude decides to activate the skill based on your question. This means:

✅ Fast startup - Minimal context on initialization ✅ Focused help - Relevant information when needed ✅ Efficient tokens - Only load what you're asking about ✅ Multiple skills - Add as many as needed without overhead

Learn More

Feedback

Have suggestions for improving the skills? Found an issue?