Build Like Me - Complete SDLC System

A comprehensive software development lifecycle system that builds and ships Shopify features exactly like you would: Plan → Build → Test → Review → Ship, with 90% confidence gates at every stage and compound learning throughout.

---

🎯 System Overview

This system replicates your complete development workflow with:

• 5 Phases: Prompt Engineering → Planning → Building → Testing → Code Review
• 8 Specialized Agents: Each handling one aspect of the workflow
• 90% Confidence Gates: At every phase, must reach 90% to proceed
• Compound Learning: System gets smarter after every feature
• Complexity Routing: Simple features skip phases, complex features get broken down
• Playwright Integration: Real browser testing for user-facing features
• Root Cause Analysis: No band-aid fixes, solve actual problems

---

📁 System Architecture

.claude/
├── skills/build-feature/
│   ├── SKILL.md                    ← Main orchestrator
│   ├── README.md                   ← This file
│   └── scripts/
│       ├── confidence.js           ← Objective calculator (all phases)
│       └── complexity-detector.js  ← Auto-detects feature complexity
│
├── agents/
│   ├── prompt-engineer.md          ← Phase 1: Structures requirements
│   ├── planner.md                  ← Phase 2: Creates detailed plans
│   ├── builder.md                  ← Phase 3: Implements features
│   ├── test-strategist.md          ← Phase 4a: Decides testing approach
│   ├── playwright-tester.md        ← Phase 4b: E2E testing
│   ├── unit-tester.md              ← Phase 4c: Unit testing
│   ├── bug-analyzer.md             ← Phase 4d: Root cause analysis
│   └── code-reviewer.md            ← Phase 5: Reviews & optimizes
│
└── memory/                         ← Compound learning storage
    ├── prompts/learned-patterns.md
    ├── planning/architecture-decisions.md
    ├── building/implementation-patterns.md
    ├── testing/playwright-scenarios.md
    ├── testing/common-bugs.md
    └── review/optimization-patterns.md

---

🚀 Usage

Basic Usage

/build-feature "Add wishlist button to product cards"

The system will:

1. Detect complexity (SIMPLE/MEDIUM/COMPLEX)
2. Route through appropriate workflow
3. Build with 90% confidence at each stage
4. Test comprehensively (Playwright + Unit tests)
5. Review and optimize code
6. Capture learnings for next time
7. Present production-ready feature

Usage Examples

Simple Feature:

/build-feature "Change button color to red"

→ Skips Prompt + Planning, goes directly to Build

Medium Feature:

/build-feature "Add size guide modal to product pages"

→ Full workflow (all 5 phases)

Complex Feature:

/build-feature "Implement product recommendation engine"

→ Full workflow + breaks into phases

Bug Fix:

/build-feature "Fix cart button not working on mobile"

→ Auto-detects as bug fix, structures accordingly

Figma to Code:

/build-feature "Convert this Figma design to code [screenshot]"

→ Auto-detects as UI implementation, includes visual testing

---

📊 The 5 Phases

Phase 1: Prompt Engineering (Medium/Complex only)

Goal: Convert raw prompt into structured requirement

Agent: prompt-engineer

Process:

1. Auto-detect type (Feature/Bug/UI/Optimization)
2. Auto-detect complexity (Simple/Medium/Complex)
3. Structure requirement (Format A for simple, B for complex)
4. Calculate requirement clarity confidence
5. If < 90%: Ask clarifying questions
6. Iterate until ≥ 90%

Output:

• Structured requirement document
• Acceptance criteria
• Test scenarios
• Possible approaches

Confidence Formula:

Clarity = (
  Completeness    × 40% +
  Clarity         × 40% +
  Testability     × 20%
)

---

Phase 2: Planning (Medium/Complex only)

Goal: Create detailed, executable implementation plan

Agent: planner

Process:

1. Scan codebase for similar patterns
2. Research best practices
3. Identify integration points
4. Plan for edge cases
5. Create step-by-step TODOs
6. If COMPLEX: Break into phases
7. Calculate planning confidence
8. If < 90%: Research more, ask questions
9. Iterate until ≥ 90%

Output:

• Detailed plan with TODOs
• Files to create/modify
• Integration approach
• Edge case handling
• Pattern references

Confidence Formula:

Planning = (
  Requirements Understanding × 25% +
  Codebase Patterns Found    × 25% +
  Integration Clarity        × 20% +
  Edge Cases Identified      × 15% +
  Execution Sequence         × 15%
)

---

Phase 3: Building (All features)

Goal: Implement feature according to plan (or directly for simple)

Agent: builder

Process:

1. Read plan (or prompt for simple features)
2. Execute TODOs systematically
3. Follow coding standards from CLAUDE.md
4. Handle all edge cases
5. Add documentation
6. Self-assess alignment
7. Calculate build confidence
8. If < 90%: Analyze WHY (requirement/codebase/approach/plan issue)
9. Take appropriate action based on root cause
10. Iterate until ≥ 90%

Output:

• Feature implementation
• Files created/modified
• Integration complete
• Edge cases handled
• Documented code

Confidence Formula:

Build = (
  Requirement Alignment    × 30% +
  Code Quality             × 25% +
  Edge Cases Handled       × 20% +
  Integration Correctness  × 15% +
  Feature Completeness     × 10%
)

---

Phase 4: Testing (All features)

Goal: Comprehensive testing with Playwright + Unit tests, bug-free feature

Agents: test-strategist, playwright-tester, unit-tester, bug-analyzer

Process:

4a. Test Strategist:

1. Analyze built feature
2. Decide if Playwright needed (user interactions, complex UI, forms, etc.)
3. Decide if unit tests needed (pure functions, business logic)
4. Create test strategy document

4b. Playwright Tester (if needed):

1. Write E2E tests for user interactions
2. Run tests in real browser
3. Report pass/fail rates

4c. Unit Tester (if needed):

1. Write unit tests for functions
2. Run tests
3. Report results

4d. Bug Analyzer (for failures):

1. Analyze test failures
2. Find ROOT CAUSE (not symptom)
3. Suggest proper fix
4. Send to Builder one bug at a time
5. Builder fixes, re-test
6. Loop until all tests pass

Output:

• Comprehensive test suite
• All tests passing
• Bugs fixed at root cause
• Testing confidence ≥ 90%

Confidence Formula:

Testing = (
  Playwright Tests  × 30% +
  Unit Tests        × 25% +
  Code Coverage     × 20% +
  Edge Cases        × 15% +
  Test Stability    × 10%
)

---

Phase 5: Code Review (All features)

Goal: Production-ready, optimized, maintainable code

Agent: code-reviewer

Process:

1. Review all code against checklist:
   • Code style
   • Best practices
   • Performance
   • Security
   • Accessibility
   • Maintainability
   • Documentation
2. Apply optimizations
3. ALWAYS re-test after changes
4. If tests fail: Send back to Builder
5. Calculate code quality confidence
6. If < 90%: Apply more optimizations
7. Iterate until ≥ 90%

Output:

• Optimized code
• All quality checks passed
• Tests still passing
• Production-ready feature

Confidence Formula:

Review = (
  Code Style        × 20% +
  Best Practices    × 25% +
  Performance       × 20% +
  Security          × 20% +
  Maintainability   × 15%
)

---

🧠 Compound Learning

After each feature completion, learnings are captured to memory files:

Memory Files

.claude/memory/prompts/learned-patterns.md

• How users describe features
• Common clarification questions
• Patterns in requirements

.claude/memory/planning/architecture-decisions.md

• Architectural choices made
• Why certain approaches chosen
• Patterns discovered in codebase

.claude/memory/building/implementation-patterns.md

• Code patterns that work well
• How to handle specific integrations
• Edge case handling approaches

.claude/memory/testing/playwright-scenarios.md

• Reusable test scenarios
• Test patterns for common features
• What to test for different feature types

.claude/memory/testing/common-bugs.md

• Bugs found and their root causes
• How bugs were fixed
• How to prevent similar bugs

.claude/memory/review/optimization-patterns.md

• Code optimizations that worked
• Performance improvements
• Quality patterns

How Learning Works

1. During feature development: Agents read memory files
2. Start with higher understanding: Past patterns inform current work
3. After feature completion: Capture new learnings
4. Next feature: Starts smarter than the last

Result: System gets faster and better over time (compound effect)

---

🔄 Workflow Examples

Simple Feature: "Change button color"

1. Complexity Detection
   → SIMPLE (score: 15%)

2. Skip Prompt Engineering
3. Skip Planning

4. Build
   → Change CSS/Tailwind class
   → Confidence: 95% ✅

5. Test
   → Visual check
   → Confidence: 92% ✅

6. Review
   → Quick check
   → Confidence: 94% ✅

7. Done
   Total time: ~5 minutes

Medium Feature: "Add wishlist button"

1. Complexity Detection
   → MEDIUM (score: 45%)

2. Prompt Engineering
   → Structure requirement
   → Clarify: storage method, UI behavior
   → Confidence: 92% ✅

3. Planning
   → Scan codebase, find patterns
   → Create plan with TODOs
   → Confidence: 91% ✅

4. Build
   → Create sections/wishlist.liquid
   → Create assets/wishlist.js
   → Handle edge cases
   → Confidence: 93% ✅

5. Test
   → Playwright: 15/15 tests passed
   → Unit: 6/6 tests passed
   → Confidence: 95% ✅

6. Review
   → Optimize long function
   → Add JSDoc
   → Remove console.logs
   → Re-test: All pass
   → Confidence: 94% ✅

7. Learn
   → Capture patterns to memory

8. Done
   Total time: ~2 hours
   Iterations: 7 (1 per phase + 1 test fix iteration)

Complex Feature: "Product recommendation engine"

1. Complexity Detection
   → COMPLEX (score: 85%)

2. Prompt Engineering
   → Comprehensive structure
   → Multiple clarifications
   → Confidence: 91% ✅

3. Planning
   → Break into 4 phases:
     - Phase 1: Data structure
     - Phase 2: Algorithm
     - Phase 3: UI
     - Phase 4: Integration
   → Detailed plan for Phase 1
   → Confidence: 93% ✅

4-7. Execute Phase 1
     (Build → Test → Review → Learn)

8. Plan Phase 2
   → Detailed plan
   → Confidence: 92% ✅

9-12. Execute Phase 2
      (Build → Test → Review → Learn)

... Continue for Phases 3 & 4

Final: Done
Total time: ~2 days (across multiple sessions)

---

⚙️ Configuration

Confidence Thresholds

All phases use 90% threshold. Adjust in confidence.js if needed.

Iteration Limits

• Prompt Engineering: Max 3 iterations
• Planning: Max 5 iterations
• Build: Max 5 iterations
• Testing: Max 10 iterations
• Code Review: Max 3 iterations

Playwright Usage Criteria

Playwright is used ONLY for:

1. User interactions (clicks, inputs)
2. Complex UI components
3. Form submissions
4. Cart/checkout flows
5. Responsive/mobile features
6. JavaScript-heavy features
7. Cross-browser concerns

Simple features may not need Playwright.

---

🛠️ Utilities

Confidence Calculator

node .claude/skills/build-feature/scripts/confidence.js <phase> <scores>

# Examples
node confidence.js prompt 100,90,85
node confidence.js planning 100,90,85,75,70
node confidence.js build 95,85,90,80,92
node confidence.js testing 100,95,85,90,88
node confidence.js review 95,90,88,92,85

Complexity Detector

node .claude/skills/build-feature/scripts/complexity-detector.js "feature request"

# Output: SIMPLE | MEDIUM | COMPLEX

---

📈 Success Metrics

The system succeeds when:

• ✅ All confidence gates passed (≥90%)
• ✅ All tests passing (Playwright + Unit)
• ✅ Code review approved
• ✅ Feature meets requirements exactly
• ✅ Learnings captured for next time
• ✅ You're proud of the result

---

🎯 Key Benefits

1. Quality

• 90% confidence gates prevent rushing
• Comprehensive testing catches bugs
• Code review ensures maintainability

2. Speed

• Compound learning makes each feature faster
• Patterns captured and reused
• No rework from unclear requirements

3. Consistency

• Same high standards every time
• Follows your coding conventions
• Maintains architectural decisions

4. Scalability

• Simple features are fast (skip phases)
• Complex features are managed (broken down)
• System adapts to feature size

5. Learning

• Gets smarter over time
• Builds institutional knowledge
• Prevents repeat mistakes

---

🚦 Getting Started

First Feature

/build-feature "Add a 'Sale' badge to discounted products"

Watch the system:

1. Detect complexity
2. Structure requirement
3. Plan implementation
4. Build feature
5. Test thoroughly
6. Review & optimize
7. Capture learnings

After 10 Features

Memory files will have:

• 10+ patterns learned
• 10+ architectural decisions
• 20+ implementation patterns
• 30+ test scenarios
• 15+ common bugs documented
• 10+ optimization patterns

Result: Feature #11 will be faster and better than Feature #1

---

📚 Documentation

• SKILL.md: Main orchestrator logic
• Each agent .md: Detailed instructions for that agent
• Memory files: Captured learnings
• CLAUDE.md: Project coding standards

---

🤝 How It Works With You

You provide:

• Feature request (prompt)
• Answers to clarification questions
• Approval at key decision points
• Final git commit approval

System handles:

• Requirement structuring
• Implementation planning
• Code writing
• Testing (E2E + Unit)
• Bug fixing
• Code review
• Optimization
• Learning capture

You remain in control:

• System asks before major changes
• You approve plans before execution
• You review final result before commit
• You can interrupt at any phase

---

🎉 Result

A system that builds and ships features exactly like you would, with:

• Your quality standards
• Your coding conventions
• Your thoroughness
• Your attention to detail

But faster and more consistent because:

• It remembers everything
• It doesn't skip steps
• It tests comprehensively
• It learns from mistakes

---

Ready to build features like never before! 🚀

Start with: /build-feature "your feature request"