From stackblitz-pack
Fixes StackBlitz/WebContainer errors: COOP/COEP headers, SharedArrayBuffer, boot failures, npm hangs, ENOENT. Includes diagnostics and TypeScript patterns for retries/singletons.
npx claudepluginhub jeremylongshore/claude-code-plugins-plus-skills --plugin stackblitz-packThis skill is limited to using the following tools:
**Cause:** Missing cross-origin isolation headers.
Installs WebContainer API and StackBlitz SDK for browser-based Node.js and project embedding. Configures COOP/COEP headers for Vite/Express servers.
Diagnoses and fixes common Replit errors: container sleep, port binding, Nix failures, DB limits. For debugging workspaces, deployments, and hosting issues.
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.
Cause: Missing cross-origin isolation headers.
Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Opener-Policy: same-origin
Fix: Add both headers to your server. In Vite: server.headers config.
Cause: Only one WebContainer instance allowed per page.
// BAD: Multiple boot calls
const wc1 = await WebContainer.boot();
const wc2 = await WebContainer.boot(); // Fails!
// GOOD: Singleton pattern
let instance: WebContainer | null = null;
async function getWC() {
if (!instance) instance = await WebContainer.boot();
return instance;
}
Cause: Large dependency tree or network issue in WebContainer.
// Use --prefer-offline and minimal deps
const proc = await wc.spawn('npm', ['install', '--prefer-offline']);
const code = await proc.exit;
if (code !== 0) {
console.error('Install failed, retrying...');
const retry = await wc.spawn('npm', ['install']);
await retry.exit;
}
Cause: Application not listening on a port.
// Ensure your app calls listen()
// app.listen(3000) -- required for server-ready event
// Also check process exit code for crashes
wc.on('error', (err) => console.error('WC error:', err));
Cause: Parent directory doesn't exist.
// Create parent directories first
await wc.fs.mkdir('/src/components', { recursive: true });
await wc.fs.writeFile('/src/components/Button.tsx', content);
// Check WebContainer state
async function diagnose(wc: WebContainer) {
try {
await wc.fs.readdir('/');
console.log('FS: OK');
} catch { console.error('FS: FAILED'); }
try {
const proc = await wc.spawn('node', ['-v']);
await proc.exit;
console.log('Node: OK');
} catch { console.error('Node: FAILED'); }
}
| Error | Retryable | Action |
|---|---|---|
| Missing COOP/COEP | No | Fix server headers |
| Multiple boot | No | Use singleton pattern |
| npm install fail | Yes | Retry once, then report |
| ENOENT | No | Create parent dirs |
| Process crash | Yes | Restart process |
For debugging, see stackblitz-debug-bundle.