stackblitz-core-workflow-a
Build a browser-based code editor with WebContainers: file tree, editor, terminal, and preview. Use when creating interactive coding environments, building educational tools, or embedding development environments in web apps. '
Profile →npx skills add jeremylongshore/claude-code-plugins-plus-skills --skill stackblitz-core-workflow-a --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# StackBlitz Core Workflow A: Browser IDE ## Overview Build a complete browser-based IDE using WebContainers: file explorer, code editor (Monaco/CodeMirror), integrated terminal (xterm.js + jsh), and live preview iframe. This is the architecture behind bolt.new. ## Instructions ### Step 1: HTML Layout ```html <div id="app"> <div id="file-tree"></div> <div id="editor"></div> <div id="terminal"></div> <iframe id="preview"></iframe> </div> ``` ### Step 2: Boot and Mount Project ```typescript import { WebContainer, FileSystemTree } from '@webcontainer/api'; const files: FileSystemTree = { 'package.json': { file: { contents: JSON.stringify({ name: 'playground', type: 'module', scripts: { dev: 'vite' }, dependencies: { vite: '^5.0.0' }, }) }, }, 'index.html': { file: { contents: '<!DOCTYPE html><html><body><div id="app"></div><script type="module" src="/src/main.js"></script></body></html>' }, }, src: { directory: { 'main.js': { file: { contents: 'document.getElementById("app").innerHTML = "<h1>Hello!</h1>";' } }, }}, }; const wc = await WebContainer.boot(); await wc.mount(files); ``` ### Step 3: File Tree with Live Updates ```typescript async function renderFileTree(path = '/') { const
- Overview
- Instructions
- Step 1: HTML Layout
- Step 2: Boot and Mount Project
- Step 3: File Tree with Live Updates
- Step 4: Save Editor Changes to WebContainer
- Step 5: Terminal + Preview
- Error Handling
- Resources
- Next Steps
What does the stackblitz-core-workflow-a skill do?
Build a browser-based code editor with WebContainers: file tree, editor, terminal, and preview. Use when creating interactive coding environments, building educational tools, or embedding development environments in web apps. '
How do I install it?
Run `npx skills add jeremylongshore/claude-code-plugins-plus-skills --skill stackblitz-core-workflow-a --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From jeremylongshore/claude-code-plugins-plus-skills, a repository with 2,630 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.