developer-sandbox

Files (2)

• README.md
• SKILL.md

SKILL.md (first lines)

# Interactive Playgrounds and Demo Environments

Let developers experience your product before they commit. A great playground removes the biggest barrier to adoption: uncertainty about whether your product solves their problem.

## Overview

Developer playgrounds serve multiple purposes:
- **Evaluation**: Let developers test before investing setup time
- **Learning**: Interactive environment for understanding concepts
- **Marketing**: Demonstrate capabilities without sales calls
- **Support**: Reproducible environment for debugging issues

This skill covers designing playgrounds that convert curious visitors into active users.

## Before You Start

Review the **developer-audience-context** skill to understand:
- What do developers want to validate before signing up?
- What's the typical evaluation workflow in your space?
- What competing products offer playgrounds?
- What's the minimum viable experience that demonstrates value?

Your playground should answer the questions developers have when evaluating.

## Playground Design Principles

### Principle 1: Instant Gratification

Developers should see something meaningful within 10 seconds of landing.

**Good**: Page loads with a working example already running
**Bad**: Empty editor with "Type your code here" placeholder

```html
<!-- Good: Pre-loaded, running example -->
<div class="playground">
  <div class="editor">
    <pre><code>// Analyze sentiment of this text
const result = await api.analyze("I love this product!");
console.log(result.sentiment); // "positive"</code></pre>
  </div>
  <div class="output">
    <pre>{ "sentiment": "positive", "confidence": 0.94 }</pre>
  </div>
  <button class="run-btn">Run ▶️</button>
</div>
```

### Principle 2: Progressive Complexity

Start simple, let developers go deeper as curiosity grows.

**Level 1: One-Click Demo**
```
[Analyze Text] → See result immediately
```

**Level 2: Editable Input**
```
[Edit the text] → [Run] → See result
```

**Level 3: Full API Access**
```
Edit code → Modify parameters → See raw request/response
```

**Level 4: Full Playground**
```
Multiple files → Import SDK → Build mini-app
```

### Principle 3: Real API, Real Results

Never fake the results. Use your actual API with sandbox credentials.

**Why real matters:**
- Builds trust (not a demo, but actual product)
- Shows real performance characteristics
- Demonstrates actual error handling
- No surprises when they sign up

### Principle 4: Zero Friction

No signup required for basic playground. No installation. No configuration.

```
❌ Bad: "Sign up to try the playground"
❌ Bad: "Install our CLI to continue"
❌ Bad: "Configure your environment..."

✅ Good: Works immediately in browser
```

## Pre-Populated Examples

### Example Selection Strategy

Choose examples that:
1. **Show core value** in 30 seconds
2. **Solve real problems** developers have
3. **Demonstrate differentiation** from competitors
4. **Scale in complexity** from simple to advanced

### Example Categories

**"Hello World" Example**
- Simplest possible use of your API
- Should work with zero modification
- Proves the system is working

```javascript
// Example: Text Analysis API
const result = await api.analyze("Hello, world!");
// Output: { words: 2, characters: 13 }
```

**"Aha Moment" Example**
- Shows unique capability of your product

From jonathimer/devmarketing-skills, MIT.

More from jonathimer/devmarketing-skills