browser-app-creator

用途

Browser App Creator 用于创建可直接使用的单文件网页应用（HTML/CSS/JS 全部写在一个文件中），无需服务器、无需构建步骤、无外部依赖，下载后即可在浏览器中打开并离线使用。适合快速制作工具、仪表盘、追踪器和原型。

主要能力

• 生成单文件应用，模板结构包含 DOCTYPE、head（含 meta、title、style）与 body（含 UI 与 script）。
• 使用 localStorage 持久化数据，保存时附带 lastUpdated 时间戳，加载失败时回退到默认数据。
• 针对 ADHD 用户的界面优化：按钮最小高度 60px、高对比度、默认深色模式（可切换）、每次操作自动保存、成功/错误视觉反馈、移动端响应式、移动端触控目标最小 44px。
• 提供常见应用类型模板：仪表盘（指标、图表、状态指示）、追踪器（习惯、任务、进度）、表单（数据录入、校验、提交）、工具（计算器、转换器、实用程序）、可视化（图表、图形、时间线）。
• 高级功能示例：深色/浅色模式切换、数据导出为 JSON、从 JSON 导入数据、浏览器通知。
• 可与其他技能集成：需要后端时配合 rapid-prototyper 生成 API；用 context manager 保存应用决策；出现 JavaScript、localStorage 或浏览器兼容问题时调用 error-debugger。

使用方式

触发短语包括："create app"、"build tool"、"make dashboard"、"create tracker"、"build calculator"、"make timer"，以及任何针对浏览器界面或工具的请求。

工作流程：

1. 理解需求。仅在必要时询问澄清问题，涉及字段包括 app_type（dashboard|tracker|form|tool|visualization）、primary_function、data_to_track、key_actions、visual_requirements。
2. 生成单文件应用。
3. 应用 ADHD 优化要求（按钮、深色模式、自动保存、视觉反馈、响应式、触控目标）。
4. 使用 localStorage 模式（Storage 对象含 save/load/getDefaults/showFeedback，以及 autoSave 与页面加载时读取）。
5. 交付应用，说明功能、使用步骤（保存为 {app-name}.html、在任意浏览器打开、离线可用、数据自动保存）与自定义方式（颜色改 CSS 变量、功能改 JavaScript、布局改 HTML）。

创建的应用应保存到：Linux/macOS 为 ~/.claude-artifacts/，Windows 为 %USERPROFILE%.claude-artifacts\。

适用场景

• 仪表盘：展示指标、状态与关键信息，元素包括卡片、图表、进度条、状态指示。
• 追踪器：记录和监控重复事项，元素包括增删条目、复选框、时间戳，例如习惯追踪、任务清单、心情日志。
• 表单/输入：收集并校验用户输入，例如问卷、计算器、数据录入工具。
• 可视化：以图表、图形、时间线展示数据。
• 交互式工具：执行特定任务或计算，例如计时器、转换器、游戏、模拟器。

限制

资料未提供关于收费、价格、平台支持范围、性能上限或具体效果保证的信息。该技能生成的应用为纯前端单文件，数据保存在浏览器 localStorage 中；资料未说明其数据同步、多设备共享或后端存储能力。