Skill vs Workflow Mode

Overview

UI/UX Pro Max operates in two different modes depending on your AI coding assistant:

Skill Mode (Auto-activate): The skill automatically activates when you request UI/UX work
Workflow Mode (Slash Command): You explicitly invoke the skill with a command like /ui-ux-pro-max

Which mode you use depends on your AI assistant’s capabilities.

Skill Mode (Auto-Activate)

Supported Platforms

Skill mode is supported on platforms that implement the Skills API:

Claude Code (claude.ai/code)
Cursor
Windsurf
Antigravity
Codex CLI
Continue
Gemini CLI
OpenCode
Qoder
CodeBuddy
Droid (Factory)

How It Works

From .claude/skills/ui-ux-pro-max/SKILL.md:src/ui-ux-pro-max/SKILL.md:3:

---
name: ui-ux-pro-max
description: "UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings...
  Actions: plan, build, create, design, implement, review, fix, improve, optimize...
  Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS...
  Elements: button, modal, navbar, sidebar, card, table, form, chart...
  Styles: glassmorphism, claymorphism, minimalism, brutalism...
  Topics: color palette, accessibility, animation, layout, typography..."
---

The description field contains activation keywords that trigger the skill:

Action Keywords

plan, build, create, design, implement
review, fix, improve, optimize, enhance, refactor
check (when combined with UI/UX context)

Project Keywords

website, landing page, dashboard, admin panel
e-commerce, SaaS, portfolio, blog, mobile app
File extensions: .html, .tsx, .vue, .svelte

Element Keywords

button, modal, navbar, sidebar, card, table, form, chart

Style Keywords

glassmorphism, claymorphism, minimalism, brutalism
neumorphism, bento grid, dark mode, responsive

Topic Keywords

color palette, accessibility, animation, layout
typography, font pairing, spacing, hover, shadow, gradient

Example Activation

Build a landing page for my SaaS product

You don’t need to mention “UI/UX Pro Max” or any skill name. The AI automatically detects when UI/UX work is needed.

Special Case: Trae

Trae supports skill mode but requires SOLO mode first:

User: /solo
Trae: Switched to SOLO mode
User: Build a landing page for my SaaS product
Trae: [Skill activates automatically]

Workflow Mode (Slash Command)

Supported Platforms

Workflow mode is used on platforms that don’t support auto-activation:

Kiro
GitHub Copilot
Roo Code

How It Works

You explicitly invoke the skill with a slash command:

/ui-ux-pro-max Build a landing page for my SaaS product

The workflow file (.kiro/workflows/ui-ux-pro-max.md, .github/copilot-workflows/ui-ux-pro-max.md, or .roo/workflows/ui-ux-pro-max.md) contains the same instructions as the skill file.

Why Slash Commands?

These platforms don’t support:

Auto-activation based on keywords
Skills API for dynamic loading

Instead, they use:

Static workflow files that must be explicitly invoked
Slash commands as the invocation mechanism

Skill File Structure

From .claude/skills/ui-ux-pro-max/SKILL.md:

---
name: ui-ux-pro-max
description: "[Activation keywords...]"
---

# UI/UX Pro Max - Design Intelligence

Comprehensive design guide for web and mobile applications...

## When to Apply

Reference these guidelines when:
- Designing new UI components or pages
- Choosing color palettes and typography
- Reviewing code for UX issues
- Building landing pages or dashboards
- Implementing accessibility requirements

## How to Use This Skill

When user requests UI/UX work (design, build, create, implement, review, fix, improve), follow this workflow:

### Step 1: Analyze User Requirements
...

### Step 2: Generate Design System (REQUIRED)

**Always start with `--design-system`**...

### Step 3: Supplement with Detailed Searches (as needed)
...

### Step 4: Stack Guidelines (Default: html-tailwind)
...

Workflow File Structure

Workflow files (Kiro, Copilot, Roo) have the same content as skill files, but without the frontmatter:

# UI/UX Pro Max - Design Intelligence

Comprehensive design guide for web and mobile applications...

[Same content as skill file]

Installation Paths

Platform	Path	Mode
Claude Code	`.claude/skills/ui-ux-pro-max/SKILL.md`	Skill
Cursor	`.cursor/skills/ui-ux-pro-max/SKILL.md`	Skill
Windsurf	`.windsurf/skills/ui-ux-pro-max/SKILL.md`	Skill
Antigravity	`.antigravity/skills/ui-ux-pro-max/SKILL.md`	Skill
Codex CLI	`.codex/skills/ui-ux-pro-max/SKILL.md`	Skill
Continue	`.continue/skills/ui-ux-pro-max/SKILL.md`	Skill
Gemini CLI	`.gemini/skills/ui-ux-pro-max/SKILL.md`	Skill
OpenCode	`.opencode/skills/ui-ux-pro-max/SKILL.md`	Skill
Qoder	`.qoder/skills/ui-ux-pro-max/SKILL.md`	Skill
CodeBuddy	`.codebuddy/skills/ui-ux-pro-max/SKILL.md`	Skill
Droid (Factory)	`.factory/skills/ui-ux-pro-max/SKILL.md`	Skill
Kiro	`.kiro/workflows/ui-ux-pro-max.md`	Workflow
GitHub Copilot	`.github/copilot-workflows/ui-ux-pro-max.md`	Workflow
Roo Code	`.roo/workflows/ui-ux-pro-max.md`	Workflow

The CLI command uipro init --ai <platform> automatically installs the correct file in the correct location.

Key Differences

Skill Mode

✅ Pros:

Automatic activation (no command needed)
Natural conversation flow
AI detects when UI/UX expertise is needed
Seamless integration with other skills

❌ Cons:

Requires platform support for Skills API
May activate unexpectedly if keywords match unrelated requests

Workflow Mode

✅ Pros:

Explicit invocation (you control when it activates)
No unexpected activations
Works on all platforms

❌ Cons:

Must remember slash command
Requires explicit invocation every time
Breaks conversation flow

Template Generation

Both skill and workflow files are generated from templates by the CLI. From cli/src/commands/init.ts:

// Skill-based platforms
if (['claude', 'cursor', 'windsurf', ...].includes(platform)) {
  const skillContent = renderTemplate('base/skill-content.md', variables);
  writeFile(`${platformPath}/skills/ui-ux-pro-max/SKILL.md`, skillContent);
}

// Workflow-based platforms
if (['kiro', 'copilot', 'roocode'].includes(platform)) {
  const workflowContent = renderTemplate('base/skill-content.md', variables);
  writeFile(`${platformPath}/workflows/ui-ux-pro-max.md`, workflowContent);
}

Key insight: Both modes use the same base template (base/skill-content.md). The only difference is:

Skill mode: Adds YAML frontmatter with activation keywords
Workflow mode: No frontmatter, just markdown content

When the Skill Activates

The skill activates when your message contains:

At least one action keyword (build, create, design, implement, review, fix, improve)
AND at least one context keyword (UI, UX, website, landing page, button, color, layout, etc.)

Examples That Activate

✅ “Build a landing page for my SaaS product”
✅ “Create a dashboard with glassmorphism style”
✅ “Design a dark mode color palette”
✅ “Review this button component for accessibility”
✅ “Fix the hover state on this card”
✅ “Implement a responsive navbar”

Examples That Don’t Activate

❌ “Build a Python script to process CSV files” (no UI/UX context)
❌ “Create a database schema” (no UI/UX context)
❌ “What color should I paint my room?” (not UI/UX context)

The AI is smart enough to distinguish between UI/UX requests and other requests. It uses the combination of keywords, not just individual words.

shadcn/ui Integration

From .claude/skills/ui-ux-pro-max/SKILL.md:src/ui-ux-pro-max/SKILL.md:3:

description: "...
  Integrations: shadcn/ui MCP for component search and examples."

When using the shadcn stack, the skill mentions the shadcn/ui MCP server for component search:

python3 skills/ui-ux-pro-max/scripts/search.py "form validation" --stack shadcn

If the user has the shadcn/ui MCP server installed, the AI can:

Search for shadcn/ui components
Get implementation examples
Follow shadcn/ui design patterns

Best Practices

For Skill Mode Users

Be specific: “Build a landing page” → “Build a landing page for a fintech app”
Include context: Mention style preferences, industry, or target audience
Use natural language: The AI understands “make this button look better” or “fix the colors”

For Workflow Mode Users

Always use the slash command: /ui-ux-pro-max <your request>
Include full context: Since it’s explicit, add all relevant details upfront
Save the command: Add it to your snippets or aliases for quick access

Troubleshooting

Skill Not Activating?

Check your platform: Is it in the skill mode list above?
Check your keywords: Did you use an action keyword + context keyword?
Be more explicit: Try adding “UI” or “design” to your message
Check installation: Verify the skill file exists at the correct path

Skill Activating Unexpectedly?

Be more specific: If discussing non-UI topics, avoid UI keywords
Use workflow mode: Switch to a platform that uses slash commands
Adjust keywords: The platform may allow configuring activation keywords

Workflow Command Not Working?

Check the slash command: Some platforms use /workflow, others use /copilot-workflow
Check file location: Verify the workflow file is in the correct directory
Reload the AI: Some platforms need a restart to detect new workflows

Get Started

Core Concepts

Usage Guides

Platform Support

Overview

Skill Mode (Auto-Activate)

Supported Platforms

How It Works

Action Keywords

Project Keywords

Element Keywords

Style Keywords

Topic Keywords

Example Activation

Special Case: Trae

Workflow Mode (Slash Command)

Supported Platforms

How It Works

Why Slash Commands?

Skill File Structure

Workflow File Structure

Installation Paths

Key Differences

Skill Mode

Workflow Mode

Template Generation

When the Skill Activates

Examples That Activate

Examples That Don’t Activate

shadcn/ui Integration

Best Practices

For Skill Mode Users

For Workflow Mode Users

Troubleshooting

Skill Not Activating?

Skill Activating Unexpectedly?

Workflow Command Not Working?

See Also

Build docs developers (and LLMs) love

Get Started

Core Concepts

Usage Guides

Platform Support

​Overview

​Skill Mode (Auto-Activate)

​Supported Platforms

​How It Works

​Action Keywords

​Project Keywords

​Element Keywords

​Style Keywords

​Topic Keywords

​Example Activation

​Special Case: Trae

​Workflow Mode (Slash Command)

​Supported Platforms

​How It Works

​Why Slash Commands?

​Skill File Structure

​Workflow File Structure

​Installation Paths

​Key Differences

​Skill Mode

​Workflow Mode

​Template Generation

​When the Skill Activates

​Examples That Activate

​Examples That Don’t Activate

​shadcn/ui Integration

​Best Practices

​For Skill Mode Users

​For Workflow Mode Users

​Troubleshooting

​Skill Not Activating?

​Skill Activating Unexpectedly?

​Workflow Command Not Working?

​See Also

Build docs developers (and LLMs) love

Overview

Skill Mode (Auto-Activate)

Supported Platforms

How It Works

Action Keywords

Project Keywords

Element Keywords

Style Keywords

Topic Keywords

Example Activation

Special Case: Trae

Workflow Mode (Slash Command)

Supported Platforms

How It Works

Why Slash Commands?

Skill File Structure

Workflow File Structure

Installation Paths

Key Differences

Skill Mode

Workflow Mode

Template Generation

When the Skill Activates

Examples That Activate

Examples That Don’t Activate

shadcn/ui Integration

Best Practices

For Skill Mode Users

For Workflow Mode Users

Troubleshooting

Skill Not Activating?

Skill Activating Unexpectedly?

Workflow Command Not Working?

See Also