@extrastu/create-xhs-react-tool

面向小红书小工具开发的 React + TypeScript 脚手架，让开发者或 AI 从创建项目到生成可上传 ZIP，只需几条命令。

快速上手 (Quick Start)

1. 创建项目

pnpm create @extrastu/xhs-react-tool my-stamp-tool
# 或者
npx @extrastu/create-xhs-react-tool my-stamp-tool

2. 开发与预览

cd my-stamp-tool
pnpm install
pnpm dev

3. 发布打包

pnpm ship

立即生成符合小红书平台规范的交付压缩包：

release/
├── my-stamp-tool-v0.1.0-xhs.zip   # 带有版本号的标准发布包
└── my-stamp-tool-xhs.zip          # 便捷别名

项目架构与规范

生成的项目结构如下：

my-tool/
├── .claude/
│   └── skills/
│       └── minitool-zip-builder/
├── .codex/
│   └── skills/
│       └── minitool-zip-builder/
├── scripts/
│   ├── validate.mjs        # 平台规则合规扫描（离线、API、路径）
│   └── pack.mjs            # 规范 ZIP 压缩生成器
├── src/
│   ├── components/         # UI 组件
│   ├── hooks/              # React Hooks
│   ├── xhs/                # 小红书离线能力适配层
│   │   ├── capabilities.ts # 浏览器/沙箱能力检测
│   │   ├── image.ts        # 本地图片选择、Canvas 处理与导出
│   │   ├── safeArea.ts     # 移动端安全区域适配
│   │   ├── storage.ts      # 本地持久化缓存
│   │   └── index.ts
│   ├── App.tsx             # 移动端优先的 Starter 页面
│   ├── main.tsx
│   └── styles.css          # Mobile First / 100dvh / Safe Area Reset
├── public/
├── index.html
├── AGENTS.md               # 面向 AI Coding 助手的规则说明
├── vite.config.ts          # 预设 base: './' 相对路径配置
├── tsconfig.json
├── package.json
└── README.md

核心特性

• ⚡ 零配置启动: 预设 base: './' 相对路径及 Vite 构建配置，打包产物解压即可运行。
• 🛡️ 严格合规校验 (pnpm validate):
  • 静态分析源码与打包物中的网络请求（fetch、axios、WebSocket 等）
  • 扫描远程 CDN 引用与外部 URL
  • 检测 eval、iframe、Worker 等高风险沙箱 API
  • 校验根目录 index.html 及相对资源路径
• 📦 自动化规范打包 (pnpm pack:xhs / pnpm ship):
  • 自动清空历史发布目录，将 dist/* 扁平打包为 release/<name>-xhs.zip
  • 根目录直接包含 index.html，符合小红书审核要求
• 🤖 AI Coding 原生集成:
  • 预置 .claude / .codex / AGENTS.md 规则约束，防止 AI 生成违规网络请求代码。
• 📱 适配层封装 (src/xhs/):
  • 提供安全的离线图片选择、Canvas 绘制与导出、localStorage 本地持久化封装。

License

MIT