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.

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

Option 1: Add Skill to Claude Code CLI

If you have the Claude Code CLI installed, add the skill with:

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

Option 2: Add to Your Project's CLAUDE.md

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

# Project Context

Add the Dial skill for Claude Code assistance:

@import https://raw.githubusercontent.com/vuer-ai/vuer-uikit/main/skill/index.md

Then reference this file in Claude Code:

/config set claude-md ./CLAUDE.md

Option 3: Use in Claude.com

You can also reference the skill directly in Claude.com by copying the URL:

https://raw.githubusercontent.com/vuer-ai/vuer-uikit/main/skill/index.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 skill for help:

@import https://raw.githubusercontent.com/vuer-ai/vuer-uikit/main/skill/index.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: