Web To App Agent Skill
将任意网页转换为桌面应用，支持 macOS/Windows/Linux 三大平台。使用 Rust + Tauri 技术栈，生成的应用体积小（约 5MB）、性能高。支持自定义图标、窗口大小、快捷键等丰富配置。
Install
one command, takes just this skill from the repositorynpx skills add https://github.com/anbeime/skill --skill web-to-appWhat comes with it
20 886 bytes besides the instructionThe instruction itself
4 sections, as written by the authorWeb to App
任务目标
- 本 Skill 用于：将任意网页 URL 打包成原生桌面应用
- 能力包含：
- 自动检测并安装 pake-cli 工具
- 支持自定义应用名称、图标、窗口尺寸等配置
- 生成 macOS/Windows/Linux 平台的应用安装包
- 支持高级配置（隐藏标题栏、多实例、代理等）
- 触发条件：用户提出"将网页打包成应用"、"制作桌面应用"等需求
前置准备
环境要求
- Node.js：版本 ≥ 18.0.0（推荐 22.0+）
- Rust：≥ 1.85.0（首次使用会自动安装）
- 系统工具：
- macOS/Linux：需要
curl、wget、file、tar - Windows：自动处理依赖
安装依赖
首次使用前，需要安装 pake-cli 工具：
npm install -g pake-cli
# 或使用 pnpm（推荐）
pnpm install -g pake-cli
操作步骤
标准流程
- 收集需求
- 确认网页 URL（必需）
- 应用名称（建议英文）
- 目标平台（自动检测当前系统）
- 自定义需求（图标、窗口大小等）
- 环境准备
- 调用
scripts/install_pake.py检查并安装 pake-cli - 验证 Node.js 和 Rust 环境
- 执行打包
- 根据用户需求生成配置参数
- 调用
scripts/build_app.py执行打包 - 监控执行进度和错误信息
- 输出验证
- 确认生成的应用安装包
- 提供安装和使用说明
可选分支
- 当需要自定义图标：
- 提供图标文件路径（支持本地或远程 URL）
- 自动转换为平台特定格式（.icns/.ico/.png）
- 当需要高级配置：
- 参考 references/parameter-guide.md
- 添加对应参数（如
--hide-title-bar、--multi-instance）
- 当打包失败：
- 检查网络连接（需要下载依赖）
- 验证 Node.js 和 Rust 版本
- 使用
--debug参数查看详细日志
资源索引
必要脚本
- scripts/install_pake.py
- 用途：检查并安装 pake-cli 工具
- 参数：无
- 返回：安装状态和版本信息
- scripts/build_app.py
- 用途：执行网页打包命令
- 参数：
url：网页 URL（必需）name：应用名称icon：图标路径width：窗口宽度height：窗口高度options：其他可选参数（字典格式）- 返回：生成的应用文件路径
领域参考
- references/parameter-guide.md
- 何时读取：需要配置高级选项时
- 内容：完整的参数说明和使用示例
注意事项
- ⏰ 首次打包较慢：需要下载和编译 Rust 依赖，后续打包会快很多
- 📦 输出位置：默认在当前工作目录（
./）生成应用安装包 - 🖥️ 平台适配：
- macOS：生成
.dmg安装包（设置PAKE_CREATE_APP=1可生成.app） - Windows：生成
.msi安装包 - Linux：生成
.deb或.AppImage包 - 🚀 调试模式：遇到问题时添加
--debug参数查看详细日志 - 🔐 证书问题：如果是内网或自签名证书，使用
--ignore-certificate-errors
使用示例
示例 1：基础打包
功能说明：将 GitHub 网页打包成应用
执行方式：脚本调用
from scripts.build_app import build_app
result = build_app(
url="https://github.com",
name="GitHub"
)
# 输出：GitHub.dmg / GitHub_x64.msi / GitHub_x86_64.deb
示例 2：自定义配置
功能说明：自定义窗口大小和图标
执行方式：脚本调用
result = build_app(
url="https://chat.openai.com",
name="ChatGPT",
icon="https://example.com/icon.png",
width=1400,
height=900,
options={
"hide-title-bar": True,
"always-on-top": False
}
)
示例 3：多实例应用
功能说明：允许同时打开多个应用窗口
执行方式：脚本调用
result = build_app(
url="https://example.com",
name="MyApp",
options={
"multi-instance": True,
"activation-shortcut": "CmdOrControl+Shift+P"
}
)
快捷键说明
生成的应用内置以下快捷键：
| 操作 | macOS | Windows/Linux |
|------|-------|---------------|
| 刷新页面 | ⌘ + R | Ctrl + R |
| 隐藏窗口 | ⌘ + W | Ctrl + W |
| 放大/缩小 | ⌘ + +/- | Ctrl + +/- |
| 重置缩放 | ⌘ + 0 | Ctrl + 0 |
| 复制 URL | ⌘ + L | Ctrl + L |
| 返回首页 | ⌘ + Shift + H | Ctrl + Shift + H |
| 开发者工具 | ⌘ + Option + I | Ctrl + Shift + I（仅调试模式） |
| 清除缓存重启 | ⌘ + Shift + Delete | Ctrl + Shift + Delete |
Other skills for the same job
different authors, same section of the catalogue
Guide for creating high-quality MCP (Model Context Protocol) servers that enable LLMs to interact with external services through well-designed tools. Use when building MCP servers to integrate external APIs or services, whether in Python (FastMCP) or Node/TypeScript (MCP SDK).
Automatically creates user-facing changelogs from git commits by analyzing commit history, categorizing changes, and transforming technical commits into clear, customer-friendly release notes. Turns hours of manual changelog writing into minutes of automated generation.
Use when implementation is complete, all tests pass, and you need to decide how to integrate the work - guides completion of development work by presenting structured options for merge, PR, or cleanup
Guide for creating high-quality MCP (Model Context Protocol) servers that enable LLMs to interact with external services through well-designed tools. Use when building MCP servers to integrate external APIs or services, whether in Python (FastMCP) or Node/TypeScript (MCP SDK).
React Native and Expo best practices for building performant mobile apps. Use when building React Native components, optimizing list performance, implementing animations, or working with native modules. Triggers on tasks involving React Native, Expo, mobile performance, or native platform APIs.
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
Next.js best practices - file conventions, RSC boundaries, data patterns, async APIs, metadata, error handling, route handlers, image/font optimization, bundling
Use when starting feature work that needs isolation from current workspace or before executing implementation plans - creates isolated git worktrees with smart directory selection and safety verification
How to use it
Take anbeime/web-to-app from the repository into ~/.claude/skills for personal
use, or into .claude/skills inside a project.
The agent identifies a skill by the name field in its header. Two skills with the
same name cannot sit side by side — one of them will be ignored.
The instructions reference npm.
Without those the skill loads but fails at the first command.