skill-design

name	skill_design
description	Create the Visual Interface for audio plugins. Use when user mentions UI design, mockup, WebView interface, or requests 'design UI for [plugin]'.

SKILL: GUI DESIGN

Goal: Create the Visual Interface for audio plugins. Output Location: $PluginPath/Design/ and Source/

---

🎨 PHASE 0: DESIGN LIBRARY CHECK

Check if design_library/manifest.json exists and count available designs.

Import state management:

# Import state management module
. "$PSScriptRoot\..\scripts\state-management.ps1"
$PluginPath = Get-ApcPluginPath -PluginName $PluginName

Validate prerequisites:

# Check that planning phase is complete and framework is selected
if (-not (Test-PluginState -PluginPath $PluginPath -RequiredPhase "plan_complete" -RequiredFiles @(".ideas/architecture.md", ".ideas/plan.md"))) {
    Write-Error "Prerequisites not met. Complete planning phase first with framework selection."
    exit 1
}

# Get current state to check framework
$state = Get-PluginState -PluginPath $PluginPath
if ($state.ui_framework -eq "pending") {
    Write-Error "UI framework not selected. Complete planning phase first."
    exit 1
}

If designs exist, present menu:

Found {N} saved designs in library.

How would you like to start?
1. Use existing design - Apply saved visual style
2. Start from scratch - Create custom design
3. Browse library - View all designs first

Choose (1-3): _

Routing:

• Option 1: Show designs with previews, let user pick, skip to Phase 2 with applied style
• Option 2: Continue to Phase 1 (requirements gathering)
• Option 3: List all designs with metadata, return to menu

Skip to Phase 1.