Stackblitz core workflow b

Skill jeremylongshore/claude-code-plugins-plus-skills/plugins/saas-packs/stackblitz-pack/skills/stackblitz-core-workflow-b

425 plugins, 2,810 skills, 200 agents for Claude Code. Open-source marketplace at tonsofskills.com with the ccpi CLI package manager.

Install

npx -y skills add jeremylongshore/claude-code-plugins-plus-skills --skill stackblitz-core-workflow-b

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

What its author says it does

Copied from the file, not written here

'Embed StackBlitz projects and manage WebContainer snapshots for sharing.

The file declares its own license as MIT. That is the author’s claim about this one file, and it is not the same thing as the license GitHub reports for the repository, which is listed with the other numbers below.

SKILL.md

3.0 KB, 655 tokens by cl100k_base, as published. Nobody here has run it

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

StackBlitz SDK
Embed URL Parameters
WebContainer API

Next Steps

For common errors, see stackblitz-common-errors.