stackblitz-local-dev-loop
Configure local development for WebContainer applications with hot reload and testing. Use when building browser-based IDEs, testing WebContainer file operations, or setting up development workflows for WebContainer projects. '
Profile →npx skills add jeremylongshore/claude-code-plugins-plus-skills --skill stackblitz-local-dev-loop --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 Local Dev Loop ## Overview Set up a Vite-based development environment for WebContainer applications with cross-origin headers, hot module replacement, and Vitest for testing file system operations. ## Instructions ### Step 1: Vite Project with WebContainers ```bash npm create vite@latest wc-app -- --template vanilla-ts cd wc-app npm install @webcontainer/api ``` ### Step 2: Configure Vite Headers ```typescript // vite.config.ts import { defineConfig } from 'vite'; export default defineConfig({ server: { headers: { 'Cross-Origin-Embedder-Policy': 'require-corp', 'Cross-Origin-Opener-Policy': 'same-origin', }, }, }); ``` ### Step 3: Test WebContainer Operations ```typescript // tests/webcontainer.test.ts import { describe, it, expect } from 'vitest'; // Note: WebContainer tests require a browser environment // Use Playwright for full integration tests describe('FileSystemTree Builder', () => { it('creates valid tree from flat paths', () => { const tree = buildFileTree({ 'src/index.ts': 'console.log("hello")', 'package.json': '{"name":"test"}', }); expect(tree['package.json']).toHaveProperty('file'); expect(tree.src).toHaveProperty('directory'); }); }); function buildFil
- Overview
- Instructions
- Step 1: Vite Project with WebContainers
- Step 2: Configure Vite Headers
- Step 3: Test WebContainer Operations
- Error Handling
- Resources
- Next Steps
npm create vite@latest wc-app -- --template vanilla-ts cd wc-app npm install @webcontainer/api
What does the stackblitz-local-dev-loop skill do?
Configure local development for WebContainer applications with hot reload and testing. Use when building browser-based IDEs, testing WebContainer file operations, or setting up development workflows for WebContainer projects. '
How do I install it?
Run `npx skills add jeremylongshore/claude-code-plugins-plus-skills --skill stackblitz-local-dev-loop --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.