Xhs Mini Tool

小红书小工具开发指南

此 Skill 编码了小红书小工具容器的完整能力清单与限制规则，确保生成的代码在小红书容器内可正常运行。

文件说明

CONTAINER_RULES.md

内容：小工具容器的运行环境、可用能力、不可用能力、跨域规则、WebGL 边界。

何时使用：每次为小红书小工具生成代码前必须遵守。这是硬性约束，不可违反。

BEST_PRACTICES.md

内容：开发最佳实践，包括项目结构、性能优化、常见踩坑与 FAQ。

何时使用：需要优化性能、选择技术方案、或遇到常见问题时参考。

硬性 NEVER 清单

• NEVER 使用 Node.js、后端服务、服务端渲染（SSR）相关代码
• NEVER 使用 npm install 安装依赖；所有第三方库必须通过 CDN 引入
• NEVER 使用 eval()、new Function()、document.write()（CSP 禁止）
• NEVER 使用设备原生 API：Geolocation、蓝牙、NFC、USB、AR/VR、相机/麦克风（MediaDevices）、Payment Request、推送通知、系统级权限
• NEVER 使用 WebRTC
• NEVER 产出超过 5MB 的总包体积
• NEVER 使用重量级 3D 引擎（Three.js 等）
• NEVER 遗漏 index.html 入口文件
• NEVER 在 Fetch/XHR 请求中忽略 CORS 要求
• NEVER 依赖自动播放音频（必须用户交互触发）

Agent 工作流

1. 检查需求可行性

拿到用户需求后，先对照 CONTAINER_RULES.md 检查：

• 需求是否涉及不可用能力？如果是，明确告知用户并给出替代方案
• 需求是否可能超出 5MB 包体积限制？

2. 选择技术方案

• 简单工具：纯 HTML + CSS + JS，无需框架
• 中等复杂度：通过 CDN 引入 Vue/React/Petite-Vue 等轻量框架
• 需要图表：通过 CDN 引入 Chart.js / ECharts 等（注意体积）
• 需要 Canvas：直接使用 Canvas 2D API

3. 生成代码

严格遵守以下约束：

• 入口文件必须是 index.html
• 所有第三方库通过 CDN <script> / <link> 标签引入
• 移动端优先，使用 rem / vw / vh 做自适应布局
• 触摸事件优先于鼠标事件
• 数据持久化使用 localStorage / IndexedDB
• 外部 API 调用需确认目标服务器支持 CORS

4. 产出物检查

生成完成后自检：

• 包含 index.html 入口
• 无 Node.js / npm 依赖
• 无禁用 API 调用（eval、Geolocation、MediaDevices 等）
• 总文件体积 < 5MB
• 移动端适配（触摸事件、响应式布局）
• 音频播放有用户交互触发
• 外部请求有 CORS 兼容