菜单
Manage aesthetic templates - save visual systems from completed mockups as interpretable prose, apply to new plugins with adaptive layouts
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Orchestrator for WebView UI mockup workflow - delegates design iteration to ui-design-agent and implementation scaffolding to ui-finalization-agent. Use when user mentions UI design, mockup, WebView interface, or requests 'design UI for [plugin]'.
Multi-agent parallel investigation for complex JUCE problems. Use when troubleshooting fails after Level 3, problems require novel research, or user requests /research command.
Orchestrates Stage 0 research and planning for JUCE plugins - creates architecture.md and plan.md contracts through subagent delegation. Use when creative brief exists and plugin needs DSP architecture specification, complexity assessment, or implementation planning. Invoke via /plan command, natural language (plan architecture, research DSP), or as first implementation step.
Fix bugs, add features to completed plugins. Includes versioning, backups, regression testing, changelog automation. Auto-detects deep-research handoffs to preserve investigation context. Trigger terms - improve, fix, add feature, modify plugin, version bump, rollback
Load plugin context from handoff files to resume work. Invoked by /continue command, 'resume [PluginName]', 'continue working on [PluginName]', 'pick up where I left off with [PluginName]', or 'show me where [PluginName] is at'. Locates handoff across 2 locations, parses state, presents summary, and routes to appropriate continuation skill.
Manage complete plugin lifecycle - install, uninstall, reset, destroy. Use when user runs /install-plugin, /uninstall, /reset-to-ideation, /destroy, /clean commands, or says 'install [Name]', 'remove [Name]', 'uninstall [Name]', 'delete [Name]'.
| name | ui-template-library |
| description | Manage aesthetic templates - save visual systems from completed mockups as interpretable prose, apply to new plugins with adaptive layouts |
| allowed-tools | ["Read","Write","Bash"] |
| preconditions | [".claude/aesthetics/ directory exists (created by system-setup skill or auto-created on first save_aesthetic)"] |
Purpose: Capture and apply aesthetic "vibes" across plugins using structured prose descriptions rather than rigid specifications.
You MUST determine which operation the user is requesting, then execute ONLY that operation.
Operation Routing (match user request to keywords):
Before presenting decision menu in ANY operation:
ALL steps must complete successfully. If ANY step fails: HALT, report specific error, DO NOT proceed to decision menu.
Verification checklist (run before showing menu):
Error handling:
Note: Always use inline numbered menus (NOT AskUserQuestion tool) to maintain consistency with system-wide Checkpoint Protocol.
.claude/aesthetics/
├── manifest.json # Registry of all aesthetics
└── [aesthetic-id]/
├── aesthetic.md # Structured prose description (THE SOURCE OF TRUTH)
├── preview.html # Visual reference (original mockup)
└── metadata.json # Name, description, source plugin, tags
Key change from previous system:
<critical_sequence> Initialize .claude/aesthetics/ directory if missing (mkdir -p) Validate mockup file exists and is readable Read mockup HTML file into memory (Read tool) Extract visual patterns using pattern-extraction.md strategies Generate prose descriptions using prose-generation.md guidelines Write aesthetic.md following aesthetic-template.md structure exactly: same section headers in same order, fill all sections with prose (no placeholders) (load template from assets/aesthetic-template.md, if missing: report critical error) Copy preview.html to aesthetic directory Generate metadata.json with inferred tags Update manifest.json using Read → modify → Write pattern (if missing: initialize from assets/manifest-init.json) Commit aesthetic to git using conventional format Present confirmation + decision menu </critical_sequence>
<state_requirement> See "CRITICAL: Checkpoint Verification Protocol" section for complete verification requirements. </state_requirement>
See: references/save-operation.md for complete 8-step workflow.
<critical_sequence> Load aesthetic.md and metadata.json (Read tool) Read target plugin parameter-spec.md or creative-brief.md Interpret aesthetic prose using aesthetic-interpretation.md strategies Choose layout based on parameter count (layout-generation.md) Generate HTML/CSS applying aesthetic to chosen layout Save generated mockup to target plugin mockups directory Update aesthetic metadata.json usedInPlugins array Present decision menu as inline numbered list, NOT AskUserQuestion tool (rationale: consistent with system-wide Checkpoint Protocol - see CLAUDE.md) </critical_sequence>
<decision_gate wait_required="true"> Present decision menu with preview/continue options MUST wait for user response </decision_gate>
See: references/apply-operation.md for complete 8-step workflow.
<decision_gate wait_required="true"> Wait for user to select action from menu </decision_gate>
Display all saved aesthetics in table format with preview paths. See: references/list-operation.md for complete 4-step workflow.
Remove aesthetic from library with confirmation. See: references/delete-operation.md for complete 4-step workflow.
Refine aesthetic.md from improved mockup while preserving user edits. See: references/update-operation.md for complete 7-step workflow.
This skill provides operations for managing aesthetic templates. Called by ui-mockup skill.
save_aesthetic(mockup_path, plugin_name, aesthetic_name?):
apply_aesthetic(aesthetic_id, plugin_name, parameter_spec_path):
Invocation: Inline invocation from ui-mockup (both skills are lightweight and stateless).
Save operation successful when:
Apply operation successful when:
List operation successful when:
Technical details about parsing, quality control, and constraints. See: references/implementation-notes.md for complete technical documentation.
references/pattern-extraction.md - String/regex strategies for extracting visual patterns from HTMLreferences/prose-generation.md - Guidelines for transforming patterns into interpretable prosereferences/aesthetic-interpretation.md - Strategies for parsing prose and generating CSS/HTMLreferences/layout-generation.md - Layout decision trees and control placement strategiesassets/aesthetic-template.md - Complete structured prose template (THE FORMAT SPEC)assets/metadata-template.json - Metadata JSON structureassets/manifest-init.json - Empty manifest structure for initialization