F-RHA Marketplace
為 f-rha React 元件庫打造的 Claude Code Plugin Marketplace
在 Claude Code 中使用 f-rha 時，自動獲得元件 Props 說明、用法範例、以及最佳實踐建議。
架構
F-RHA-marketplace/
├── .claude-plugin/
│ └── marketplace.json # Marketplace 目錄設定
├── README.md
└── plugins/
├── f-rha-components/
│ ├── button/
│ │ ├── .claude-plugin/plugin.json
│ │ └── skills/button/SKILL.md
│ ├── dialog/
│ │ ├── .claude-plugin/plugin.json
│ │ └── skills/dialog/SKILL.md
│ ├── input/
│ │ ├── .claude-plugin/plugin.json
│ │ └── skills/input/SKILL.md
│ └── radio/
│ ├── .claude-plugin/plugin.json
│ └── skills/radio/SKILL.md
└── f-rha-hooks/
├── use-debounce/
│ ├── .claude-plugin/plugin.json
│ └── skills/use-debounce/SKILL.md
└── use-local-storage/
├── .claude-plugin/plugin.json
└── skills/use-local-storage/SKILL.md
每個 skill 都是獨立的 plugin，擁有自己的 .claude-plugin/plugin.json manifest 和 skills/<name>/SKILL.md 內容。
包含技能
UI 元件
| 技能 | 觸發時機 |
|---|
| Button | 使用或詢問按鈕元件，包含 variant、size、disabled 等設定 |
| Dialog | 使用或詢問 Modal 對話框，包含開關控制、footer、鍵盤關閉 |
| Input | 使用或詢問文字輸入框，包含 label、error message、disabled |
| Radio | 使用或詢問單選按鈕群組，支援字串陣列與物件陣列格式 |
Hooks
| 技能 | 觸發時機 |
|---|
| useDebounce | 需要對快速變動的值（搜尋輸入、resize）做防抖處理 |
| useLocalStorage | 需要將 React state 持久化到 localStorage |
安裝
在 Claude Code 中透過 Marketplace 安裝：
Plugins > Marketplaces > Add Marketplace
https://github.com/dio-chu/F-RHA-marketplace.git
安裝後，在任何使用 f-rha 的專案中，Claude 會自動套用對應技能。
使用方式
安裝完成後不需要額外設定。只要在對話中提到 f-rha 的元件或 hook，Claude 即會自動帶入正確的 API 說明與範例。
範例對話：
你：幫我用 f-rha 做一個確認刪除的 Dialog
你：useDebounce 要怎麼搭配搜尋輸入框？
作者
dio_dio — [email protected]
whinc
TheBushidoCollective
fusengine
secondsky
