Stats
Links
Categories
A collection of F-RHA plugins
npx claudepluginhub dio-chu/f-rha-marketplaceButton component from the f-rha library. Variants: primary, secondary, outline. Sizes: sm, md, lg.
Dialog component from the f-rha library. Modal with overlay, title, footer, and keyboard (Escape) close support.
Input component from the f-rha library. Text input with label, placeholder, error message, and disabled state.
Radio component from the f-rha library. Radio button group for single-selection with string or object options.
useDebounce hook from the f-rha library. Debounces a rapidly changing value to avoid excessive re-renders or API calls.
useLocalStorage hook from the f-rha library. Persists React state to localStorage with JSON serialization and functional updater support.
為 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 內容。
| 技能 | 觸發時機 |
|---|---|
| Button | 使用或詢問按鈕元件，包含 variant、size、disabled 等設定 |
| Dialog | 使用或詢問 Modal 對話框，包含開關控制、footer、鍵盤關閉 |
| Input | 使用或詢問文字輸入框，包含 label、error message、disabled |
| Radio | 使用或詢問單選按鈕群組，支援字串陣列與物件陣列格式 |
| 技能 | 觸發時機 |
|---|---|
| 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]