Agent skill
stackblitz-local-dev-loop
Configure local development for WebContainer applications with hot reload and testing. Use when building browser-based IDEs, testing WebContainer file operations, or setting up development workflows for WebContainer projects. Trigger: "stackblitz dev setup", "webcontainer local", "test webcontainers locally".
Install this agent skill to your Project
npx add-skill https://github.com/jeremylongshore/claude-code-plugins-plus-skills/tree/main/plugins/saas-packs/stackblitz-pack/skills/stackblitz-local-dev-loop
SKILL.md
StackBlitz Local Dev Loop
Overview
Set up a Vite-based development environment for WebContainer applications with cross-origin headers, hot module replacement, and Vitest for testing file system operations.
Instructions
Step 1: Vite Project with WebContainers
npm create vite@latest wc-app -- --template vanilla-ts
cd wc-app
npm install @webcontainer/api
Step 2: Configure Vite Headers
// vite.config.ts
import { defineConfig } from 'vite';
export default defineConfig({
server: {
headers: {
'Cross-Origin-Embedder-Policy': 'require-corp',
'Cross-Origin-Opener-Policy': 'same-origin',
},
},
});
Step 3: Test WebContainer Operations
// tests/webcontainer.test.ts
import { describe, it, expect } from 'vitest';
// Note: WebContainer tests require a browser environment
// Use Playwright for full integration tests
describe('FileSystemTree Builder', () => {
it('creates valid tree from flat paths', () => {
const tree = buildFileTree({
'src/index.ts': 'console.log("hello")',
'package.json': '{"name":"test"}',
});
expect(tree['package.json']).toHaveProperty('file');
expect(tree.src).toHaveProperty('directory');
});
});
function buildFileTree(flatFiles: Record<string, string>) {
const tree: any = {};
for (const [path, contents] of Object.entries(flatFiles)) {
const parts = path.split('/');
let current = tree;
for (let i = 0; i < parts.length - 1; i++) {
if (!current[parts[i]]) current[parts[i]] = { directory: {} };
current = current[parts[i]].directory;
}
current[parts[parts.length - 1]] = { file: { contents } };
}
return tree;
}
Error Handling
| Error | Cause | Solution |
|---|---|---|
| COOP/COEP errors | Missing headers | Add to vite.config.ts |
SharedArrayBuffer undefined |
Not cross-origin isolated | Check response headers |
| Test failures | WebContainer needs browser | Use Playwright for integration |
Resources
Next Steps
Proceed to stackblitz-sdk-patterns for production patterns.
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
dockerfile-generator
Dockerfile Generator - Auto-activating skill for DevOps Basics. Triggers on: dockerfile generator, dockerfile generator Part of the DevOps Basics skill category.
branch-naming-helper
Branch Naming Helper - Auto-activating skill for DevOps Basics. Triggers on: branch naming helper, branch naming helper Part of the DevOps Basics skill category.
readme-generator
Readme Generator - Auto-activating skill for DevOps Basics. Triggers on: readme generator, readme generator Part of the DevOps Basics skill category.
makefile-generator
Makefile Generator - Auto-activating skill for DevOps Basics. Triggers on: makefile generator, makefile generator Part of the DevOps Basics skill category.
gitignore-generator
Gitignore Generator - Auto-activating skill for DevOps Basics. Triggers on: gitignore generator, gitignore generator Part of the DevOps Basics skill category.
pre-commit-hook-setup
Pre Commit Hook Setup - Auto-activating skill for DevOps Basics. Triggers on: pre commit hook setup, pre commit hook setup Part of the DevOps Basics skill category.
Didn't find tool you were looking for?