---
name: software-product-engineering
description: "Software product design (technical specs, architecture) and specialized application development (Zeitgeist single-file apps)."
---

# Software Product Engineering

Methods and patterns for designing and developing high-quality software products.

## Technical Product Specifications

Writing comprehensive, technically rigorous product specifications in Stripe/Cloudflare documentation style.

### Structure
- **Product Name & Tagline**: Identity.
- **Executive Summary**: Strategic thesis.
- **Technical Architecture**: Component table with rationales.
- **AI/ML Pipeline**: Models, formulas, data.
- **The Wedge**: Unique differentiator (Critical).
- **MVP & Roadmap**: Scoping and milestones.

### Workflow
1. **Delegate Writing**: Use `delegate_task` for deep-dive spec generation.
2. **Architecture Diagram**: Pair with dark-themed HTML diagrams (rose/emerald/cyan/violet palette).
3. **Tone**: Precise, concrete, no marketing fluff.

## Specialized App Development (Zeitgeist)

Patterns for modifying single-file HTML/CSS/JS applications (e.g., Zeitgeist suite).

### Architecture
- **Single-file**: Self-contained HTML (no frameworks).
- **Storage**: `localStorage` with `ZG.save` for sync.
- **Theming**: Shared CSS variables and dark mode (`html.dark`).

### Workflow
1. **Spec & Delegate**: Write detailed feature specs with line references and CSS examples.
2. **Verification**: Extract `<script>` block and run `node --check` to verify syntax.
3. **Escaping**: Use `esc()` for all user data rendering.

## Common Pitfalls
- **Specs**: Avoid marketing fluff; quantify everything.
- **Single-file Apps**: Count parentheses in nested ternaries (syntax errors break the whole app).
- **Large Files**: Build large HTML docs in chunks via terminal append to avoid timeouts.