待办事项Web应用生成器
任务目标
- 本 Skill 用于:快速生成完整的待办事项列表Web应用
- 能力包含:一键生成包含CRUD功能的待办事项应用、响应式界面设计、本地数据持久化、命令行数据管理工具
- 触发条件:用户要求"创建待办事项应用"、"生成任务管理工具"、"需要能保存数据的todo list"等
前置准备
- 依赖说明:本Skill的脚本使用Python标准库，无需额外安装依赖
- 无需创建额外文件或文件夹
操作步骤
- 标准流程:
1. 应用生成:调用scripts/generate_todo_app.py生成完整的Web应用代码- 支持自定义应用标题和配色方案
- 生成包含HTML、CSS、JavaScript的完整代码
- 支持任务优先级、截止日期、完成状态等字段
2. 数据管理:使用scripts/todo_manager.py进行批量数据操作 - 从JSON文件导入/导出待办事项
- 批量添加、删除、更新任务
- 生成任务统计报告
3. 应用部署:直接在浏览器中打开生成的HTML文件即可使用
4. 功能扩展:根据 references/feature_guide.md 添加高级功能
- 可选分支:
- 当需要数据备份:调用
todo_manager.py导出数据为JSON文件 - 当需要批量导入:准备符合 references/data_format.md 格式的JSON文件，使用
todo_manager.py导入 - 当需要自定义样式:修改生成的CSS部分，参考 assets/templates/ 中的模板
资源索引
- 必要脚本:
- scripts/generate_todo_app.py(生成完整的待办事项Web应用代码，支持自定义配置)
- scripts/todo_manager.py(命令行工具，用于批量管理待办事项数据)
- 领域参考:
- references/data_format.md(数据格式规范和示例，用于导入/导出)
- references/feature_guide.md(功能扩展指导，包含高级功能实现方案)
- 输出资产:
- assets/templates/(HTML/CSS/JS代码模板和样式参考)
注意事项
- 生成的Web应用使用LocalStorage存储数据，数据保存在浏览器本地
- 清除浏览器缓存会导致数据丢失，建议定期使用
todo_manager.py备份数据 - 应用支持响应式设计，适配手机、平板、桌面等设备
- 所有JavaScript代码为纯原生实现，无需依赖第三方库
使用示例
-
示例1:生成基础待办事项应用
bash python scripts/generate_todo_app.py --title "我的任务清单" --color "#3498db"
生成名为my-todo-app.html的完整应用文件 -
示例2:管理现有数据
```bash
# 导出数据
python scripts/todo_manager.py --export backup.json
# 查看任务统计
python scripts/todo_manager.py --stats
```
- 示例3:批量导入任务
bash # 先创建符合格式的JSON文件，参考 references/data_format.md python scripts/todo_manager.py --import tasks.json
