Step

UI Step Mode v5.0 - Positive Edition

Mission

Transform the automated UI generation pipeline into an interactive workshop where the user controls each phase, reviews outputs, and makes adjustments before proceeding.

Core Philosophy: User control through affirmative guidance - showing what to do at each step, not what to avoid.

⚙️ Active Baseline Configuration

Step Mode Dials (adapted from ui parent):

AI Instruction:

• In learning mode (8+), explain WHY each decision was made
• In production mode (1-3), focus on WHAT needs approval
• Adapt pause frequency based on user expertise
• Show progress indicators at each pause

Justification:

• Control 9: User has final say but system guides
• Detail 7: Balanced explanations (not overwhelming, not minimal)
• Frequency 10: Pause after every phase (never skip user review)
• Learning 8: Educational by default (teach the system)

What is Step Mode?

Step mode transforms /ui from an automated pipeline into an interactive workshop:

• Phase-by-phase execution - Each phase completes and pauses for your review
• User approval required - Nothing proceeds without your consent
• Full adjustment capability - Modify keywords, patterns, constraints at any point
• State preservation - All your adjustments tracked in step-state.json
• Learning-friendly - See how each decision affects the final result

🎯 When to Use Step Mode

Optimal Use Cases

USE Step Mode when:

• ✅ First-time user (learning the system)
• ✅ Stakeholder approval needed (client projects)
• ✅ Complex/ambiguous requirements (need clarification)
• ✅ Exploration mode (experimenting with options)
• ✅ Teaching/demonstration (showing workflow)

Direct Mode Preferred When:

Direct mode (without --step) works best when:

• ✅ Quick iterations (you know what you want)
• ✅ Simple projects (straightforward requirements)
• ✅ Trusted patterns (reusing proven combinations)
• ✅ Time-critical delivery (need speed)
• ✅ Experienced user (familiar with the system)

Specific Trigger Phrases

'step through UI generation' → ACTIVATE
'interactive mode for design' → ACTIVATE
'show me how this works' → ACTIVATE
'learn to build UI' → ACTIVATE
'understand the process' → ACTIVATE
'need stakeholder approval' → ACTIVATE
'review each phase' → ACTIVATE

🔄 Phase Workflow

STEP MODE PHASES
┌─────────────────────────────────────────────────────────────┐
│                                                             │
│  PHASE 1: ANALYSIS                                         │
│  • Detected keywords from prompt                            │
│  • Risk assessment score                                     │
│  • Project type detection                                   │
│  • >>> PAUSED - Review? <<<                                 │
│                                                             │
│       ↓ [user: continue/adjust/add/remove]                   │
│                                                             │
│  PHASE 2: PARADIGM SELECTION                                │
│  • PIVOT MATRIX applied                                      │
│  • Selected paradigms with rationale                         │
│  • Alternative paradigms shown                              │
│  • >>> PAUSED - Approve paradigms? <<<                      │
│                                                             │
│       ↓ [user: accept/replace/show/done]                     │
│                                                             │
│  PHASE 3: CONSTRAINTS                                      │
│  • Selected constraints with scores                          │
│  • Compatibility check                                      │
│  • Difficulty balance                                       │
│  • >>> PAUSED - Accept/replace? <<<                         │
│                                                             │
│       ↓ [user: accept/replace/show/done]                     │
│                                                             │
│  PHASE 4: ENRICHED SPEC                                     │
│  • Validated specification                                   │
│  • Complete brief                                           │
│  • All paradigm warnings                                    │
│  • >>> PAUSED - Review before build? <<<                     │
│                                                             │
│       ↓ [user: build/edit/show/done]                         │
│                                                             │
│  PHASE 5: BUILD                                            │
│  • Execute build                                            │
│  • Validate results                                         │
│  • Generate metrics                                         │
│  • >>> COMPLETE <<<                                         │
│                                                             │
└─────────────────────────────────────────────────────────────┘

💬 User Commands

At each pause, you can use these commands:

📋 Phase 1: Analysis

Output Format

════════════════════════════════════════════════════════════════════
  PHASE 1: ANALYSIS - PAUSED FOR REVIEW
════════════════════════════════════════════════════════════════════

📝 Original Prompt:
"Create a modern SaaS dashboard for analytics"

🔍 Detected Keywords:
  • HIGH RISK: "modern" (position: 8, weight: 0.9)
  • MEDIUM RISK: "SaaS" (position: 16, weight: 0.7)

📊 Risk Assessment:
  • Trend-trap score: 7/10
  • Pattern convergence risk: HIGH
  • Recommendation: APPLY STRONG CONSTRAINTS
  • Confidence: 85%

🏷️ Project Type Detection:
  • Type: Dashboard
  • Industry: Analytics/SaaS
  • Typical patterns: Cards, charts, dark theme
  • Suggested constraints: architectural, print_first

─────────────────────────────────────────────────────────────────
Available Commands:
  continue  | Proceed to paradigm selection
  adjust    | Modify the analysis (e.g., "change SaaS to B2B")
  add       | Add keyword to consider (e.g., "add minimalist")
  remove    | Remove keyword (e.g., "remove modern")
  show      | Display this analysis again
  skip      | Jump to build phase
  cancel    | Cancel workflow
─────────────────────────────────────────────────────────────────

User Adjustments

# Change a keyword
> adjust Change "SaaS" to "enterprise analytics platform"

# Remove a keyword
> remove modern

# Add consideration
> add Consider this is for financial services

# Accept and continue
> continue

🎨 Phase 2: Paradigm Selection

Output Format

════════════════════════════════════════════════════════════════════
  PHASE 2: PARADIGM SELECTION - PAUSED FOR REVIEW
════════════════════════════════════════════════════════════════════

🔄 PIVOT MATRIX RESULTS:

Detected "modern" → Applied: **Warm Brutalism**
  • Earth tones, bold geometric shapes, raw spacing
  • Oversized typography, paper textures
  • Breaks from sterile SaaS conventions

Detected "SaaS" → Applied: **List Narrative**
  • Vertical lists, full-width items
  • Story flow instead of card grids
  • Table alternatives for data

Alternative Paradigms Available:
  • Architectural: Physical building inspiration
  • Print First: Design for print, adapt for screen
  • Mechanical: Industrial interaction patterns

─────────────────────────────────────────────────────────────────
Available Commands:
  accept    | Accept these paradigms and proceed
  replace  | Replace a paradigm (e.g., "replace with architectural")
  add       | Add another paradigm
  show      | Display paradigms again
  skip      | Jump to build phase
  cancel    | Cancel workflow
─────────────────────────────────────────────────────────────────

User Adjustments

# Replace a paradigm
> replace Warm Brutalism with Architectural

# Accept and continue
> accept

# Add another paradigm
> add Print First

🎯 Phase 3: Constraints

Output Format

════════════════════════════════════════════════════════════════════
  PHASE 3: CONSTRAINTS - PAUSED FOR REVIEW
════════════════════════════════════════════════════════════════════

🟢 SELECTED CONSTRAINTS:

1. **paper_and_ink** (color_restrictions)
   • Description: Off-white background, dark text, minimal accent
   • Difficulty: LOW (score: 35)
   • Creativity: 15/30 | Impact: 18/25 | Synergy: 12/20

2. **architectural** (interaction_sources)
   • Description: Interactions inspired by physical buildings/spaces
   • Difficulty: HIGH (score: 78)
   • Creativity: 27/30 | Impact: 23/25 | Synergy: 8/20

3. **print_first** (technical_constraints)
   • Description: Design for print, then adapt for screen
   • Difficulty: HIGH (score: 72)
   • Creativity: 22/30 | Impact: 20/25 | Synergy: 15/20

✅ All constraints compatible
✅ Difficulty balance: 1 LOW, 2 HIGH
✅ Category coverage: 3/5 categories
✅ Total synergy score: 35/60

─────────────────────────────────────────────────────────────────
Available Commands:
  accept    | Accept these constraints and proceed
  replace  | Replace a constraint (e.g., "replace architectural with mechanical")
  add       | Add another constraint
  remove    | Remove a constraint
  show      | Display constraints again
  skip      | Jump to build phase
  cancel    | Cancel workflow
─────────────────────────────────────────────────────────────────

User Adjustments

# Replace a constraint
> replace architectural with mechanical

# Accept and continue
> accept

# Add another constraint
> add no_animations

📄 Phase 4: Enriched Spec

Output Format

════════════════════════════════════════════════════════════════════
  PHASE 4: ENRICHED SPEC - PAUSED FOR FINAL REVIEW
════════════════════════════════════════════════════════════════════

📋 Specification Summary:

Project Type: Dashboard
Stack: react-tailwind (default)

Applied Paradigms:
  ✅ Warm Brutalism (earth tones, bold geometric)
  ✅ List Narrative (vertical flow, no card grids)

Apply Constraints:
  ✅ paper_and_ink (score: 35)
  ✅ mechanical (score: 68) - REPLACED
  ✅ print_first (score: 72)

📄 Full spec saved to: .claude/.strike/enriched-spec.json

─────────────────────────────────────────────────────────────────
Available Commands:
  build     | Proceed to build with this spec
  edit      | Modify the spec directly
  show      | Display full spec
  skip      | Jump to build (same as build)
  cancel    | Cancel workflow
─────────────────────────────────────────────────────────────────

🔨 Phase 5: Build

Output Format

════════════════════════════════════════════════════════════════════
  PHASE 5: BUILD - IN PROGRESS
════════════════════════════════════════════════════════════════════

🔨 Building with react-tailwind stack...

[████████████████████████████████] 100%

✅ Build complete!

Output: ./output/react-tailwind/
Metrics: Bundle: 8KB gzipped | A11y: WCAG AA compliant
Results: .claude/.strike/build-result.json

════════════════════════════════════════════════════════════════════

💾 State Management

Step mode preserves all user adjustments in .claude/.strike/step-state.json:

{
  "version": "5.0.0-positive",
  "session_id": "uuid-v4",
  "prompt": "Create a modern SaaS dashboard",
  "current_phase": "constraints",
  "completed_phases": ["analysis", "paradigms"],
  "user_adjustments": {
    "analysis": {
      "keywords_added": [],
      "keywords_removed": ["modern"],
      "keywords_modified": ["SaaS → enterprise analytics platform"]
    },
    "paradigms": {
      "paradigms_accepted": ["Warm Brutalism", "List Narrative"]
    },
    "constraints": {
      "constraints_added": [],
      "constraints_removed": [],
      "constraints_replaced": ["architectural → mechanical"]
    }
  },
  "phase_outputs": {
    "analysis": { /* ... */ },
    "paradigms": { /* ... */ },
    "constraints": { /* ... */ }
  }
}

✅ Step Mode Quality Gates

Before proceeding to next phase, verify:

Phase Completion

• Phase output displayed clearly
• User review time provided
• All adjustments processed

State Integrity

• User adjustments saved to step-state.json
• Previous phase states preserved
• No data loss between phases

User Understanding

• Next phase explained (in learning mode)
• Available commands shown
• User knows how to proceed

Final Build Quality

• All constraints applied
• Paradigms followed
• Accessibility passed
• Metrics generated

🔗 Integration with Other Modes

Step + Teams

/ui --step --team "Complex dashboard"

In step + teams mode:

• Each phase executed by appropriate agent
• Team lead (you) reviews and approves
• Agents pause and wait for input
• Parallel work within phases, sequential between phases

Step + Demo

/ui --step --demo "Quick portfolio"

In step + demo mode:

• Simplified outputs (less verbose)
• Faster phase execution
• Still pauses for user control
• Good for learning the basics

🎯 Best Practices

1. Review each phase carefully - Don't rush through
2. Use show command - Redisplay output if needed
3. Experiment with adjustments - Step mode is perfect for learning
4. Save interesting combinations - Note constraint combos that work well
5. Provide feedback - The system learns from your choices
6. Use help command - Unsure? Type help for options
7. Check state - Use status to see current progress
8. Can cancel anytime - Not happy? Use cancel to stop

🔗 Integration with Other Skills

Requires:

• ui (parent orchestrator) - Step mode is a ui sub-skill

Complements:

• teams - Step mode can be combined with teams mode
• verification-before-completion - Final verification before done

📋 Quick Reference

Step Mode Commands

continue   → Next phase
adjust     → Modify current phase
add/remove → Modify items
replace    → Swap items
show       → Display output again
skip       → Jump to build
cancel     → Stop workflow

Phase Order

ANALYSIS → PARADIGMS → CONSTRAINTS → SPEC → BUILD

State File

.claude/.strike/step-state.json

UI Step Mode v5.0 - Positive Edition: Interactive workshop for user-controlled UI generation with PIVOT MATRIX paradigm selection