[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6HQWM90BMDR4NJ89QNP468F":3,"skill-same:01M6HQWM90BMDR4NJ89QNP468F":71},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":22,"publishedAt":45,"linkOnly":46,"markdownContent":47,"markdownBody":48,"frontMatter":49,"refName":50,"commitSha":51,"skillDirectory":52,"forksCount":53,"repositoryHtmlUrl":54,"repositoryHomepageUrl":6,"ownerHtmlUrl":55,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":56,"install":57,"resources":70},"01M6HQWM90BMDR4NJ89QNP468F","Environment Setup",null,"Automatically detects and configures the Remotion video generation environment. Use when user requests video creation and dependencies (Node.js, FFmpeg, Remotion packages) need verification or installation. Checks system requirements, installs missing tools, initializes Remotion project structure, and validates the setup is ready for video generation.","welflau\u002Fai-dev-system","welflau","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F7010385?v=4","01M6HPTDGF18RFY07M229P8CTM","01M6HPTDMRMZCJPYBFEA9XVVYT",3,"MIT","https:\u002F\u002Fgithub.com\u002Fwelflau\u002Fai-dev-system\u002Fblob\u002Fmain\u002Fbackend\u002Fskills\u002Fmarketplace\u002Fcb_teams_marketplace\u002Fplugins\u002Fremotion-video-generator\u002Fskills\u002Fenvironment-setup\u002FSKILL.md",[17],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000016","图像与多媒体","SCENARIO","使用场景",[23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44],"setup","environment setup","environment","when","project structure","remotion video","for","missing","creation","requirements","project","structure","ready","use","node","video generation","system","Remotion","Video","Tools","verification","packages","2026-11-10 10:12:30",false,"---\nname: Environment Setup\ndescription: Automatically detects and configures the Remotion video generation environment. Use when user requests video creation and dependencies (Node.js, FFmpeg, Remotion packages) need verification or installation. Checks system requirements, installs missing tools, initializes Remotion project structure, and validates the setup is ready for video generation.\n---\n\n# Remotion Environment Setup\n\nYou are responsible for ensuring the user's system has all required dependencies to generate videos with Remotion. This skill automatically detects, installs, and validates the complete environment.\n\n## When This Skill Activates\n\nThis skill should activate automatically when:\n- The video-generator skill detects a video creation request\n- The user explicitly mentions environment setup or dependencies\n- Any Remotion command fails due to missing dependencies\n\n## System Requirements\n\n### Required Software\n\n1. **Node.js** (v16 or higher)\n   - Check: `node --version`\n   - Required for running Remotion and React\n\n2. **FFmpeg** (any recent version)\n   - Check: `ffmpeg -version`\n   - Required for video encoding and frame stitching\n\n3. **npm** or **yarn** or **pnpm**\n   - Comes with Node.js installation\n   - Package manager for installing dependencies\n\n4. **Chromium\u002FChrome**\n   - Remotion downloads its own bundled Chromium\n   - No manual installation needed\n   - Used for rendering React components to frames\n\n### Recommended (Optional)\n\n- **Git**: For version control of video projects\n- **Visual Studio Code**: For editing Remotion code\n- **2-4GB free RAM**: For rendering process\n- **500MB free disk space**: For project and output files\n\n## Environment Detection Process\n\n### Step 1: Check Node.js\n\nRun this command:\n```bash\nnode --version\n```\n\n**Expected output**: v16.x.x or higher (e.g., `v18.17.0`, `v20.5.1`)\n\n**If missing**:\n- Detect platform (macOS, Linux, Windows)\n- Provide platform-specific installation instructions\n- Do NOT attempt auto-install (Node.js requires user consent)\n\n**Installation Instructions by Platform**:\n\n**macOS**:\n```bash\n# Using Homebrew (recommended)\nbrew install node\n\n# Or download from nodejs.org\n```\n\n**Linux (Ubuntu\u002FDebian)**:\n```bash\ncurl -fsSL https:\u002F\u002Fdeb.nodesource.com\u002Fsetup_18.x | sudo -E bash -\nsudo apt-get install -y nodejs\n```\n\n**Windows**:\nDownload installer from https:\u002F\u002Fnodejs.org\u002F and run it.\n\n---\n\n### Step 2: Check FFmpeg\n\nRun this command:\n```bash\nffmpeg -version\n```\n\n**Expected output**: FFmpeg version information (any recent version is fine)\n\n**If missing**:\n\n**macOS**:\n```bash\nbrew install ffmpeg\n```\n\n**Linux (Ubuntu\u002FDebian)**:\n```bash\nsudo apt-get update\nsudo apt-get install ffmpeg\n```\n\n**Windows**:\n1. Download from https:\u002F\u002Fffmpeg.org\u002Fdownload.html\n2. Extract to C:\\ffmpeg\n3. Add to PATH environment variable\n\n**Automatic Installation Decision**:\n- On macOS\u002FLinux: Ask user permission, then run install command\n- On Windows: Provide manual instructions (auto-install not reliable)\n\n---\n\n### Step 3: Verify Package Manager\n\nRun this command:\n```bash\nnpm --version\n```\n\n**Expected output**: Version number (e.g., `9.8.1`)\n\n**If npm is missing**: This indicates Node.js wasn't installed correctly. Return to Step 1.\n\n**Alternative package managers**:\n- yarn: `yarn --version`\n- pnpm: `pnpm --version`\n\nUse whichever is available (prefer npm as default).\n\n---\n\n## Project Initialization\n\n### Step 4: Determine Project Directory\n\nThe Remotion project directory (referred to as `PROJECT_DIR` below) is selected using the following priority:\n\n1. **User-specified path**: If the user explicitly provides a path, use that\n2. **Environment variable**: If `REMOTION_PROJECT_DIR` is set, use its value\n3. **Current working directory** (recommended): `.\u002Fremotion-videos\u002F` — keeps the project co-located with the user's workspace\n4. **Home directory fallback**: `~\u002Fremotion-videos\u002F` — only if the current directory is not writable or not suitable\n\n**Determine and create the directory**:\n```bash\n# Use environment variable if set, otherwise default to .\u002Fremotion-videos\nPROJECT_DIR=\"${REMOTION_PROJECT_DIR:-.\u002Fremotion-videos}\"\nmkdir -p \"$PROJECT_DIR\"\ncd \"$PROJECT_DIR\"\n```\n\n**Why this strategy**:\n- Works in sandboxed environments where `~` may not be predictable\n- Keeps video projects close to the user's working context\n- Can be overridden externally via environment variable\n- Falls back gracefully to home directory if needed\n\n**If directory already exists**: Use existing directory (don't overwrite).\n\n---\n\n### Step 5: Initialize npm Project\n\n**If package.json doesn't exist**:\n```bash\nnpm init -y\n```\n\nThis creates a basic `package.json` file.\n\n**If package.json exists**: Check if Remotion dependencies are installed (next step).\n\n---\n\n### Step 6: Install Remotion Dependencies\n\nInstall the core Remotion packages:\n\n```bash\ncd \"$PROJECT_DIR\"\nnpm install remotion@^4.0.0 @remotion\u002Fcli@^4.0.0 react@^19.0.0 react-dom@^19.0.0\n```\n\n**Additional useful packages** (install if time permits):\n```bash\nnpm install @remotion\u002Ftailwind@^4.0.0 @remotion\u002Ftransitions@^4.0.0 @remotion\u002Fgoogle-fonts@^4.0.0\n```\n\n**Why these packages**:\n- `remotion`: Core framework\n- `@remotion\u002Fcli`: Command-line tools for rendering\n- `react` + `react-dom`: Required peer dependencies\n- `@remotion\u002Ftailwind`: For Tailwind CSS styling (optional)\n- `@remotion\u002Ftransitions`: Pre-built transition effects (optional)\n- `@remotion\u002Fgoogle-fonts`: Easy font loading (optional)\n\n**Installation timing**:\n- This may take 1-2 minutes\n- Show progress indicator to user\n- If installation fails, check error messages and retry\n\n**Common installation errors**:\n- Network timeout: Retry with longer timeout\n- Permission errors: User may need sudo (Linux\u002FmacOS)\n- Disk space: Check available space\n\n---\n\n### Step 7: Create Project Structure\n\nCreate the standard Remotion project structure:\n\n```bash\ncd \"$PROJECT_DIR\"\nmkdir -p src\u002Fcompositions public\u002Fassets output\n```\n\n**Directory purposes**:\n- `src\u002F`: React components and video compositions\n- `src\u002Fcompositions\u002F`: Individual video project folders\n- `public\u002F`: Static assets (images, fonts, audio)\n- `public\u002Fassets\u002F`: User-provided assets\n- `output\u002F`: Rendered MP4 files\n\n---\n\n### Step 8: Create Configuration Files\n\n**Create `remotion.config.ts`**:\n```typescript\nimport { Config } from \"@remotion\u002Fcli\u002Fconfig\";\n\nConfig.setVideoImageFormat(\"jpeg\");\nConfig.setOverwriteOutput(true);\n```\n\n**Why these settings**:\n- `jpeg`: Faster rendering than png\n- `overwriteOutput`: Automatically replace existing output files\n\n**Create `src\u002Findex.ts` (entry point)**:\n```typescript\nimport { registerRoot } from \"remotion\";\nimport { RemotionRoot } from \".\u002FRoot\";\n\nregisterRoot(RemotionRoot);\n```\n\n**Create basic `src\u002FRoot.tsx`**:\n```typescript\nimport React from \"react\";\n\nexport const RemotionRoot: React.FC = () => {\n  return (\n    \u003C>\n      {\u002F* Video compositions will be added here *\u002F}\n    \u003C\u002F>\n  );\n};\n```\n\n**Create `package.json` scripts** (if not present):\n```json\n{\n  \"scripts\": {\n    \"dev\": \"remotion studio\",\n    \"build\": \"remotion bundle\",\n    \"render\": \"remotion render\"\n  }\n}\n```\n\n---\n\n### Step 9: Validate Installation\n\nRun validation checks:\n\n**Check 1: Remotion CLI**\n```bash\nnpx remotion --version\n```\nExpected: Version number (e.g., `4.0.409`)\n\n**Check 2: Project structure**\n```bash\nls -la \"$PROJECT_DIR\"\n```\nExpected: `src\u002F`, `public\u002F`, `node_modules\u002F`, `package.json` directories exist\n\n**Check 3: TypeScript**\n```bash\nnpx tsc --version\n```\nExpected: Version number (TypeScript is a Remotion dependency)\n\n**If all checks pass**: Environment is ready! ✓\n\n---\n\n## Error Handling\n\n### Common Issues and Solutions\n\n**Issue: \"command not found: node\"**\n- **Cause**: Node.js not installed or not in PATH\n- **Solution**: Install Node.js or add to PATH\n\n**Issue: \"command not found: ffmpeg\"**\n- **Cause**: FFmpeg not installed or not in PATH\n- **Solution**: Install FFmpeg or add to PATH\n\n**Issue: \"npm ERR! EACCES: permission denied\"**\n- **Cause**: Insufficient permissions\n- **Solution**: Use `sudo npm install` (Linux\u002FmacOS) or run as administrator (Windows)\n\n**Issue: \"npm ERR! network timeout\"**\n- **Cause**: Network issues or slow connection\n- **Solution**: Retry with `npm install --timeout=60000`\n\n**Issue: \"npm ERR! ENOSPC: no space left on device\"**\n- **Cause**: Insufficient disk space\n- **Solution**: Free up disk space (need at least 500MB)\n\n**Issue: Module not found errors**\n- **Cause**: Dependencies not fully installed\n- **Solution**: Delete `node_modules\u002F` and re-run `npm install`\n\n---\n\n## Output to User\n\n### Success Message\n\nWhen environment is ready, inform user:\n\n```\n✓ Environment setup complete!\n\n✓ Node.js: v18.17.0\n✓ FFmpeg: version 6.0\n✓ Remotion: 4.0.409\n✓ Project directory: $PROJECT_DIR\n\nYou're ready to create videos! The video-generator skill will now proceed.\n```\n\n### Partial Success Message\n\nIf some optional components are missing:\n\n```\n✓ Core environment ready!\n\n✓ Node.js: v18.17.0\n✓ FFmpeg: version 6.0\n✓ Remotion: 4.0.409\n\n⚠ Optional: Consider installing Git for version control\n\nProject directory: $PROJECT_DIR\n```\n\n### Failure Message\n\nIf critical components are missing and cannot be auto-installed:\n\n```\n❌ Environment setup incomplete\n\nMissing requirements:\n❌ Node.js: Not installed\n   Install from: https:\u002F\u002Fnodejs.org\u002F\n\nCurrent status:\n✓ FFmpeg: version 6.0\n\nPlease install the missing requirements and try again.\n```\n\n---\n\n## Platform-Specific Considerations\n\n### macOS\n\n**Homebrew availability**: Check if Homebrew is installed\n```bash\nwhich brew\n```\n\nIf Homebrew exists, use it for FFmpeg installation:\n```bash\nbrew install ffmpeg\n```\n\nIf Homebrew doesn't exist:\n- Suggest installing Homebrew first: `\u002Fbin\u002Fbash -c \"$(curl -fsSL https:\u002F\u002Fraw.githubusercontent.com\u002FHomebrew\u002Finstall\u002FHEAD\u002Finstall.sh)\"`\n- Or provide direct FFmpeg download link\n\n### Linux\n\n**Distribution detection**:\n- Ubuntu\u002FDebian: Use `apt-get`\n- Fedora\u002FRedHat: Use `yum` or `dnf`\n- Arch: Use `pacman`\n\n**Sudo requirement**: Most installations require `sudo`\n- Ask user permission before running sudo commands\n- Explain what the command does\n\n### Windows\n\n**Installation challenges**:\n- FFmpeg requires manual PATH setup\n- npm may require administrator rights\n\n**Provide clear instructions**:\n1. Download FFmpeg from official site\n2. Extract to C:\\ffmpeg\n3. Add C:\\ffmpeg\\bin to PATH\n4. Restart terminal\n\n**Alternative**: Suggest using WSL2 (Windows Subsystem for Linux) for easier setup\n\n---\n\n## Verification Checklist\n\nBefore proceeding to video generation, confirm:\n\n- [ ] Node.js v16+ is installed and accessible\n- [ ] FFmpeg is installed and in PATH\n- [ ] npm\u002Fyarn\u002Fpnpm is available\n- [ ] Remotion packages are installed in `$PROJECT_DIR`\n- [ ] Project structure exists (`src\u002F`, `public\u002F`, `output\u002F`)\n- [ ] Configuration files are created\n- [ ] `remotion studio` command works (optional: test by running it)\n\n---\n\n## Integration with Other Skills\n\n### Called by video-generator\n\nThe video-generator skill invokes this skill first to ensure environment is ready before generating videos.\n\n### Output to video-generator\n\nReturn status:\n- **Ready**: All requirements met, proceed with video generation\n- **Pending**: User needs to install something manually, wait for confirmation\n- **Failed**: Critical requirements missing, cannot proceed\n\n---\n\n## Best Practices\n\n### User Communication\n\n**Be transparent**: Explain what you're installing and why\n**Ask permission**: Don't run installation commands without user consent\n**Provide alternatives**: If auto-install fails, give manual instructions\n**Show progress**: Indicate when installations are running (may take time)\n\n### Error Recovery\n\n**Graceful degradation**: If optional packages fail, continue with core setup\n**Clear diagnostics**: Explain error causes in simple terms\n**Actionable solutions**: Provide exact commands to fix issues\n**Support links**: Include official documentation URLs\n\n### Performance\n\n**Parallel checks**: Run Node.js and FFmpeg checks simultaneously\n**Cached validation**: If environment was validated recently, skip re-check\n**Minimal installs**: Only install what's needed, offer optional packages separately\n\n---\n\n## Example Workflow\n\n**User request**: \"Create a video showing our product features\"\n\n**Environment setup flow**:\n\n1. Detect video creation request\n2. Check if environment exists\n   - If yes: Quick validation, then proceed\n   - If no: Full setup process\n3. Check Node.js → ✓ Found v18.17.0\n4. Check FFmpeg → ✗ Not found\n5. Ask user: \"FFmpeg is required for video rendering. Install it now? (will run: brew install ffmpeg)\"\n6. User confirms → Run installation\n7. FFmpeg installed → ✓\n8. Check Remotion project → Not found\n9. Create project directory at `$PROJECT_DIR`\n10. Run `npm install remotion @remotion\u002Fcli react react-dom`\n11. Create project structure\n12. Validate installation → ✓ All checks pass\n13. Report success → Hand off to video-generator skill\n\n**Total time**: 2-3 minutes (mostly npm installation)\n\n---\n\n## Security Considerations\n\n**Don't run arbitrary code**: Only execute well-known package installations\n**Verify package sources**: Install from official npm registry\n**User consent**: Always ask before running sudo or admin commands\n**No credential storage**: Don't save API keys or passwords\n**Safe defaults**: Create project in current working directory or user's home directory (not system folders)\n\n---\n\n## Troubleshooting Guide\n\nProvide this if user encounters issues:\n\n**Problem**: Remotion Studio won't start\n**Diagnosis**: Run `npm run dev` and check error message\n**Common causes**:\n- Port 3000 already in use → Use different port: `remotion studio --port=3001`\n- TypeScript errors → Run `npm install typescript`\n\n**Problem**: Rendering fails\n**Diagnosis**: Run `npx remotion render` with verbose flag\n**Common causes**:\n- FFmpeg not found → Verify with `which ffmpeg`\n- Out of memory → Close other applications\n- Missing composition → Check src\u002FRoot.tsx\n\n**Problem**: Slow installation\n**Diagnosis**: Check network speed\n**Solutions**:\n- Use npm mirror: `npm install --registry=https:\u002F\u002Fregistry.npmmirror.com`\n- Clear npm cache: `npm cache clean --force`\n- Update npm: `npm install -g npm@latest`\n\n---\n\nThis skill ensures a smooth, automated environment setup experience while maintaining user control and providing clear feedback at every step.\n","# Remotion Environment Setup\n\nYou are responsible for ensuring the user's system has all required dependencies to generate videos with Remotion. This skill automatically detects, installs, and validates the complete environment.\n\n## When This Skill Activates\n\nThis skill should activate automatically when:\n- The video-generator skill detects a video creation request\n- The user explicitly mentions environment setup or dependencies\n- Any Remotion command fails due to missing dependencies\n\n## System Requirements\n\n### Required Software\n\n1. **Node.js** (v16 or higher)\n   - Check: `node --version`\n   - Required for running Remotion and React\n\n2. **FFmpeg** (any recent version)\n   - Check: `ffmpeg -version`\n   - Required for video encoding and frame stitching\n\n3. **npm** or **yarn** or **pnpm**\n   - Comes with Node.js installation\n   - Package manager for installing dependencies\n\n4. **Chromium\u002FChrome**\n   - Remotion downloads its own bundled Chromium\n   - No manual installation needed\n   - Used for rendering React components to frames\n\n### Recommended (Optional)\n\n- **Git**: For version control of video projects\n- **Visual Studio Code**: For editing Remotion code\n- **2-4GB free RAM**: For rendering process\n- **500MB free disk space**: For project and output files\n\n## Environment Detection Process\n\n### Step 1: Check Node.js\n\nRun this command:\n```bash\nnode --version\n```\n\n**Expected output**: v16.x.x or higher (e.g., `v18.17.0`, `v20.5.1`)\n\n**If missing**:\n- Detect platform (macOS, Linux, Windows)\n- Provide platform-specific installation instructions\n- Do NOT attempt auto-install (Node.js requires user consent)\n\n**Installation Instructions by Platform**:\n\n**macOS**:\n```bash\n# Using Homebrew (recommended)\nbrew install node\n\n# Or download from nodejs.org\n```\n\n**Linux (Ubuntu\u002FDebian)**:\n```bash\ncurl -fsSL https:\u002F\u002Fdeb.nodesource.com\u002Fsetup_18.x | sudo -E bash -\nsudo apt-get install -y nodejs\n```\n\n**Windows**:\nDownload installer from https:\u002F\u002Fnodejs.org\u002F and run it.\n\n---\n\n### Step 2: Check FFmpeg\n\nRun this command:\n```bash\nffmpeg -version\n```\n\n**Expected output**: FFmpeg version information (any recent version is fine)\n\n**If missing**:\n\n**macOS**:\n```bash\nbrew install ffmpeg\n```\n\n**Linux (Ubuntu\u002FDebian)**:\n```bash\nsudo apt-get update\nsudo apt-get install ffmpeg\n```\n\n**Windows**:\n1. Download from https:\u002F\u002Fffmpeg.org\u002Fdownload.html\n2. Extract to C:\\ffmpeg\n3. Add to PATH environment variable\n\n**Automatic Installation Decision**:\n- On macOS\u002FLinux: Ask user permission, then run install command\n- On Windows: Provide manual instructions (auto-install not reliable)\n\n---\n\n### Step 3: Verify Package Manager\n\nRun this command:\n```bash\nnpm --version\n```\n\n**Expected output**: Version number (e.g., `9.8.1`)\n\n**If npm is missing**: This indicates Node.js wasn't installed correctly. Return to Step 1.\n\n**Alternative package managers**:\n- yarn: `yarn --version`\n- pnpm: `pnpm --version`\n\nUse whichever is available (prefer npm as default).\n\n---\n\n## Project Initialization\n\n### Step 4: Determine Project Directory\n\nThe Remotion project directory (referred to as `PROJECT_DIR` below) is selected using the following priority:\n\n1. **User-specified path**: If the user explicitly provides a path, use that\n2. **Environment variable**: If `REMOTION_PROJECT_DIR` is set, use its value\n3. **Current working directory** (recommended): `.\u002Fremotion-videos\u002F` — keeps the project co-located with the user's workspace\n4. **Home directory fallback**: `~\u002Fremotion-videos\u002F` — only if the current directory is not writable or not suitable\n\n**Determine and create the directory**:\n```bash\n# Use environment variable if set, otherwise default to .\u002Fremotion-videos\nPROJECT_DIR=\"${REMOTION_PROJECT_DIR:-.\u002Fremotion-videos}\"\nmkdir -p \"$PROJECT_DIR\"\ncd \"$PROJECT_DIR\"\n```\n\n**Why this strategy**:\n- Works in sandboxed environments where `~` may not be predictable\n- Keeps video projects close to the user's working context\n- Can be overridden externally via environment variable\n- Falls back gracefully to home directory if needed\n\n**If directory already exists**: Use existing directory (don't overwrite).\n\n---\n\n### Step 5: Initialize npm Project\n\n**If package.json doesn't exist**:\n```bash\nnpm init -y\n```\n\nThis creates a basic `package.json` file.\n\n**If package.json exists**: Check if Remotion dependencies are installed (next step).\n\n---\n\n### Step 6: Install Remotion Dependencies\n\nInstall the core Remotion packages:\n\n```bash\ncd \"$PROJECT_DIR\"\nnpm install remotion@^4.0.0 @remotion\u002Fcli@^4.0.0 react@^19.0.0 react-dom@^19.0.0\n```\n\n**Additional useful packages** (install if time permits):\n```bash\nnpm install @remotion\u002Ftailwind@^4.0.0 @remotion\u002Ftransitions@^4.0.0 @remotion\u002Fgoogle-fonts@^4.0.0\n```\n\n**Why these packages**:\n- `remotion`: Core framework\n- `@remotion\u002Fcli`: Command-line tools for rendering\n- `react` + `react-dom`: Required peer dependencies\n- `@remotion\u002Ftailwind`: For Tailwind CSS styling (optional)\n- `@remotion\u002Ftransitions`: Pre-built transition effects (optional)\n- `@remotion\u002Fgoogle-fonts`: Easy font loading (optional)\n\n**Installation timing**:\n- This may take 1-2 minutes\n- Show progress indicator to user\n- If installation fails, check error messages and retry\n\n**Common installation errors**:\n- Network timeout: Retry with longer timeout\n- Permission errors: User may need sudo (Linux\u002FmacOS)\n- Disk space: Check available space\n\n---\n\n### Step 7: Create Project Structure\n\nCreate the standard Remotion project structure:\n\n```bash\ncd \"$PROJECT_DIR\"\nmkdir -p src\u002Fcompositions public\u002Fassets output\n```\n\n**Directory purposes**:\n- `src\u002F`: React components and video compositions\n- `src\u002Fcompositions\u002F`: Individual video project folders\n- `public\u002F`: Static assets (images, fonts, audio)\n- `public\u002Fassets\u002F`: User-provided assets\n- `output\u002F`: Rendered MP4 files\n\n---\n\n### Step 8: Create Configuration Files\n\n**Create `remotion.config.ts`**:\n```typescript\nimport { Config } from \"@remotion\u002Fcli\u002Fconfig\";\n\nConfig.setVideoImageFormat(\"jpeg\");\nConfig.setOverwriteOutput(true);\n```\n\n**Why these settings**:\n- `jpeg`: Faster rendering than png\n- `overwriteOutput`: Automatically replace existing output files\n\n**Create `src\u002Findex.ts` (entry point)**:\n```typescript\nimport { registerRoot } from \"remotion\";\nimport { RemotionRoot } from \".\u002FRoot\";\n\nregisterRoot(RemotionRoot);\n```\n\n**Create basic `src\u002FRoot.tsx`**:\n```typescript\nimport React from \"react\";\n\nexport const RemotionRoot: React.FC = () => {\n  return (\n    \u003C>\n      {\u002F* Video compositions will be added here *\u002F}\n    \u003C\u002F>\n  );\n};\n```\n\n**Create `package.json` scripts** (if not present):\n```json\n{\n  \"scripts\": {\n    \"dev\": \"remotion studio\",\n    \"build\": \"remotion bundle\",\n    \"render\": \"remotion render\"\n  }\n}\n```\n\n---\n\n### Step 9: Validate Installation\n\nRun validation checks:\n\n**Check 1: Remotion CLI**\n```bash\nnpx remotion --version\n```\nExpected: Version number (e.g., `4.0.409`)\n\n**Check 2: Project structure**\n```bash\nls -la \"$PROJECT_DIR\"\n```\nExpected: `src\u002F`, `public\u002F`, `node_modules\u002F`, `package.json` directories exist\n\n**Check 3: TypeScript**\n```bash\nnpx tsc --version\n```\nExpected: Version number (TypeScript is a Remotion dependency)\n\n**If all checks pass**: Environment is ready! ✓\n\n---\n\n## Error Handling\n\n### Common Issues and Solutions\n\n**Issue: \"command not found: node\"**\n- **Cause**: Node.js not installed or not in PATH\n- **Solution**: Install Node.js or add to PATH\n\n**Issue: \"command not found: ffmpeg\"**\n- **Cause**: FFmpeg not installed or not in PATH\n- **Solution**: Install FFmpeg or add to PATH\n\n**Issue: \"npm ERR! EACCES: permission denied\"**\n- **Cause**: Insufficient permissions\n- **Solution**: Use `sudo npm install` (Linux\u002FmacOS) or run as administrator (Windows)\n\n**Issue: \"npm ERR! network timeout\"**\n- **Cause**: Network issues or slow connection\n- **Solution**: Retry with `npm install --timeout=60000`\n\n**Issue: \"npm ERR! ENOSPC: no space left on device\"**\n- **Cause**: Insufficient disk space\n- **Solution**: Free up disk space (need at least 500MB)\n\n**Issue: Module not found errors**\n- **Cause**: Dependencies not fully installed\n- **Solution**: Delete `node_modules\u002F` and re-run `npm install`\n\n---\n\n## Output to User\n\n### Success Message\n\nWhen environment is ready, inform user:\n\n```\n✓ Environment setup complete!\n\n✓ Node.js: v18.17.0\n✓ FFmpeg: version 6.0\n✓ Remotion: 4.0.409\n✓ Project directory: $PROJECT_DIR\n\nYou're ready to create videos! The video-generator skill will now proceed.\n```\n\n### Partial Success Message\n\nIf some optional components are missing:\n\n```\n✓ Core environment ready!\n\n✓ Node.js: v18.17.0\n✓ FFmpeg: version 6.0\n✓ Remotion: 4.0.409\n\n⚠ Optional: Consider installing Git for version control\n\nProject directory: $PROJECT_DIR\n```\n\n### Failure Message\n\nIf critical components are missing and cannot be auto-installed:\n\n```\n❌ Environment setup incomplete\n\nMissing requirements:\n❌ Node.js: Not installed\n   Install from: https:\u002F\u002Fnodejs.org\u002F\n\nCurrent status:\n✓ FFmpeg: version 6.0\n\nPlease install the missing requirements and try again.\n```\n\n---\n\n## Platform-Specific Considerations\n\n### macOS\n\n**Homebrew availability**: Check if Homebrew is installed\n```bash\nwhich brew\n```\n\nIf Homebrew exists, use it for FFmpeg installation:\n```bash\nbrew install ffmpeg\n```\n\nIf Homebrew doesn't exist:\n- Suggest installing Homebrew first: `\u002Fbin\u002Fbash -c \"$(curl -fsSL https:\u002F\u002Fraw.githubusercontent.com\u002FHomebrew\u002Finstall\u002FHEAD\u002Finstall.sh)\"`\n- Or provide direct FFmpeg download link\n\n### Linux\n\n**Distribution detection**:\n- Ubuntu\u002FDebian: Use `apt-get`\n- Fedora\u002FRedHat: Use `yum` or `dnf`\n- Arch: Use `pacman`\n\n**Sudo requirement**: Most installations require `sudo`\n- Ask user permission before running sudo commands\n- Explain what the command does\n\n### Windows\n\n**Installation challenges**:\n- FFmpeg requires manual PATH setup\n- npm may require administrator rights\n\n**Provide clear instructions**:\n1. Download FFmpeg from official site\n2. Extract to C:\\ffmpeg\n3. Add C:\\ffmpeg\\bin to PATH\n4. Restart terminal\n\n**Alternative**: Suggest using WSL2 (Windows Subsystem for Linux) for easier setup\n\n---\n\n## Verification Checklist\n\nBefore proceeding to video generation, confirm:\n\n- [ ] Node.js v16+ is installed and accessible\n- [ ] FFmpeg is installed and in PATH\n- [ ] npm\u002Fyarn\u002Fpnpm is available\n- [ ] Remotion packages are installed in `$PROJECT_DIR`\n- [ ] Project structure exists (`src\u002F`, `public\u002F`, `output\u002F`)\n- [ ] Configuration files are created\n- [ ] `remotion studio` command works (optional: test by running it)\n\n---\n\n## Integration with Other Skills\n\n### Called by video-generator\n\nThe video-generator skill invokes this skill first to ensure environment is ready before generating videos.\n\n### Output to video-generator\n\nReturn status:\n- **Ready**: All requirements met, proceed with video generation\n- **Pending**: User needs to install something manually, wait for confirmation\n- **Failed**: Critical requirements missing, cannot proceed\n\n---\n\n## Best Practices\n\n### User Communication\n\n**Be transparent**: Explain what you're installing and why\n**Ask permission**: Don't run installation commands without user consent\n**Provide alternatives**: If auto-install fails, give manual instructions\n**Show progress**: Indicate when installations are running (may take time)\n\n### Error Recovery\n\n**Graceful degradation**: If optional packages fail, continue with core setup\n**Clear diagnostics**: Explain error causes in simple terms\n**Actionable solutions**: Provide exact commands to fix issues\n**Support links**: Include official documentation URLs\n\n### Performance\n\n**Parallel checks**: Run Node.js and FFmpeg checks simultaneously\n**Cached validation**: If environment was validated recently, skip re-check\n**Minimal installs**: Only install what's needed, offer optional packages separately\n\n---\n\n## Example Workflow\n\n**User request**: \"Create a video showing our product features\"\n\n**Environment setup flow**:\n\n1. Detect video creation request\n2. Check if environment exists\n   - If yes: Quick validation, then proceed\n   - If no: Full setup process\n3. Check Node.js → ✓ Found v18.17.0\n4. Check FFmpeg → ✗ Not found\n5. Ask user: \"FFmpeg is required for video rendering. Install it now? (will run: brew install ffmpeg)\"\n6. User confirms → Run installation\n7. FFmpeg installed → ✓\n8. Check Remotion project → Not found\n9. Create project directory at `$PROJECT_DIR`\n10. Run `npm install remotion @remotion\u002Fcli react react-dom`\n11. Create project structure\n12. Validate installation → ✓ All checks pass\n13. Report success → Hand off to video-generator skill\n\n**Total time**: 2-3 minutes (mostly npm installation)\n\n---\n\n## Security Considerations\n\n**Don't run arbitrary code**: Only execute well-known package installations\n**Verify package sources**: Install from official npm registry\n**User consent**: Always ask before running sudo or admin commands\n**No credential storage**: Don't save API keys or passwords\n**Safe defaults**: Create project in current working directory or user's home directory (not system folders)\n\n---\n\n## Troubleshooting Guide\n\nProvide this if user encounters issues:\n\n**Problem**: Remotion Studio won't start\n**Diagnosis**: Run `npm run dev` and check error message\n**Common causes**:\n- Port 3000 already in use → Use different port: `remotion studio --port=3001`\n- TypeScript errors → Run `npm install typescript`\n\n**Problem**: Rendering fails\n**Diagnosis**: Run `npx remotion render` with verbose flag\n**Common causes**:\n- FFmpeg not found → Verify with `which ffmpeg`\n- Out of memory → Close other applications\n- Missing composition → Check src\u002FRoot.tsx\n\n**Problem**: Slow installation\n**Diagnosis**: Check network speed\n**Solutions**:\n- Use npm mirror: `npm install --registry=https:\u002F\u002Fregistry.npmmirror.com`\n- Clear npm cache: `npm cache clean --force`\n- Update npm: `npm install -g npm@latest`\n\n---\n\nThis skill ensures a smooth, automated environment setup experience while maintaining user control and providing clear feedback at every step.\n",{"name":5,"description":7},"main","18d0e63d1313ca87098f614aa7c1e2dcf6de79c7","backend\u002Fskills\u002Fmarketplace\u002Fcb_teams_marketplace\u002Fplugins\u002Fremotion-video-generator\u002Fskills\u002Fenvironment-setup",1,"https:\u002F\u002Fgithub.com\u002Fwelflau\u002Fai-dev-system","https:\u002F\u002Fgithub.com\u002Fwelflau","2026-11-10 11:14:25",{"source":8,"skillName":5,"commands":58,"prompt":68,"zipAvailable":69},[59,62,65],{"tool":60,"command":61},"npx","npx skills add welflau\u002Fai-dev-system --skill \"Environment Setup\"",{"tool":63,"command":64},"bunx","bunx skills add welflau\u002Fai-dev-system --skill \"Environment Setup\"",{"tool":66,"command":67},"pnpm","pnpm dlx skills add welflau\u002Fai-dev-system --skill \"Environment Setup\"","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fwelflau\u002Fai-dev-system\u002Fblob\u002Fmain\u002Fbackend\u002Fskills\u002Fmarketplace\u002Fcb_teams_marketplace\u002Fplugins\u002Fremotion-video-generator\u002Fskills\u002Fenvironment-setup\u002FSKILL.md",true,[],[72,103,134,159,185,209],{"skillNo":73,"name":74,"nameZh":6,"description":75,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":76,"licenseFileUrl":77,"sourceHtmlUrl":78,"categories":79,"keywords":83,"publishedAt":45},"01M6HSTDP4M3JFXEBK91VFB4PA","web-artifacts-builder","Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn\u002Fui). Use for complex artifacts requiring state management, routing, or shadcn\u002Fui components - not for simple single-file HTML\u002FJSX artifacts.","Apache-2.0","https:\u002F\u002Fgithub.com\u002Fwelflau\u002Fai-dev-system\u002Fblob\u002Fmain\u002Fbackend\u002Fskills\u002Fmarketplace\u002Fcodebuddy-plugins-official\u002Fplugins\u002Fweb-artifacts-builder\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fwelflau\u002Fai-dev-system\u002Fblob\u002Fmain\u002Fbackend\u002Fskills\u002Fmarketplace\u002Fcodebuddy-plugins-official\u002Fplugins\u002Fweb-artifacts-builder\u002FSKILL.md",[80],{"categoryNo":81,"categoryName":82,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000009","前端开发",[84,85,86,87,88,89,90,91,92,93,94,95,96,97,36,98,99,100,101,29,102],"web artifacts builder","web","artifacts","artifacts builder","builder","frontend","css","components","react","routing","state management","state","file","Tailwind","single-file","simple","ui components","multi","single",{"skillNo":104,"name":105,"nameZh":6,"description":106,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":76,"licenseFileUrl":107,"sourceHtmlUrl":108,"categories":109,"keywords":119,"publishedAt":45},"01M6HSDXH0JSP8R3QTNY9XZ8HN","frontend-design","Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML\u002FCSS layouts, or when styling\u002Fbeautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.","https:\u002F\u002Fgithub.com\u002Fwelflau\u002Fai-dev-system\u002Fblob\u002Fmain\u002Fbackend\u002Fskills\u002Fmarketplace\u002Fcodebuddy-plugins-official\u002Fplugins\u002Ffrontend-design\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fwelflau\u002Fai-dev-system\u002Fblob\u002Fmain\u002Fbackend\u002Fskills\u002Fmarketplace\u002Fcodebuddy-plugins-official\u002Fplugins\u002Ffrontend-design\u002FSKILL.md",[110,111,114],{"categoryNo":81,"categoryName":82,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":112,"categoryName":113,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":115,"categoryName":116,"taxonomyType":117,"taxonomyTypeDesc":118},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[89,120,121,90,85,91,92,122,123,124,86,125,126,127,36,128,129,130,131,132,133,26],"design","frontend design","react components","create","code","examples","applications","landing","ui design","pages","aesthetics","web ui","with","generic",{"skillNo":135,"name":136,"nameZh":6,"description":137,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":76,"licenseFileUrl":138,"sourceHtmlUrl":139,"categories":140,"keywords":142,"publishedAt":45},"01M6HSA77QYVP7A72HREGTDN2C","algorithmic-art","Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.","https:\u002F\u002Fgithub.com\u002Fwelflau\u002Fai-dev-system\u002Fblob\u002Fmain\u002Fbackend\u002Fskills\u002Fmarketplace\u002Fcodebuddy-plugins-official\u002Fplugins\u002Falgorithmic-art\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fwelflau\u002Fai-dev-system\u002Fblob\u002Fmain\u002Fbackend\u002Fskills\u002Fmarketplace\u002Fcodebuddy-plugins-official\u002Fplugins\u002Falgorithmic-art\u002FSKILL.md",[141],{"categoryNo":112,"categoryName":113,"taxonomyType":20,"taxonomyTypeDesc":21},[143,144,145,123,124,146,147,148,149,36,150,151,152,153,132,154,155,156,157,158,26],"algorithmic art","Art","algorithmic","flow","js","work","interactive","generative art","exploration","systems","users","Existing","request","generative","copyright","fields",{"skillNo":160,"name":161,"nameZh":6,"description":162,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":76,"licenseFileUrl":163,"sourceHtmlUrl":164,"categories":165,"keywords":167,"publishedAt":45},"01M6HS9HE0X390Y6RQKTY1YNGJ","theme-factory","Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors\u002Ffonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.","https:\u002F\u002Fgithub.com\u002Fwelflau\u002Fai-dev-system\u002Fblob\u002Fmain\u002Fbackend\u002Fskills\u002Fmarketplace\u002Fcodebuddy-plugins-official\u002Fexternal_plugins\u002Ftheme-factory\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fwelflau\u002Fai-dev-system\u002Fblob\u002Fmain\u002Fbackend\u002Fskills\u002Fmarketplace\u002Fcodebuddy-plugins-official\u002Fexternal_plugins\u002Ftheme-factory\u002FSKILL.md",[166],{"categoryNo":112,"categoryName":113,"taxonomyType":20,"taxonomyTypeDesc":21},[168,169,170,171,172,173,86,174,175,176,127,177,178,129,179,132,180,181,182,29,183,184],"theme factory","factory","theme","docs","toolkit","generate","SET","fly","slides","styling","artifact","themes","you","fonts","can","apply","new",{"skillNo":186,"name":187,"nameZh":6,"description":188,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":189,"categories":190,"keywords":194,"publishedAt":45},"01M6HS74GASM6FJ77F83EY679E","browsing","Use when you need direct browser control - teaches Chrome DevTools Protocol for controlling existing browser sessions, multi-tab management, form automation, and content extraction via use_browser MCP tool","https:\u002F\u002Fgithub.com\u002Fwelflau\u002Fai-dev-system\u002Fblob\u002Fmain\u002Fbackend\u002Fskills\u002Fmarketplace\u002Fcodebuddy-plugins-official\u002Fexternal_plugins\u002Fsuperpowers-chrome\u002Fskills\u002Fbrowsing\u002FSKILL.md",[191],{"categoryNo":192,"categoryName":193,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000023","Skill与智能体开发",[187,195,196,197,198,199,200,201,202,203,204,36,205,206,207,208,101,180,29,154],"MCP","automation","chrome","sessions","protocol","browser","devtools","chrome devtools","tool","direct","browser control","control","via","form",{"skillNo":210,"name":211,"nameZh":6,"description":212,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":76,"licenseFileUrl":213,"sourceHtmlUrl":214,"categories":215,"keywords":220,"publishedAt":45},"01M6HS6BZT2CKDNQ6YF20DXN4T","slack-gif-creator","Knowledge and utilities for creating animated GIFs optimized for Slack. Provides constraints, validation tools, and animation concepts. Use when users request animated GIFs for Slack like \"make me a GIF of X doing Y for Slack.\"","https:\u002F\u002Fgithub.com\u002Fwelflau\u002Fai-dev-system\u002Fblob\u002Fmain\u002Fbackend\u002Fskills\u002Fmarketplace\u002Fcodebuddy-plugins-official\u002Fexternal_plugins\u002Fslack-gif-creator\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fwelflau\u002Fai-dev-system\u002Fblob\u002Fmain\u002Fbackend\u002Fskills\u002Fmarketplace\u002Fcodebuddy-plugins-official\u002Fexternal_plugins\u002Fslack-gif-creator\u002FSKILL.md",[216,219],{"categoryNo":217,"categoryName":218,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000005","邮件与沟通",{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},[221,222,223,224,225,42,226,227,228,36,229,153,230,231,232,29,155,26],"slack gif creator","slack","gif","creator","validation","constraints","Animation","knowledge","me","make","Utilities","concepts"]