From stackblitz-pack
Boots WebContainer to mount files, install npm packages, and run Node.js dev servers in-browser. For WebContainers demos, browser IDEs, or serverless Node execution.
npx claudepluginhub jeremylongshore/claude-code-plugins-plus-skills --plugin stackblitz-packThis skill is limited to using the following tools:
Boot a WebContainer, mount a file system tree, install dependencies with npm, and start a dev server -- all running inside the browser tab. No backend server needed.
Installs WebContainer API and StackBlitz SDK for browser-based Node.js and project embedding. Configures COOP/COEP headers for Vite/Express servers.
Sets up VS Code .devcontainer with Docker, configurable Node/Bun base images, package managers (bun/npm/pnpm/yarn), ports, mounts, and Claude Code CLI support. Use for devcontainer setup requests.
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.
Boot a WebContainer, mount a file system tree, install dependencies with npm, and start a dev server -- all running inside the browser tab. No backend server needed.
@webcontainer/api installed (see stackblitz-install-auth)import { WebContainer, FileSystemTree } from '@webcontainer/api';
const files: FileSystemTree = {
'package.json': {
file: {
contents: JSON.stringify({
name: 'wc-hello',
scripts: { start: 'node index.js', dev: 'nodemon index.js' },
dependencies: { express: '^4.18.0' },
}),
},
},
'index.js': {
file: {
contents: `
const express = require('express');
const app = express();
app.get('/', (req, res) => res.send('Hello from WebContainer!'));
app.listen(3000, () => console.log('Server running on port 3000'));
`.trim(),
},
},
src: {
directory: {
'utils.js': { file: { contents: 'module.exports = { greet: (n) => "Hello " + n };' } },
},
},
};
const wc = await WebContainer.boot();
await wc.mount(files);
console.log('Files mounted. Installing dependencies...');
const installProcess = await wc.spawn('npm', ['install']);
// Stream install output
installProcess.output.pipeTo(new WritableStream({
write(data) { console.log(data); },
}));
const installCode = await installProcess.exit;
if (installCode !== 0) throw new Error(`npm install failed: exit ${installCode}`);
console.log('Dependencies installed.');
const serverProcess = await wc.spawn('npm', ['start']);
serverProcess.output.pipeTo(new WritableStream({
write(data) { console.log(data); },
}));
// Listen for server-ready event
wc.on('server-ready', (port, url) => {
console.log(`Server ready at ${url} (port ${port})`);
// Display in iframe
document.querySelector('iframe')!.src = url;
});
added 57 packages in 3s
Dependencies installed.
Server running on port 3000
Server ready at https://xxx.webcontainer.io (port 3000)
| Error | Cause | Solution |
|---|---|---|
npm install hangs | Large dependency tree | Use --prefer-offline or fewer deps |
server-ready never fires | App not listening on a port | Ensure app.listen() is called |
| Port conflict | Another process on same port | Use a different port |
ENOENT for file | File not in mount tree | Verify FileSystemTree structure |
Proceed to stackblitz-local-dev-loop for development workflow setup.