Tutorial Overview

Series index: gstack Tutorial Series

Three review skills cover different audiences: engineering, developer experience, and design.

What you will learn

• ✅ Differences between three review types
• ✅ /plan-eng-review for architecture
• ✅ /plan-devex-review for developer experience
• ✅ /plan-design-review for UI/UX
• ✅ Which review when (decision table)

Three Review Types

flowchart TD
    A[Plan] --> B{Who is the audience?}
    B -->|Backend/API| C[/plan-eng-review]
    B -->|SDK/CLI/Docs| D[/plan-devex-review]
    B -->|UI/UX/Frontend| E[/plan-design-review]
    B -->|All of above| F[Run all three]

    style C fill:#e3f2fd
    style D fill:#e8f5e9
    style E fill:#fff3e0

/plan-eng-review — Architecture Review

What it covers

1. ASCII diagrams — System architecture, data flow
2. State machines — Transitions, edge cases
3. Error paths — Failure modes, recovery
4. Test matrix — What to test, coverage targets
5. Security considerations — Attack surfaces, mitigations
6. Performance — Bottlenecks, scaling limits

Example output

## Engineering Review: User Authentication

### Architecture Diagram

┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │ Client │────▶│ API GW │────▶│ Auth Svc │ └─────────────┘ └─────────────┘ └─────────────┘ │ ▼ ┌─────────────┐ │ Database │ └─────────────┘

### State Machine: Session

[Anonymous] ──login──▶ [Authenticating] ──success──▶ [Authenticated] │ │ │ fail │ logout ▼ ▼ [Error] ◀────────────────── [Anonymous]

### Error Paths

| Error | Handler | Recovery |
|-------|---------|----------|
| Invalid credentials | Return 401 | Prompt retry |
| Token expired | Return 401 | Refresh token |
| Service down | Return 503 | Retry with backoff |
| Rate limited | Return 429 | Wait and retry |

### Test Matrix

| Scenario | Test Type | Priority |
|----------|-----------|----------|
| Valid login | Integration | High |
| Invalid password | Unit | High |
| Token refresh | Integration | High |
| Session timeout | Integration | Medium |
| Concurrent sessions | Integration | Medium |
| SQL injection | Security | Critical |

When to use

• Backend/API development
• Database schema changes
• Microservice design
• Performance-critical paths
• Security-sensitive features

/plan-devex-review — Developer Experience Review

What it covers

1. Developer personas — Who uses this?
2. TTHW benchmarks — Time to Hello World
3. Magical moment — What makes developers say “wow”
4. Friction points — Where do developers get stuck?
5. Documentation needs — What docs are required?
6. Error messages — Are they helpful?

Example output

## DevEx Review: API SDK

### Developer Personas

| Persona | Needs | Pain Points |
|---------|-------|-------------|
| Junior dev | Clear examples, good errors | Overwhelming options |
| Senior dev | Speed, flexibility | Boilerplate code |
| Enterprise | Stability, support | Version lock-in |

### TTHW Benchmark

| Platform | Current | Target | Gap |
|----------|---------|--------|-----|
| JavaScript | 5 min | 2 min | Need simpler init |
| Python | 8 min | 3 min | Need better docs |
| Go | 15 min | 5 min | Need starter template |

### Magical Moment

"The SDK guessed my config from environment variables, no setup needed."

### Friction Points (20-45 questions asked)

1. What's the first error new users see?
2. How many steps before first API call?
3. Is the error message actionable?
4. Does the example code work without modification?
5. Is the installation one command?

### Documentation Needs

- [ ] Quick start guide (target: 2 min read)
- [ ] API reference with examples
- [ ] Error troubleshooting guide
- [ ] Migration guide from v1

When to use

• SDK development
• CLI tools
• API design
• Documentation projects
• Platform/infrastructure

/plan-design-review — UI/UX Design Review

What it covers

1. 10-section rating — Each dimension scored 0-10
2. AI slop detection — Generic, lazy design patterns
3. Interactive review — One question per design choice
4. Before/after examples — Visual improvement suggestions

The 10 Design Dimensions

AI Slop Detection

Common AI-generated design problems:

❌ AI Slop Patterns Detected:

1. **Generic hero section** — "Empower your workflow" placeholder text
2. **Meaningless gradient** — Purple-to-blue without purpose
3. **Cookie-cutter cards** — Identical 3-column layout
4. **Fake testimonials** — Generated quotes with stock photos
5. **Hollow CTA** — "Get started" without explaining what

✅ Fixes Applied:
- Hero: Replace with specific value proposition
- Gradient: Use brand colors with purpose
- Cards: Vary layout based on content type
- Testimonials: Remove or use real quotes
- CTA: Add specific action description

When to use

• Frontend development
• UI components
• Landing pages
• User flows
• Design systems

Which Review When?

Skill Quick Reference Table

Summary

Three reviews for three audiences:

1. Engineering — Architecture, tests, security
2. DevEx — Developer experience, TTHW, docs
3. Design — UI/UX, accessibility, AI slop detection

Key takeaways

• ✅ Match the review to the audience
• ✅ Use /autoplan for automatic routing
• ✅ Each review has specific outputs
• ✅ Run multiple reviews for full-stack features

Series navigation:

• ← Previous: Tutorial 3: plan-ceo-review
• → Next: Tutorial 5: Design Pipeline
• Back: Series Index