developer-sandbox – Coding skill for AI agents

Interactive Playgrounds and Demo Environments

Detailed Guide

Read [the detailed guide](references/detailed-guide.md) before executing this skill. It retains the complete procedure and reference material. Treat its safety, prerequisites, and validation requirements as mandatory. For focused work, load the relevant sections; for end-to-end work, read the guide completely.

When to Use

Use when designing a developer API playground, its sandbox architecture, sharing, gating or evaluation flow.

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.

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

// 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
• Creates the "wow, that was easy" reaction
• This is your most important example

// Example: Shows AI doing something impressive
const result = await api.summarize(longArticle);
// Illustrative output shape only; summarize may be inaccurate and needs evaluation.

"Real Use Case" Examples

• Actual scenarios developers encounter
• Shows how to solve specific problems
• Multiple examples for different use cases

// Example 1: E-commerce - Analyze product reviews
// Example 2: Support - Classify incoming tickets
// Example 3: Social - Detect spam comments

"Integration" Examples

• Shows product working with popular tools
• Addresses "will this work with my stack?" concern

// Example: Integration with Express.js
app.post('/analyze', async (req, res) => {
  const result = await api.analyze(req.body.text);
  res.json(result);
});

Example Quality Checklist

• [ ] Example actually runs in the stated pinned environment, or is clearly labeled pseudocode with missing adapters
• [ ] Output is interesting/impressive
• [ ] Code follows language best practices
• [ ] Comments explain what's happening
• [ ] Real-world use case is obvious
• [ ] Leads to natural "what else can it do?" curiosity

Limitations

• Use this skill only when the task clearly matches its upstream source and local project context.
• Verify commands, generated code, dependencies, credentials, and external service behavior before applying changes.
• Do not treat examples as a substitute for environment-specific tests, security review, or user approval for destructive or costly actions.

api, longArticle, Express setup and service adapters are not bundled. Never expose a privileged API key to editable code or auto-run billable/destructive examples on page load. Use explicit Run, synthetic data, short-lived scoped capabilities and server-enforced budgets.