Claude Code Skill for Dial

The Dial system includes a Claude Code skill that provides comprehensive reference information and AI-assisted help for writing Dial annotations and generating UI schemas.

About Claude Code Skills

The Claude Code ecosystem now includes three focused skills designed to work together. This page covers the Dial skills. For a complete overview of all available skills, see the Claude Code Skills Guide.

What is the Claude Code Skill?

The Claude Code skill is a knowledge base that integrates with the Claude Code CLI, enabling you to:

  • Get real-time assistance with Dial annotations while coding
  • Reference the complete Dial annotation documentation without leaving your editor
  • Ask questions about data types, constraints, and layout options
  • Get code suggestions for common Dial patterns

Installation

The Dial system now includes four focused skills. You can install them via the plugin system or individually.

Plugin Installation (Recommended)

Install all skills at once using the Claude Code plugin system:

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

# Install the vuer-uikit 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 these skills:

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

Individual Skill Installation

Install skills individually via URL:

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

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

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

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

Add to Your Project's CLAUDE.md

Create or update a CLAUDE.md file in your project root:

# Project Context

Add Vuer UIKit skills for Claude Code assistance:

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

Once installed, you can ask Claude Code questions like:

  • "How do I add a color picker to my component?"
  • "What's the difference between vector3 and euler?"
  • "Show me an example of RGB color constraints"
  • "How do I use vector-specific annotations?"
  • "What data types does Dial support?"

The skill provides context-aware answers based on the Dial documentation.

What's Included in the Skill

The skill includes comprehensive reference information for:

  • Dial CLI Commands - All available command-line options
  • Property Annotations - Core tags, UI display tags, numeric constraints
  • Vector-Specific Tags - Per-element configuration for vectors and tuples
  • Group Layout Tags - Grid and flex layout configuration
  • Supported Data Types - All available control types with examples
  • Advanced Features - Type system support, component-level annotations
  • Generated Schema Structure - Understanding the output format
  • Common Patterns - Real-world examples and best practices
  • Troubleshooting - Solutions to common issues

Integration with Your Workflow

In Claude Code CLI

Open a component file and ask for help:

# Open your component in Claude Code
claude edit MyComponent.tsx

# Ask for Dial annotation help
# Claude will reference the skill automatically

In Your Project

Add project-specific context to your CLAUDE.md:

# MyProject Context

Project uses Dial for dynamic UI controls. Reference the skills for help:

@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

## Project-Specific Patterns

We typically use these groups:
- `transform` - Position, rotation, scale
- `appearance` - Colors, sizes, visibility
- `behavior` - Event handlers, callbacks

Example Use Cases

Getting Annotation Help

Ask Claude Code about specific annotations:

"I want to create a slider that goes from 0 to 100 with step 5.
What @dial tags do I need?"

Claude will reference the skill and suggest:

/**
 * My numeric value
 * @dial controls
 * @dial-min 0
 * @dial-max 100
 * @dial-step 5
 */
myValue: number;

Learning Data Types

Learn about available data types:

"What's the best way to represent RGB colors with Dial?"

The skill provides the vector3 pattern with per-element constraints.

Debugging Schemas

Get help understanding generated schemas:

"My properties aren't showing up in the generated schema. What am I missing?"

Claude references the troubleshooting section and explains that you need at least one @dial-* annotation.

Tips for Best Results

  1. Be Specific - Ask about the specific annotation or behavior you need
  2. Provide Context - Include your TypeScript type in your question
  3. Check the Playground - Use the interactive playground for visual feedback
  4. Read Examples - The skill includes many real-world patterns

Feedback and Contributions

If you find issues with the skill or have suggestions: