From stackblitz-pack
Embeds StackBlitz projects from GitHub repos, inline code, or URLs into docs/tutorials using SDK or iframes. Shares via WebContainer snapshots.
How this skill is triggered — by the user, by Claude, or both
Slash command
/stackblitz-pack:stackblitz-core-workflow-bThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
Embed interactive StackBlitz projects in documentation, blog posts, and tutorials using the StackBlitz SDK. Supports embedding from GitHub repos, existing StackBlitz projects, or inline code.
Embed interactive StackBlitz projects in documentation, blog posts, and tutorials using the StackBlitz SDK. Supports embedding from GitHub repos, existing StackBlitz projects, or inline code.
import sdk from '@stackblitz/sdk';
// Embed a GitHub repo as an interactive editor
sdk.embedGithubProject('embed-container', 'vitejs/vite/packages/create-vite/template-react-ts', {
openFile: 'src/App.tsx',
height: 500,
theme: 'dark',
clickToLoad: true, // Don't load until user clicks
});
sdk.embedProject('embed-container', {
title: 'React Counter Demo',
template: 'node',
files: {
'src/App.tsx': `
import { useState } from 'react';
export default function App() {
const [count, setCount] = useState(0);
return <button onClick={() => setCount(c => c + 1)}>Count: {count}</button>;
}`,
'package.json': JSON.stringify({
dependencies: { react: '^18', 'react-dom': '^18' },
}),
},
}, {
openFile: 'src/App.tsx',
terminalHeight: 25,
});
// Open project in full StackBlitz editor
sdk.openGithubProject('user/repo', { openFile: 'README.md' });
// Open inline project
sdk.openProject({
title: 'Quick Demo',
template: 'node',
files: { 'index.js': 'console.log("Hello!")' },
});
<!-- iframe embed (no SDK needed) -->
<iframe
src="https://stackblitz.com/edit/vitejs-vite?embed=1&file=src/main.ts&theme=dark"
style="width:100%;height:500px;border:0;border-radius:4px;overflow:hidden;"
></iframe>
<!-- GitHub repo embed -->
<iframe
src="https://stackblitz.com/github/user/repo?embed=1&file=README.md"
style="width:100%;height:500px;border:0;"
></iframe>
| Error | Cause | Solution |
|---|---|---|
| Embed shows loading forever | Missing template files | Ensure package.json is included |
clickToLoad not working | SDK version mismatch | Update @stackblitz/sdk |
| GitHub embed 404 | Wrong repo path | Use owner/repo/path/to/subdir format |
For common errors, see stackblitz-common-errors.
npx claudepluginhub jeremylongshore/claude-code-plugins-plus-skills --plugin stackblitz-packImplements WebContainer API patterns for file system CRUD, process management, and jsh shell in browser IDEs using StackBlitz SDK.
Scaffolds full projects from PRD + stack templates: directory structure, configs, CLAUDE.md, git repo init, GitHub push. Studies existing projects via SoloGraph, uses Context7 for library versions.
Creates self-contained interactive HTML playgrounds with controls, live previews, and copyable prompts for visual exploration of design, data, code, and documents.