From stackblitz-pack
Implements WebContainer API patterns for file system CRUD, process management, and jsh shell in browser IDEs using StackBlitz SDK.
How this skill is triggered — by the user, by Claude, or both
Slash command
/stackblitz-pack:stackblitz-sdk-patternsThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
Production patterns for the WebContainer API: singleton boot, file system CRUD, process spawning and management, jsh interactive shell, and the StackBlitz SDK for embedding projects.
Production patterns for the WebContainer API: singleton boot, file system CRUD, process spawning and management, jsh interactive shell, and the StackBlitz SDK for embedding projects.
import { WebContainer } from '@webcontainer/api';
let instance: WebContainer | null = null;
export async function getWebContainer(): Promise<WebContainer> {
if (!instance) {
instance = await WebContainer.boot();
}
return instance;
}
// Teardown
export async function teardownWebContainer() {
if (instance) {
instance.teardown();
instance = null;
}
}
const wc = await getWebContainer();
// Write file
await wc.fs.writeFile('/src/app.ts', 'export const hello = "world";');
// Read file
const content = await wc.fs.readFile('/src/app.ts', 'utf-8');
// Read directory
const entries = await wc.fs.readdir('/src', { withFileTypes: true });
entries.forEach(entry => {
console.log(`${entry.name} (${entry.isDirectory() ? 'dir' : 'file'})`);
});
// Create directory
await wc.fs.mkdir('/src/components', { recursive: true });
// Delete file
await wc.fs.rm('/src/old.ts');
// Delete directory
await wc.fs.rm('/dist', { recursive: true });
// Watch for changes
wc.fs.watch('/src', { recursive: true }, (event, filename) => {
console.log(`${event}: ${filename}`);
});
// Spawn a process
const proc = await wc.spawn('node', ['script.js']);
// Stream stdout
const reader = proc.output.getReader();
while (true) {
const { done, value } = await reader.read();
if (done) break;
console.log(value);
}
// Write to stdin
const writer = proc.input.getWriter();
await writer.write('user input\n');
await writer.close();
// Wait for exit
const exitCode = await proc.exit;
// Kill a process
proc.kill();
// jsh is WebContainer's built-in shell
const jshProcess = await wc.spawn('jsh', {
terminal: { cols: 80, rows: 24 },
});
// Connect to xterm.js
import { Terminal } from 'xterm';
const terminal = new Terminal();
terminal.open(document.getElementById('terminal')!);
jshProcess.output.pipeTo(new WritableStream({
write(data) { terminal.write(data); },
}));
terminal.onData((data) => {
const writer = jshProcess.input.getWriter();
writer.write(data);
writer.releaseLock();
});
import sdk from '@stackblitz/sdk';
// Embed an existing project
sdk.embedProjectId('container', 'vitejs-vite-template', {
height: 500,
openFile: 'src/App.tsx',
terminalHeight: 30,
});
// Embed from GitHub
sdk.embedGithubProject('container', 'user/repo', {
openFile: 'README.md',
});
// Create new project programmatically
sdk.embedProject('container', {
title: 'My Project',
template: 'node',
files: {
'index.js': 'console.log("Hello!")',
'package.json': '{"name":"demo","scripts":{"start":"node index.js"}}',
},
});
| Pattern | Use Case | Benefit |
|---|---|---|
| Singleton boot | Multiple components need WC | Only one instance allowed per page |
| Process kill on teardown | Page navigation | Prevents orphaned processes |
| fs.watch | Live preview | Auto-rebuild on file changes |
| jsh + xterm.js | Terminal emulator | Full shell experience in browser |
Apply patterns in stackblitz-core-workflow-a.
npx claudepluginhub jeremylongshore/claude-code-plugins-plus-skills --plugin stackblitz-packBuilds browser-based IDE with WebContainers: file tree, Monaco/CodeMirror editor, xterm.js terminal, and Vite preview iframe. Use for code playgrounds, educational tools, or embedded dev environments.
Scaffolds boilerplate for APIs (FastAPI, Express), web apps (Next.js, Nuxt, SvelteKit), CLI tools, libraries, monorepos with best-practice stacks and directory structures.
Creates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.