Communitygithub.com

childrentime/reactuse

Astro .mdx ドキュメントを hook 用に作成し(英語・簡体字中国語・繁体字中国語)、website-astro のコンテンツスキーマとライブデモの規則に従い、その後 scripts/hook-registry.json を再生成します。「この hook をドキュメント化して」「useXxx のドキュメントを追加」「mdx を書いて」といった指示や、新しい hook 作成後にトリガーされます。

reactuse とは?

このスキルは、ReactUse スタイルの hook 向けに多言語ドキュメントを自動生成するツールです。Astro ベースのウェブサイト website-astro 上で動作し、英語、簡体字中国語、繁体字中国語の3言語の .mdx ファイルを所定のディレクトリ構造に作成します。ファイルパスからサイドバーとルーティングが自動構築されるため、追加の設定ファイルは不要です。フロントマターやボディ構造は既存のドキュメント(例:useClipboard.mdx)に従い、JSDoc から自動生成される API テーブル用のプレースホルダー `%%API%%` や、インラインで記述するライブデモ(```tsx live フェンス)に対応しています。また、`scripts/generate-hook-registry.sh` を実行して hook-registry.json を再生成し、ブログやリンクの解決を正しく行います。このスキルは Cursor や Claude Code などの AI エージェントプラットフォームで利用でき、開発者が新しい React hook を作成した際のドキュメント作業を大幅に効率化します。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/childrentime/reactuse/tree/HEAD/.claude/skills/hook-docs

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

hook-docs — ReactUse 流に hook をドキュメント化する

ドキュメントは 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/、小文字)を設定します。

フロントマター

スキーマは packages/website-astro/src/content.config.ts にあります。必須なのは title のみ;description、sidebar_label、sidebar_position はオプションです。既存のスタイルに合わせてください:

---
title: useX – State Hook Usage & Examples
sidebar_label: useX
description: "useX は React hook で …(一文。メタ説明として使用されます)"
---

ボディ構造

確立された形に従ってください(content/docs/browser/useClipboard.mdx を参照):

# useX

1行でその機能をまとめます。

hook を説明する短い段落。必要に応じて関連する MDN や仕様ページへのリンクを追加します。

### 使用するタイミング

- 具体的なユースケースを示す箇条書き
- もう一つ

### 注意点

- SSR の安全性 / ブラウザサポートの注意点
- その他の落とし穴

## 使用法

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

%%API%%


- ` ```tsx live ` フェンスは編集可能なライブデモをレンダリングします。デモは**インライン**で記述してください — hook のソースからインポートされるわけではありません。
- `%%API%%` を最終行として残します。ビルド時にこの行は(hook の `interface.ts` JSDoc から生成された)API テーブルに置き換えられます;まだ 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 })。ブログやドキュメントのリンクが正しく解決されるために必要です。新しい hook が正しいカテゴリと小文字の URL で表示されていることを確認してください。

関連スキル