# Quickstart Template (Diátaxis: Tutorial)

**Purpose:** Get users to their first success in minimal time.

**When to use:**
- First page new users see after the intro
- 5-10 minute "time to hello world"
- Builds confidence and momentum

## Format

```mdx
---
title: Quickstart
description: Get up and running with [Product] in 5 minutes
contentType: tutorial
---

## Overview

In this quickstart, you'll learn how to:

- [Outcome 1]
- [Outcome 2]
- [Outcome 3]

**Time to complete:** ~5 minutes

## Prerequisites

<Note>
Before you begin, ensure you have:
- [Prerequisite 1]
- [Prerequisite 2]
</Note>

## Step 1: [First Action]

Brief explanation of what we're doing.

<Tabs>
  <Tab title="npm">
    ```bash
    npm install package-name
    ```
  </Tab>
  <Tab title="yarn">
    ```bash
    yarn add package-name
    ```
  </Tab>
  <Tab title="pnpm">
    ```bash
    pnpm add package-name
    ```
  </Tab>
</Tabs>

## Step 2: [Second Action]

Explanation of this step.

```typescript
// Code example with comments
import { something } from 'package';

const result = something();
```

## Step 3: [Third Action]

Final step to complete the quickstart.

```typescript
// Final code
console.log('Success!');
```

## Verify It Works

Run the following to confirm everything is set up:

```bash
npm run dev
```

You should see:

```
✓ Server started on http://localhost:3000
```

<Tip>
If you see an error, check the [Troubleshooting](/troubleshooting) guide.
</Tip>

## What You've Built

Congratulations! You now have:

- [Achievement 1]
- [Achievement 2]
- [Achievement 3]

## Next Steps

<CardGroup cols={2}>
  <Card title="Core Concepts" icon="book-open" href="/concepts">
    Understand the key concepts
  </Card>
  <Card title="Full Tutorial" icon="graduation-cap" href="/tutorial">
    Build a complete project
  </Card>
  <Card title="Configuration" icon="gear" href="/config">
    Customize your setup
  </Card>
  <Card title="API Reference" icon="code" href="/reference">
    Explore the full API
  </Card>
</CardGroup>
```

## Guidelines

- **Keep it short** - 5 minutes or less
- **Show immediate value** - User sees something working fast
- **Use tabs for alternatives** - npm/yarn/pnpm, different languages
- **End with success** - User should feel accomplished
- **Link forward** - Guide to next learning steps
- **Minimal explanation** - Save deep dives for tutorials

## Diátaxis Principles for Quickstart

| Principle | Application |
|-----------|-------------|
| Learning-oriented | User builds understanding through action |
| Minimal | Only essential steps, no extras |
| Success-focused | Every step moves toward working result |
| Motivating | Builds confidence for deeper learning |

## Quick vs Tutorial

| Quickstart | Tutorial |
|------------|----------|
| 5 minutes | 15-30 minutes |
| Essential steps only | Comprehensive learning |
| Working result | Deep understanding |
| Links to more | Self-contained |
| One path | Multiple sections |

## Content Type

Quickstarts are a specialized form of **Tutorial** (learning-oriented):

```yaml
contentType: tutorial
subType: quickstart
```
