stackblitz-install-auth
Install the WebContainer API and configure StackBlitz SDK for browser-based Node.js. Use when setting up WebContainers, embedding StackBlitz projects, or initializing the @stackblitz/sdk package. Trigger: "install stackblitz", "setup webcontainers", "stackblitz SDK".
Best use case
stackblitz-install-auth is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Install the WebContainer API and configure StackBlitz SDK for browser-based Node.js. Use when setting up WebContainers, embedding StackBlitz projects, or initializing the @stackblitz/sdk package. Trigger: "install stackblitz", "setup webcontainers", "stackblitz SDK".
Teams using stackblitz-install-auth should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/stackblitz-install-auth/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How stackblitz-install-auth Compares
| Feature / Agent | stackblitz-install-auth | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Install the WebContainer API and configure StackBlitz SDK for browser-based Node.js. Use when setting up WebContainers, embedding StackBlitz projects, or initializing the @stackblitz/sdk package. Trigger: "install stackblitz", "setup webcontainers", "stackblitz SDK".
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
Related Guides
Best AI Skills for Claude
Explore the best AI skills for Claude and Claude Code across coding, research, workflow automation, documentation, and agent operations.
ChatGPT vs Claude for Agent Skills
Compare ChatGPT and Claude for AI agent skills across coding, writing, research, and reusable workflow execution.
SKILL.md Source
# StackBlitz Install & Auth
## Overview
Set up the WebContainer API for running Node.js in the browser, or the StackBlitz SDK for embedding interactive code editors. WebContainers require no auth -- they run entirely client-side. The StackBlitz SDK is for embedding projects from stackblitz.com.
## Prerequisites
- Node.js 18+ for build tooling
- Modern browser with SharedArrayBuffer support (requires HTTPS + COOP/COEP headers)
## Instructions
### Step 1: Install WebContainer API
```bash
npm install @webcontainer/api
```
### Step 2: Install StackBlitz SDK (for embedding)
```bash
npm install @stackblitz/sdk
```
### Step 3: Configure Required HTTP Headers
WebContainers require cross-origin isolation. Add these headers to your server:
```typescript
// Express middleware
app.use((req, res, next) => {
res.setHeader('Cross-Origin-Embedder-Policy', 'require-corp');
res.setHeader('Cross-Origin-Opener-Policy', 'same-origin');
next();
});
```
```javascript
// Vite config
export default defineConfig({
server: {
headers: {
'Cross-Origin-Embedder-Policy': 'require-corp',
'Cross-Origin-Opener-Policy': 'same-origin',
},
},
});
```
### Step 4: Verify WebContainer Boot
```typescript
import { WebContainer } from '@webcontainer/api';
const wc = await WebContainer.boot();
console.log('WebContainer booted successfully');
// Verify filesystem works
await wc.mount({ 'test.txt': { file: { contents: 'Hello WebContainers!' } } });
const content = await wc.fs.readFile('/test.txt', 'utf-8');
console.log(`File content: ${content}`);
```
## Output
```
WebContainer booted successfully
File content: Hello WebContainers!
```
## Error Handling
| Error | Cause | Solution |
|-------|-------|----------|
| `SharedArrayBuffer is not defined` | Missing COOP/COEP headers | Add cross-origin isolation headers |
| `Failed to boot` | Multiple instances | Only one WebContainer per page |
| `Not in secure context` | HTTP instead of HTTPS | Use HTTPS or localhost |
## Resources
- [WebContainer API Docs](https://webcontainers.io/)
- [WebContainer Quickstart](https://webcontainers.io/guides/quickstart)
- [StackBlitz SDK](https://developer.stackblitz.com/platform/api/javascript-sdk)
## Next Steps
Proceed to `stackblitz-hello-world` for your first WebContainer project.Related Skills
validating-authentication-implementations
Validate authentication mechanisms for security weaknesses and compliance. Use when reviewing login systems or auth flows. Trigger with 'validate authentication', 'check auth security', or 'review login'.
workhuman-install-auth
Workhuman install auth for employee recognition and rewards API. Use when integrating Workhuman Social Recognition, or building recognition workflows with HRIS systems. Trigger: "workhuman install auth".
wispr-install-auth
Wispr Flow install auth for voice-to-text API integration. Use when integrating Wispr Flow dictation, WebSocket streaming, or building voice-powered applications. Trigger: "wispr install auth".
windsurf-install-auth
Install Windsurf IDE and configure Codeium authentication. Use when setting up Windsurf for the first time, logging in to Codeium, or configuring API keys for team/enterprise deployments. Trigger with phrases like "install windsurf", "setup windsurf", "windsurf auth", "codeium login", "windsurf API key".
webflow-install-auth
Install the Webflow JS SDK (webflow-api) and configure OAuth 2.0 or API token authentication. Use when setting up a new Webflow integration, configuring access tokens, or initializing the WebflowClient in your project. Trigger with phrases like "install webflow", "setup webflow", "webflow auth", "configure webflow API token", "webflow OAuth".
vercel-install-auth
Install Vercel CLI and configure API token authentication. Use when setting up Vercel for the first time, creating access tokens, or initializing a project with vercel link. Trigger with phrases like "install vercel", "setup vercel", "vercel auth", "configure vercel token", "vercel login".
veeva-install-auth
Veeva Vault install auth with REST API and VQL. Use when integrating with Veeva Vault for life sciences document management. Trigger: "veeva install auth".
vastai-install-auth
Install and configure Vast.ai CLI and REST API authentication. Use when setting up a new Vast.ai integration, configuring API keys, or initializing Vast.ai GPU cloud access in your project. Trigger with phrases like "install vastai", "setup vastai", "vastai auth", "configure vastai API key", "vastai gpu setup".
twinmind-install-auth
Install and configure TwinMind Chrome extension, mobile app, and API access. Use when setting up TwinMind for meeting transcription, configuring calendar integration, or initializing TwinMind in your workflow. Trigger with phrases like "install twinmind", "setup twinmind", "twinmind auth", "configure twinmind", "twinmind chrome extension".
together-install-auth
Install Together AI SDK and configure API key for inference and fine-tuning. Use when setting up Together AI, configuring the OpenAI-compatible API, or initializing the together Python package. Trigger: "install together, setup together ai, together API key".
techsmith-install-auth
Install TechSmith Snagit COM API and register the COM server for automation. Use when setting up Snagit automation, configuring COM interop, or initializing Camtasia batch processing. Trigger: "install techsmith, setup snagit, techsmith COM API".
supabase-install-auth
Install and configure Supabase SDK, CLI, and project authentication. Use when setting up a new Supabase project, installing @supabase/supabase-js, configuring environment variables, or initializing the Supabase client. Trigger with "install supabase", "setup supabase", "supabase auth config", "configure supabase", "supabase init", "add supabase to project".