documentation-tutorial

# Tutorial Developer from Primary Sources

Transform any primary source into hands-on, practical tutorials that prioritize real, working examples over conceptual explanations. Focus on what users need to *do*, not what they need to understand.

## Quick Decision Guide

**Step 1: Choose format**
- Text-heavy summary or CLI reference → Markdown
- Complex workflow with multiple steps → React Artifact

**Step 2: Follow the three pillars**
1. Real code/commands (not pseudocode)
2. Real use cases (concrete scenarios)
3. Mental model (one-sentence explanation)

## Core Principles

### The Three Pillars

Every tutorial must clearly answer:

1. **Real Code**: What's the actual code or command I run? (Copy-paste executable, no pseudocode)
2. **Real Use Cases**: When would I actually use this? (Concrete scenarios like "healthcare bot", not vague descriptions)
3. **Mental Model**: How does this work? (One-sentence explanation enabling independent problem-solving)

**Example:**
```
Mental Model: "AI generates interactive React components from natural language prompts, streaming in real-time."

Code:
curl -X POST https://api.thesys.dev/v1/ui/generate \
  -H "Authorization: Bearer sk-thesys-key" \
  -d '{"prompt": "Create a booking form", "model": "gpt-4"}'

Use Case: When you want users to book appointments without writing React,
send a prompt and stream the form directly into the page.
```

### Code-First Approach

- Lead with working examples, not theory
- Real endpoints (actual URLs, not `<placeholder>`)
- Exact payloads (complete JSON, not simplified)
- No high-level summaries unless essential
- Get users to running code within 5 minutes

## Systematic Workflow

### Phase 1: Extract from Primary Source

**Step 1: Identify Core Mental Model**

Answer: *"What's the one-sentence explanation that makes everything click?"*

Examples:
- API: "AI generates interactive UIs from prompts, streaming real-time"
- Tool: "PDFs are structured data; extract tables/text like CSV/JSON"
- Codeb