aesthetic-dreaming

# aesthetic-dreaming Skill **Purpose:** Create aesthetic templates before implementing any plugins. Capture visual design systems through adaptive questioning, generate structured aesthetic.md, and optionally create test previews demonstrating the aesthetic across different plugin types. **Solves:** The friction of needing to create a full plugin just to design and save an aesthetic template. Build a library of visual design systems first, apply them later. --- <workflow_overview> <critical_sequence enforcement="strict"> This workflow MUST execute phases in order. Do NOT skip phases or proceed to finalization before completing gap analysis and question batches. **Phase Flow:** 1. **Phase 1: Free-form collection** - Gather initial aesthetic vision 2. **Phase 2: Gap analysis** - Identify missing visual elements 3. **Phase 3: Question batch** - Ask 4 contextual questions via AskUserQuestion 4. **Phase 3.5: Decision gate** - Finalize / Continue / Add context 5. **Phase 3.7: Name aesthetic** (if finalizing) 6. **Phase 4: Test preview selection** 7. **Phase 5: Generate files** 8. **Phase 6: Decision menu** **Loop Structure:** Phases 2-3-3.5 repeat until user chooses "finalize" at decision gate. **Critical Rules:** - Do NOT skip phases - Do NOT execute phases out of order - Do NOT proceed to finalization before decision gate approval - NEVER auto-proceed past decision gates </critical_sequence> </workflow_overview> --- <phase id="1" name="free_form_collection"> <instructions> Present open invitation to user. Extract all mentioned visual concepts verbatim and accumulate in context. </instructions> <required_prompt> What aesthetic are you envisioning? Describe the visual design system you want to create—share as much or as little as you want. I'll ask follow-ups for anything missing. Consider: overall vibe, color palette, control styling, spacing, textures, typography, and plugin types this would suit. You can reference existing designs, describe feelings, or provide technical specifics. </required_prompt> <extraction_targets> - Visual Identity: Overall vibe, mood, design philosophy - Color System: Palette, warm/cool, contrast, specific colors - Typography: Font choices, sizing philosophy - Control Styling: Knobs, sliders, buttons, rotaries - Spacing: Density, breathing room, layout approach - Surface Treatment: Textures, shadows, depth, glossy vs. matte - Details: Special features, animations, microinteractions - Best For: Plugin types, use cases - Inspirations: References to existing designs </extraction_targets> <state_requirement> **Context Storage**: Maintain cumulative context as structured object in agent memory throughout all phases and question batches. Format: key-value pairs for each design dimension (vibe, color_philosophy, control_style, typography, spacing, etc.). NEVER overwrite existing keys - only append new information. NEVER lose information from previous phases. </state_requirement> </phase> --- <phase id="2" name="gap_analysis"> <critical_sequence> 1. Parse user's accumulated context (from Phase 1 + any previous question batches) 2. Check coverage against tier priority system 3. Identify top 4 gaps by tier priority 4. NEVER ask about already-provided information </critical_sequence> <tier_system> **Tier 1 (Critical):** Overall vibe/mood, color philosophy, control style **Tier 2 (Visual Core):** Specific colors, typography, spacing, textures, control details **Tier 3 (Context):** Best suited for, special features, inspirations </tier_system> <anti_pattern> NEVER ask redundant questions. If user stated "dark modern blue", do NOT ask: - "What's the overall vibe?" (modern already stated) - "Light or dark?" (dark already stated) - "What accent color?" (blue already stated) Instead focus on uncovered gaps: typography, spacing, textures, plugin types. </anti_pattern> <delegation_rule> Detailed question banks are in references/aesthetic-questions.md. Reference for gap analysis strategies and question options. </delegation_rule> </phase> --- <phase id="3" name="question_batch"> <instructions> Generate exactly 4 questions using AskUserQuestion tool based on gaps identified in Phase 2. </instructions> <requirements> - MUST use AskUserQuestion tool (not inline menu) - Provide 3-4 meaningful options per question (not just open text) - Always include "Other" option for custom input - Users can type "skip" in "Other" to skip questions - Questions MUST target identified gaps, prioritized by tier </requirements> <tool_usage> Tool: AskUserQuestion Parameters: - questions: array[1-4] of question objects - Each question has: question, header, multiSelect, options[2-4] - Always include "Other" option automatically </tool_usage> <example> See references/question-examples.md for detailed AskUserQuestion formatting examples and question banks by category. </example> <state_transition> After receiving question batch answers: 1. Merge answers into accumulated context object by appending to relevant keys (e.g., answer "Dark with blue accents" → context.color_philosophy = "Dark with blue accents"). Preserve all previous keys. Never overwrite existing information. 2. Proceed DIRECTLY to decision gate (Phase 3.5) 3. Decision gate will route to Phase 2 (re-analyze) or Phase 3.7 (finalize) </state_transition> </phase> --- <decision_gate id="finalize_or_continue" phase="3.5"> <critical_sequence> MUST present this decision gate after EVERY question batch (Phase 3). MUST use inline numbered list format (consistent with checkpoint protocol). MUST wait for user response before proceeding. </critical_sequence> <required_menu> Ready to finalize the aesthetic concept? 1. Yes, finalize it - Create aesthetic.md and optional previews 2. Ask me 4 more questions - Continue refining the design 3. Let me add more context first - Provide additional details before questions Choose (1-3): _ </required_menu> <routing_logic> IF option 1 THEN proceed to Phase 3.7 ELSE IF option 2 THEN return to Phase 2 (with accumulated context) ELSE IF option 3 THEN collect user input, merge with context, return to Phase 2 </routing_logic> <state_requirement> Context accumulation is cumulative across all iterations. Never lose previously collected information. </state_requirement> </decision_gate> --- <phase id="3.7" name="name_aesthetic"> <preconditions> Only execute if user chose "finalize" at decision gate (Phase 3.5). </preconditions> <conditional_execution> IF aesthetic name already provided in initial description THEN skip this phase and proceed to Phase 4. ELSE ask user for name via AskUserQuestion with 3 suggested names + "Other" option. </conditional_execution> <name_generation_rules> - Suggest 3 names based on accumulated context (vibe + colors + style) - Examples: "Dark modern blue" → "Modern Professional", "Blue Tech", "Dark Elegance" - Allow user to provide custom name via "Other" option </name_generation_rules> <slug_generation> - Slugify name: "Modern Professional" → "modern-professional" - Check for existing IDs in manifest.json and append counter: "modern-professional-001" - Increment suffix from -001 to -999 until unique ID found - If all suffixes exhausted (aesthetic has 999+ versions), ask user to provide alternative name </slug_generation> </phase> --- <phase id="4" name="test_preview_selection"> <instructions> Present test preview selection menu using AskUserQuestion with multiSelect: true. </instructions> <requirements> - MUST use AskUserQuestion tool with multiSelect: true - Offer 4 test plugin types: simple-compressor, complex-reverb, drum-machine, simple-synth - User can select 0-4 options (0 = skip previews entirely) </requirements> <tool_format> AskUserQuestion({ questions: [{ question: "Generate test previews to see this aesthetic applied? (select 0-4 plugin types)", header: "Test previews", multiSelect: true, options: [ { label: "Simple compressor", description: "4 parameters: threshold, ratio, attack, release" }, { label: "Complex reverb", description: "8 parameters: size, damping, predelay, mix, tone, width, decay, diffusion" }, { label: "Drum machine", description: "16-pad grid + 4 controls: tempo, swing, volume, pattern" }, { label: "Simple synth", description: "6 oscillator controls: waveform, frequency, attack, decay, sustain, release" } ] }] }) </tool_format> <routing_logic> IF user selects 0 options THEN skip test preview generation, proceed directly to Phase 5 (aesthetic.md only) ELSE IF user selects 1-4 options THEN proceed to Phase 5 with selected preview types </routing_logic> <state_requirement> Store selected preview types in context for Phase 5 generation. </state_requirement> </phase> --- <phase id="5" name="generate_files"> <instructions> Execute the complete 8-step generation sequence with verification checkpoints. See references/file-generation.md for complete Phase 5 implementation protocol. </instructions> </phase> --- <phase id="6" name="decision_menu"> <checkpoint_protocol> This is a system checkpoint. MUST follow Plugin Freedom System checkpoint protocol. MUST use inline numbered list format (NOT AskUserQuestion tool) per CLAUDE.md checkpoint protocol. </checkpoint_protocol> <workflow_mode_check> Before presenting decision menu: 1. Read .claude/preferences.json to check workflow.mode setting 2. IF mode === "express" AND skill was NOT explicitly invoked via /dream command: - Skip decision menu - Exit skill gracefully with completion message 3. ELSE: - Present decision menu and wait for user response </workflow_mode_check> <decision_menu> ✅ Aesthetic "[Name]" ready! What's next? 1. Open test previews - View mockups in browser 2. Refine aesthetic - Adjust and regenerate aesthetic.md 3. Create another aesthetic - Start new aesthetic 4. Apply to existing plugin - Choose plugin from PLUGINS.md 5. Done Choose (1-5): _ </decision_menu> <routing_logic> Option 1: Run `open` commands for test preview HTML files, return to menu Option 2: Ask what to change, re-run question batches (Phases 2-3-3.5), regenerate aesthetic.md (preserve ID) Option 3: Return to Phase 1 with fresh context Option 4: Read PLUGINS.md, user selects plugin, invoke ui-mockup skill with aesthetic pre-selected Option 5: Exit skill </routing_logic> <state_requirement> MUST wait for user response. NEVER auto-proceed to any option. </state_requirement> </phase> --- <adaptive_questioning_strategy> **Core Algorithm**: Extract concepts → Check tier coverage → Identify gaps → Generate 4 questions → Decision gate → Loop or finalize **Anti-pattern**: Never ask about concepts already provided. Never repeat questions in different words. **Tier Priority**: Tier 1 (Critical: vibe, color philosophy, control style) → Tier 2 (Visual Core: specific colors, typography, spacing, textures) → Tier 3 (Context: plugin types, inspirations, special features) See references/aesthetic-questions.md for detailed gap analysis strategies and question banks. See references/workflow-examples.md for complete examples showing adaptive questioning across different input scenarios. </adaptive_questioning_strategy> --- <handoff_protocol> See references/handoff-protocol.md for complete skill invocation details and integration with ui-template-library and ui-mockup. </handoff_protocol> --- <error_handling> See references/error-handling.md for complete edge case handling and recovery strategies. </error_handling> --- ## Success Criteria Skill is successful when: - Aesthetic concept captured through adaptive questions - No redundant questions asked (respects already-provided info) - aesthetic.md generated with all 12 sections filled - Test previews generated for selected plugin types (if any) - Files stored in correct locations (.claude/aesthetics/[id]/) - Aesthetic immediately available in ui-mockup skill - User feels creative flow, not interrogated - Clear next steps presented --- ## Design Rationale See [references/design-rationale.md](references/design-rationale.md) for detailed explanation of design decisions, format consistency rules, and quality control procedures. --- ## Reference Documentation **See also:** - `ui-template-library` skill - Apply and save operations - `ui-mockup` skill - Integration with Phase 0 aesthetic selection - `plugin-ideation` skill - Adaptive questioning pattern reference - `assets/test-plugin-specs.json` - Test plugin parameter definitions - `references/aesthetic-questions.md` - Question bank and strategies - `references/question-examples.md` - AskUserQuestion formatting examples - `references/test-preview-protocol.md` - Test preview generation protocol - `references/error-handling.md` - Error handling and edge cases