skill-web-bundle
Package skills into web-compatible bundles. Converts any skill directory into a single .txt file containing all resources, making it usable in web-based AI chatbots. Validates skill structure and warns about script compatibility. Triggers when user mentions "skill-web-bundle", "打包skill", "web bundle", or wants to create web bundles of skills for external use.
When & Why to Use This Skill
The Skill Web Bundle is a specialized utility designed to bridge the gap between local development and web-based AI environments. It automates the conversion of complex Claude skill directories into a single, structured .txt file, consolidating all resources—including metadata, scripts, and templates—into a portable format. This ensures that advanced agentic capabilities can be easily deployed and executed within web-based chatbots where direct file system access is unavailable.
Use Cases
- Deploying local Claude Desktop skills to web-based AI platforms (like Claude.ai) by transforming directory structures into a single-file 'web bundle'.
- Sharing complex agent configurations with team members or the community via a simple copy-paste text format that preserves all functional logic.
- Validating skill integrity and metadata compliance before distribution to ensure the skill meets standard directory and frontmatter requirements.
- Providing a safety check for script-heavy skills to warn users about potential execution limitations in restricted web environments.
| name | skill-web-bundle |
|---|---|
| description | Package skills into web-compatible bundles. Converts any skill directory into a single .txt file containing all resources, making it usable in web-based AI chatbots. Validates skill structure and warns about script compatibility. Triggers when user mentions "skill-web-bundle", "打包skill", "web bundle", or wants to create web bundles of skills for external use. |
Skill Web Bundle
Package skills into web-compatible text bundles for use in external AI chatbots.
Overview
This skill converts any skill directory into a single .txt file containing all resources (SKILL.md, scripts, references, templates, assets) in a structured format that can be used in web-based AI environments where file system access is limited.
Usage
/skill-web-bundle <skill-name>
Example:
/skill-web-bundle track-design
/skill-web-bundle skill-creator
Workflow
Step 1: Validate Input
Self-reference check: Ensure target skill is not
skill-web-bundleitself- If user tries to bundle
skill-web-bundle, show error: "❌ 错误:不能打包skill-web-bundle自己"
- If user tries to bundle
Skill existence check: Verify the skill directory exists at
.claude/skills/<skill-name>- If not found, show error: "❌ 错误:找不到skill目录: .claude/skills/
"
- If not found, show error: "❌ 错误:找不到skill目录: .claude/skills/
Skill structure validation: Verify the skill follows standard directory structure
- Required:
SKILL.mdfile must exist - Required: SKILL.md must contain YAML frontmatter with
nameanddescriptionfields - If validation fails, show specific error message
- Required:
Step 2: Script Warning
If scripts/ directory exists and contains files:
- List the script files found
- Display warning message:
⚠️ 警告:检测到scripts脚本文件 在web环境中可能无法正常执行skill功能。 确定是否要继续web bundle打包?(y/n) - Wait for user confirmation
- If user declines, exit gracefully
Step 3: Execute Bundling
Run the bundling script:
python3 .claude/skills/skill-web-bundle/scripts/bundle_skill.py \
--skill-path .claude/skills/<skill-name> \
--output .claude/skills/skill-web-bundle/assets/
The script will:
- Read all files from the skill directory
- Apply the web bundle template
- Generate a single .txt file with all content
Step 4: Output Confirmation
Display success message:
✅ Web bundle打包成功!
📦 产物路径: .claude/skills/skill-web-bundle/assets/<skill-name>.txt
💡 该文件可直接复制到任何web端AI聊天机器人中使用
Bundle Format
The generated .txt file contains:
- Web Agent Instructions: Explains how to operate as the bundled skill
- Resource Navigation Guide: How to find and use bundled resources
- Bundled Content: All skill files with clear START/END markers
Each file is wrapped with delimiters:
==================== START: skills/<skill-name>/<path>/<filename> ====================
[file content]
==================== END: skills/<skill-name>/<path>/<filename> ====================
Error Handling
- Self-bundling: Cannot bundle
skill-web-bundleitself - Missing SKILL.md: Skill must have valid SKILL.md with metadata
- Invalid metadata: SKILL.md must contain
nameanddescriptionin frontmatter - Missing skill: Target skill directory must exist
Resources
- Bundling Script:
scripts/bundle_skill.py- Python script for validation and bundling - Bundle Template:
templates/web_bundle_template.txt- Template for generated bundles - Output Directory:
assets/- Where generated bundles are stored