# Xhs Mini Tool

> 小红书小工具开发规则与容器能力约束。当用户要求生成、开发、调试小红书小工具（vibecoding 作品）时使用此技能，确保产出代码严格符合小红书小工具容器的能力边界与限制。

- Skill: `janlaywss/xhs-mini-tool` (Agent Skill, multi-file: 5 files)
- Install (CLI): `npx skillmds@latest add janlaywss/xhs-mini-tool`
- Raw SKILL.md: https://api.skillmd.com/api/skills/janlaywss/xhs-mini-tool/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: Janlaywss (https://skillmd.com/u/janlaywss)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/janlaywss/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 兼容