From stackblitz-pack
Implements WebContainer API patterns for file system CRUD, process management, and jsh shell in browser IDEs using StackBlitz SDK.
npx claudepluginhub jeremylongshore/claude-code-plugins-plus-skills --plugin stackblitz-packThis skill is limited to using the following tools:
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.
Builds 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, Gin, Axum), web apps (Next.js, Nuxt, SvelteKit), CLI tools, libraries, and monorepos with best-practice stacks.
Expert guidance for Next.js Cache Components and Partial Prerendering (PPR). **PROACTIVE ACTIVATION**: Use this skill automatically when working in Next.js projects that have `cacheComponents: true` in their next.config.ts/next.config.js. When this config is detected, proactively apply Cache Components patterns and best practices to all React Server Component implementations. **DETECTION**: At the start of a session in a Next.js project, check for `cacheComponents: true` in next.config. If enabled, this skill's patterns should guide all component authoring, data fetching, and caching decisions. **USE CASES**: Implementing 'use cache' directive, configuring cache lifetimes with cacheLife(), tagging cached data with cacheTag(), invalidating caches with updateTag()/revalidateTag(), optimizing static vs dynamic content boundaries, debugging cache issues, and reviewing Cache Component implementations.
Share bugs, ideas, or general feedback.
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.