gstack Showcase

Visual guide to gstack — the skill suite that turns Claude Code into a virtual engineering team.

The Sprint Pipeline

gstack skills follow a structured sprint. Each phase feeds into the next:

graph LR
    subgraph Think
        OH["/office-hours"]
    end

    subgraph Plan
        CEO["/plan-ceo-review"]
        ENG["/plan-eng-review"]
        DES["/plan-design-review"]
        AUTO["/autoplan"]
        DC["/design-consultation"]
    end

    subgraph Build
        INV["/investigate"]
        BR["/browse"]
        COOK["/setup-browser-cookies"]
    end

    subgraph Review
        REV["/review"]
        CDX["/codex"]
        CSO["/cso"]
    end

    subgraph Test
        QA["/qa"]
        QAO["/qa-only"]
        DR["/design-review"]
        BM["/benchmark"]
    end

    subgraph Ship
        SH["/ship"]
        LD["/land-and-deploy"]
        CAN["/canary"]
    end

    subgraph Reflect
        RET["/retro"]
        DOC["/document-release"]
    end

    OH --> CEO --> ENG --> DES
    AUTO -.->|runs all 3| CEO
    AUTO -.-> ENG
    AUTO -.-> DES
    DES --> Build
    Build --> REV
    REV --> QA
    QA --> SH --> LD --> CAN
    CAN --> RET
    SH --> DOC

    style Think fill:#4a90d9,color:#fff
    style Plan fill:#7b68ee,color:#fff
    style Build fill:#e67e22,color:#fff
    style Review fill:#e74c3c,color:#fff
    style Test fill:#2ecc71,color:#fff
    style Ship fill:#1abc9c,color:#fff
    style Reflect fill:#9b59b6,color:#fff

Loading

Skill Categories at a Glance

mindmap
  root((gstack))
    Ideation
      /office-hours
        YC-style forcing questions
        Challenges your framing
        Writes design doc
    Planning
      /plan-ceo-review
        Scope expansion or reduction
        10-star product thinking
      /plan-eng-review
        Architecture lock-in
        ASCII data flow diagrams
        Test matrix
      /plan-design-review
        0-10 dimension ratings
        AI slop detection
      /autoplan
        Runs all 3 reviews automatically
      /design-consultation
        Full design system from scratch
    Code Quality
      /review
        Pre-landing PR review
        Auto-fixes obvious issues
      /codex
        Second opinion via OpenAI Codex
        3 modes: review, challenge, consult
      /cso
        OWASP Top 10
        STRIDE threat model
      /investigate
        Root cause debugging
        No fixes without investigation
    Testing
      /qa
        Real browser testing + fixes
        Atomic commits per fix
      /qa-only
        Report only, no fixes
      /design-review
        Visual audit + fixes
      /benchmark
        Core Web Vitals
        Performance baselines
    Shipping
      /ship
        Tests, PR, version bump
      /land-and-deploy
        Merge, CI, deploy, verify
      /canary
        Post-deploy monitoring
      /retro
        Weekly retrospective
      /document-release
        Sync docs with shipped code
    Safety
      /careful
        Warns before destructive ops
      /freeze
        Lock edits to one directory
      /guard
        careful + freeze combined
      /unfreeze
        Remove edit lock

Loading

How Skills Connect

The real power is in chaining. Each skill produces artifacts the next one consumes:

flowchart TD
    A["/office-hours"] -->|design doc| B["/plan-ceo-review"]
    B -->|scoped plan| C["/plan-eng-review"]
    C -->|architecture + test plan| D["Implementation"]
    D -->|code changes| E["/review"]
    E -->|clean diff| F["/qa staging-url"]
    F -->|verified build| G["/ship"]
    G -->|PR created| H["/land-and-deploy"]
    H -->|deployed| I["/canary"]
    I -->|healthy| J["/retro"]
    G -->|shipped| K["/document-release"]

    style A fill:#4a90d9,color:#fff,stroke:#fff
    style B fill:#7b68ee,color:#fff,stroke:#fff
    style C fill:#7b68ee,color:#fff,stroke:#fff
    style D fill:#e67e22,color:#fff,stroke:#fff
    style E fill:#e74c3c,color:#fff,stroke:#fff
    style F fill:#2ecc71,color:#fff,stroke:#fff
    style G fill:#1abc9c,color:#fff,stroke:#fff
    style H fill:#1abc9c,color:#fff,stroke:#fff
    style I fill:#1abc9c,color:#fff,stroke:#fff
    style J fill:#9b59b6,color:#fff,stroke:#fff
    style K fill:#9b59b6,color:#fff,stroke:#fff

Loading

Browse Architecture

The /browse skill is the engine behind /qa, /design-review, /benchmark, and /canary:

sequenceDiagram
    participant CC as Claude Code
    participant CLI as gstack CLI<br/>(compiled binary)
    participant SRV as Browse Server<br/>(Bun.serve)
    participant CHR as Chromium<br/>(headless)

    Note over CC,CHR: First command (~3s cold start)
    CC->>CLI: $B snapshot -i
    CLI->>CLI: Read .gstack/browse.json
    CLI-->>CLI: No state file found
    CLI->>SRV: Spawn server process
    SRV->>CHR: Launch Chromium
    CHR-->>SRV: Ready
    SRV-->>CLI: Health check OK
    CLI->>SRV: POST /command {snapshot -i}
    SRV->>CHR: page.accessibility.snapshot()
    CHR-->>SRV: ARIA tree
    SRV-->>CLI: Annotated tree with @refs
    CLI-->>CC: Plain text output

    Note over CC,CHR: Subsequent commands (~100ms)
    CC->>CLI: $B click @e3
    CLI->>CLI: Read .gstack/browse.json
    CLI->>SRV: POST /command {click @e3}
    SRV->>SRV: Resolve @e3 → Locator
    SRV->>CHR: locator.click()
    CHR-->>SRV: Done
    SRV-->>CLI: "Clicked @e3"
    CLI-->>CC: Plain text output

Loading

Docs

Guide	What you'll learn
Use Cases	5 real-world scenarios with step-by-step walkthroughs
Cheat Sheet	Quick reference: when to use each skill, inputs, outputs
Decision Flowchart	"Which skill should I use?" interactive guide

License

MIT — same as gstack itself.