ReddRadar
Agent skill
stackblitz-core-workflow-b
Embed StackBlitz projects and manage WebContainer snapshots for sharing. Use when embedding code playgrounds in docs, creating shareable examples, or building interactive tutorials with StackBlitz. Trigger: "embed stackblitz", "stackblitz embed", "stackblitz share project".
Install this agent skill to your Project
npx add-skill https://github.com/jeremylongshore/claude-code-plugins-plus-skills/tree/main/plugins/saas-packs/stackblitz-pack/skills/stackblitz-core-workflow-b
SKILL.md
StackBlitz Core Workflow B: Embedding & Sharing
Overview
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.
Instructions
Step 1: Embed from GitHub
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
});
Step 2: Embed Inline Project
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,
});
Step 3: Open in New Tab
// 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!")' },
});
Step 4: URL-Based Embedding
<!-- 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 Handling
| 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 |
Resources
Next Steps
For common errors, see stackblitz-common-errors.
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
jeremylongshore/claude-code-plugins-plus-skills
dockerfile-generator
Dockerfile Generator - Auto-activating skill for DevOps Basics. Triggers on: dockerfile generator, dockerfile generator Part of the DevOps Basics skill category.
jeremylongshore/claude-code-plugins-plus-skills
branch-naming-helper
Branch Naming Helper - Auto-activating skill for DevOps Basics. Triggers on: branch naming helper, branch naming helper Part of the DevOps Basics skill category.
jeremylongshore/claude-code-plugins-plus-skills
readme-generator
Readme Generator - Auto-activating skill for DevOps Basics. Triggers on: readme generator, readme generator Part of the DevOps Basics skill category.
jeremylongshore/claude-code-plugins-plus-skills
makefile-generator
Makefile Generator - Auto-activating skill for DevOps Basics. Triggers on: makefile generator, makefile generator Part of the DevOps Basics skill category.
jeremylongshore/claude-code-plugins-plus-skills
gitignore-generator
Gitignore Generator - Auto-activating skill for DevOps Basics. Triggers on: gitignore generator, gitignore generator Part of the DevOps Basics skill category.
jeremylongshore/claude-code-plugins-plus-skills
pre-commit-hook-setup
Pre Commit Hook Setup - Auto-activating skill for DevOps Basics. Triggers on: pre commit hook setup, pre commit hook setup Part of the DevOps Basics skill category.
Didn't find tool you were looking for?