.claude/
└── skills/
    └── design-guideline/
        ├── SKILL.md              # Main (max 500 lines)
        └── references/
            ├── colors.md         # Color system
            ├── typography.md     # Typography
            ├── spacing.md        # Spacing
            ├── components.md     # Components
            └── tokens.json       # Design tokens

Execution Flow

Phase 1: Check Existing Skill

First, check if .claude/skills/design-guideline/ already exists:

ls -la .claude/skills/design-guideline/

If exists: Ask user using AskUserQuestion:

"A design guideline skill already exists. Do you want to overwrite it?"
Options: "Overwrite" / "Cancel"

If user selects "Cancel", stop execution.

Phase 2: Information Gathering

Ask the following using AskUserQuestion tool:

Project name (required)
Target platform: Web / iOS / Android / React Native / Flutter
Primary brand color (e.g., #3B82F6)
Accessibility level: WCAG 2.1 AA / AAA
Reference URL (optional) - Analyze with WebFetch if provided

Phase 3: Create Directory

mkdir -p .claude/skills/design-guideline/references

Phase 4: Generate Files

Generate the following files in order:

4.1 SKILL.md (main file)

Refer to templates/skill-template.md for generation.

Important: Keep under 500 lines. Link to references/ for details.

---
name: design-guideline
description: UI design guideline for {PROJECT_NAME}. Use when developing UI components, styling, or making design decisions.
---

4.2 references/colors.md

Refer to references/color-systems.md for generation.

Primary color palette (50-900 scale)
Secondary color palette
Grayscale
Semantic colors

4.3 references/typography.md

Refer to references/typography-scales.md for generation.

Font family
Size scale (xs-6xl)
Heading styles

4.4 references/spacing.md

Refer to references/spacing-systems.md for generation.

8px base spacing
Grid and breakpoints

4.5 references/components.md

Refer to references/component-patterns.md for generation.

20+ component specifications (Button, Input, Card, Modal, etc.)

4.6 references/tokens.json

Refer to templates/design-tokens.json for generation.

Phase 5: Completion Report

After generation, report to the user:

List of generated files
How to use the skill (Claude will automatically reference it)
How to customize

Reference Files

Always refer to these during generation:

references/color-systems.md - Color system best practices
references/typography-scales.md - Typography
references/spacing-systems.md - Spacing
references/component-patterns.md - Components
references/accessibility.md - Accessibility

Template Files

templates/skill-template.md - SKILL.md template
templates/design-tokens.json - Tokens template

ui-design-guideline

UI Design Guideline Skill Generator

Output Location (Important)