developer-sandbox

Name: developer-sandbox
Author: jonathimer

63installs6forks

How to install developer-sandbox?

jonathimer/devmarketing-skills/developer-sandbox

$npx -y skills add jonathimer/devmarketing-skills --skill developer-sandbox

Installs into the current project.

Summary

Design and build interactive playgrounds that let developers experience your product without commitment. This skill covers playground architecture, pre-populated examples, embedding strategies, gating decisions, and converting playground users to signups. Trigger phrases: "develo

Files · 1

View on GitHub

SKILL.md

1	# Interactive Playgrounds and Demo Environments
2
3	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.
4
5	## Overview
6
7	Developer playgrounds serve multiple purposes:
8	- Evaluation: Let developers test before investing setup time
9	- Learning: Interactive environment for understanding concepts
10	- Marketing: Demonstrate capabilities without sales calls
11	- Support: Reproducible environment for debugging issues
12
13	This skill covers designing playgrounds that convert curious visitors into active users.
14
15	## Before You Start
16
17	Review the developer-audience-context skill to understand:
18	- What do developers want to validate before signing up?
19	- What's the typical evaluation workflow in your space?
20	- What competing products offer playgrounds?
21	- What's the minimum viable experience that demonstrates value?
22
23	Your playground should answer the questions developers have when evaluating.
24
25	## Playground Design Principles
26
27	### Principle 1: Instant Gratification
28
29	Developers should see something meaningful within 10 seconds of landing.
30
31	Good: Page loads with a working example already running
32	Bad: Empty editor with "Type your code here" placeholder
33
34	```html
35	<!-- Good: Pre-loaded, running example -->
36	<div class="playground">
37	<div class="editor">
38	<pre><code>// Analyze sentiment of this text
39	const result = await api.analyze("I love this product!");
40	console.log(result.sentiment); // "positive"</code></pre>
41	</div>
42	<div class="output">
43	<pre>{ "sentiment": "positive", "confidence": 0.94 }</pre>
44	</div>
45	<button class="run-btn">Run ▶️</button>
46	</div>
47	```
48
49	### Principle 2: Progressive Complexity
50
51	Start simple, let developers go deeper as curiosity grows.
52
53	Level 1: One-Click Demo
54	```
55	[Analyze Text] → See result immediately
56	```
57
58	Level 2: Editable Input
59	```
60	[Edit the text] → [Run] → See result
61	```
62
63	Level 3: Full API Access
64	```
65	Edit code → Modify parameters → See raw request/response
66	```
67
68	Level 4: Full Playground
69	```
70	Multiple files → Import SDK → Build mini-app
71	```
72
73	### Principle 3: Real API, Real Results
74
75	Never fake the results. Use your actual API with sandbox credentials.
76
77	Why real matters:
78	- Builds trust (not a demo, but actual product)
79	- Shows real performance characteristics
80	- Demonstrates actual error handling
81	- No surprises when they sign up
82
83	### Principle 4: Zero Friction
84
85	No signup required for basic playground. No installation. No configuration.
86
87	```
88	❌ Bad: "Sign up to try the playground"
89	❌ Bad: "Install our CLI to continue"
90	❌ Bad: "Configure your environment..."
91
92	✅ Good: Works immediately in browser
93	```
94
95	## Pre-Populated Examples
96
97	### Example Selection Strategy
98
99	Choose examples that:
100	1. Show core value in 30 seconds
101	2. Solve real problems developers have
102	3. Demonstrate differentiation from competitors
103	4. Scale in complexity from simple to advanced
104
105	### Example Categories
106
107	"Hello World" Example
108	- Simplest possible use of your API
109	- Should work with zero modification
110	- Proves the system is working
111
112	```javascript
113	// Example: Text Analysis API
114	const result = await api.analyze("Hello, world!");
115	// Output: { words: 2, characters: 13 }
116	```
117
118	"Aha Moment" Example
119	- Shows unique capability of your product
120	- Creates the "wow, that was easy" reaction
121	- This is your most important example
122
123	```javascript
124	// Example: Shows AI doing something impressive
125	const result = await api.summarize(longArticle);
126	// Output: A perfect 3-sentence summary
127	```
128
129	"Real Use Case" Examples
130	- Actual scenarios developers encounter
131	- Shows how to solve specific problems
132	- Multiple examples for different use cases
133
134	```javascript
135	// Example 1: E-commerce - Analyze product reviews
136	// Example 2: Support - Classify incoming tickets
137	// Example 3: Social - Detect spam comments
138	```
139
140	"Integration" Examples
141	- Shows product working with popular tools
142	- Addresses "will this work with my stack?" concern
143
144	```javascript
145	// Example: Integration with Express.js
146	app.post('/analyze', async (req, res) => {
147	const result = await api.analyze(req.body.text);
148	res.json(result);
149	});
150	```
151
152	### Example Quality Checklist
153
154	- [ ] Example runs without modification
155	- [ ] Output is interesting/impressive
156	- [ ] Code follows language best practices
157	- [ ] Comments explain what's happening
158	- [ ] Real-world use case is obvious
159	- [ ] L

People who liked this also viewed

6 picks

Type

developer-sandbox

63installs6forks

View on GitHub

How to install developer-sandbox?

jonathimer/devmarketing-skills/developer-sandbox

$npx -y skills add jonathimer/devmarketing-skills --skill developer-sandbox

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Interactive Playgrounds and Demo Environments
2
3	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.
4
5	## Overview
6
7	Developer playgrounds serve multiple purposes:
8	- Evaluation: Let developers test before investing setup time
9	- Learning: Interactive environment for understanding concepts
10	- Marketing: Demonstrate capabilities without sales calls
11	- Support: Reproducible environment for debugging issues
12
13	This skill covers designing playgrounds that convert curious visitors into active users.
14
15	## Before You Start
16
17	Review the developer-audience-context skill to understand:
18	- What do developers want to validate before signing up?
19	- What's the typical evaluation workflow in your space?
20	- What competing products offer playgrounds?
21	- What's the minimum viable experience that demonstrates value?
22
23	Your playground should answer the questions developers have when evaluating.
24
25	## Playground Design Principles
26
27	### Principle 1: Instant Gratification
28
29	Developers should see something meaningful within 10 seconds of landing.
30
31	Good: Page loads with a working example already running
32	Bad: Empty editor with "Type your code here" placeholder
33
34	```html
35	<!-- Good: Pre-loaded, running example -->
36	<div class="playground">
37	<div class="editor">
38	<pre><code>// Analyze sentiment of this text
39	const result = await api.analyze("I love this product!");
40	console.log(result.sentiment); // "positive"</code></pre>
41	</div>
42	<div class="output">
43	<pre>{ "sentiment": "positive", "confidence": 0.94 }</pre>
44	</div>
45	<button class="run-btn">Run ▶️</button>
46	</div>
47	```
48
49	### Principle 2: Progressive Complexity
50
51	Start simple, let developers go deeper as curiosity grows.
52
53	Level 1: One-Click Demo
54	```
55	[Analyze Text] → See result immediately
56	```
57
58	Level 2: Editable Input
59	```
60	[Edit the text] → [Run] → See result
61	```
62
63	Level 3: Full API Access
64	```
65	Edit code → Modify parameters → See raw request/response
66	```
67
68	Level 4: Full Playground
69	```
70	Multiple files → Import SDK → Build mini-app
71	```
72
73	### Principle 3: Real API, Real Results
74
75	Never fake the results. Use your actual API with sandbox credentials.
76
77	Why real matters:
78	- Builds trust (not a demo, but actual product)
79	- Shows real performance characteristics
80	- Demonstrates actual error handling
81	- No surprises when they sign up
82
83	### Principle 4: Zero Friction
84
85	No signup required for basic playground. No installation. No configuration.
86
87	```
88	❌ Bad: "Sign up to try the playground"
89	❌ Bad: "Install our CLI to continue"
90	❌ Bad: "Configure your environment..."
91
92	✅ Good: Works immediately in browser
93	```
94
95	## Pre-Populated Examples
96
97	### Example Selection Strategy
98
99	Choose examples that:
100	1. Show core value in 30 seconds
101	2. Solve real problems developers have
102	3. Demonstrate differentiation from competitors
103	4. Scale in complexity from simple to advanced
104
105	### Example Categories
106
107	"Hello World" Example
108	- Simplest possible use of your API
109	- Should work with zero modification
110	- Proves the system is working
111
112	```javascript
113	// Example: Text Analysis API
114	const result = await api.analyze("Hello, world!");
115	// Output: { words: 2, characters: 13 }
116	```
117
118	"Aha Moment" Example
119	- Shows unique capability of your product
120	- Creates the "wow, that was easy" reaction
121	- This is your most important example
122
123	```javascript
124	// Example: Shows AI doing something impressive
125	const result = await api.summarize(longArticle);
126	// Output: A perfect 3-sentence summary
127	```
128
129	"Real Use Case" Examples
130	- Actual scenarios developers encounter
131	- Shows how to solve specific problems
132	- Multiple examples for different use cases
133
134	```javascript
135	// Example 1: E-commerce - Analyze product reviews
136	// Example 2: Support - Classify incoming tickets
137	// Example 3: Social - Detect spam comments
138	```
139
140	"Integration" Examples
141	- Shows product working with popular tools
142	- Addresses "will this work with my stack?" concern
143
144	```javascript
145	// Example: Integration with Express.js
146	app.post('/analyze', async (req, res) => {
147	const result = await api.analyze(req.body.text);
148	res.json(result);
149	});
150	```
151
152	### Example Quality Checklist
153
154	- [ ] Example runs without modification
155	- [ ] Output is interesting/impressive
156	- [ ] Code follows language best practices
157	- [ ] Comments explain what's happening
158	- [ ] Real-world use case is obvious
159	- [ ] L

People who liked this also viewed

6 picks

Type