Communitygithub.com

childrentime/reactuse

为 ReactUse 钩子编写 Astro .mdx 文档(英文 + 简体中文 + 繁体中文),遵循 website-astro 内容模式和在线演示约定,然后重新生成 scripts/hook-registry.json。触发词为“document this hook”、“add docs for useXxx”、“write the mdx”,或在创建新钩子后触发。

reactuse 是什么?

该技能用于为 ReactUse 库中的 React 钩子自动生成多语言 Astro 文档(.mdx 格式),支持英文、简体中文和繁体中文。文档存放在 `packages/website-astro` 项目中,按语言分目录组织,侧边栏和路由通过文件路径自动构建。生成的文档包含必要的 YAML 前端元数据、描述性正文、代码在线演示以及 `%%API%%` 占位符(构建时会被自动替换为 API 表格)。技能还提供中简繁体转换对照表,并自动调用 bash 脚本更新钩子注册表(`scripts/hook-registry.json`),确保内部链接和引用正确。适用于开发者或 AI 代理,在新建或更新钩子后快速生成标准化文档。

兼容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/childrentime/reactuse/tree/HEAD/.claude/skills/hook-docs

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

hook-docs — 以 ReactUse 方式为钩子编写文档

文档位于 Astro 站点 packages/website-astro 中。侧边栏和路由由文件路径自动构建——没有 routes.json 或侧边栏配置需要编辑。

文件位置(每个语言一个)

packages/website-astro/src/content/docs/{category}/useX.mdx          # 英文
packages/website-astro/src/content/docs-zh-hans/{category}/useX.mdx  # 简体中文
packages/website-astro/src/content/docs-zh-hant/{category}/useX.mdx  # 繁體中文

{category} 选项为:browser、effect、element、state、integrations。你选择的文件夹就是类别——它决定了注册表条目和规范 URL(https://reactuse.com/{category}/usex/,小写)。

前端元数据

Schema 位于 packages/website-astro/src/content.config.ts——只有 title 是必需的;description、sidebar_label、sidebar_position 为可选项。要与现有样式一致:

---
title: useX – 状态钩子用法与示例
sidebar_label: useX
description: "useX 是一个 React 钩子,……(一句话,用作 meta 描述)。"
---

正文结构

遵循既定的模板(见 content/docs/browser/useClipboard.mdx):

# useX

一行描述它的功能。

一个简短的段落解释该钩子,如有需要,可链接到相关的 MDN/规范页面。

### 何时使用

- 一个具体用例的列表项
- 另一个用例

### 注意事项

- SSR 安全性 / 浏览器支持注意事项
- 任何需要注意的地方

## 用法

```tsx live
function Demo() {
  const [value, set] = useX(0);
  return <button onClick={() => set(value + 1)}>{value}</button>;
};

%%API%%


- ` ```tsx live ` 代码块用于渲染一个可实时编辑的演示。请**内联**编写演示,无需从钩子源码导入。
- 保留 `%%API%%` 作为最后一行。它会在构建时被替换为自动生成的 API 表格(来自钩子的 `interface.ts` JSDoc);如果尚未有任何 API 文档,它会被静默移除。

## 翻译

zh-Hans / zh-Hant 文件完全镜像英文结构——翻译正文和前端元数据的 `title`/`description`,保持代码演示不变。

zh-Hans → zh-Hant 不是单纯的字符转换;这些术语有所不同:

| 简体 | 繁體 |     | 简体 | 繁體 |
|------|------|-----|------|------|
| 状态 | 狀態 |     | 默认 | 預設 |
| 函数 | 函數 |     | 设置 | 設定 |
| 参数 | 參數 |     | 获取 | 獲取 |
| 组件 | 組件 |     | 监听 | 監聽 |
| 类型 | 類型 |     | 处理 | 處理 |
| 数组 | 數組 |     | 实例 | 實例 |
| 对象 | 對象 |     | 管理 / 配置 | 不變 |

## 编写后——重新生成注册表

```bash
bash scripts/generate-hook-registry.sh

这会遍历英文文档文件夹并重写 scripts/hook-registry.json(hookName → { category, url })。确保博客/文档链接正确解析。验证新钩子出现在正确的类别下且 URL 为小写。

相关技能