By dio-chu
Dialog component from the f-rha library. Modal with overlay, title, footer, and keyboard (Escape) close 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]
Based on adoption, maintenance, documentation, and repository signals. Not a security audit or endorsement.
Own this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimOwn this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimRadio component from the f-rha library. Radio button group for single-selection with string or object options.
Button component from the f-rha library. Variants: primary, secondary, outline. Sizes: sm, md, lg.
Input component from the f-rha library. Text input with label, placeholder, error message, and disabled state.
useLocalStorage hook from the f-rha library. Persists React state to localStorage with JSON serialization and functional updater support.
useDebounce hook from the f-rha library. Debounces a rapidly changing value to avoid excessive re-renders or API calls.
npx claudepluginhub dio-chu/f-rha-marketplace --plugin f-rha-dialogMUI Base UI unstyled React components with Floating UI. Use for accessible components, Radix UI migration, render props API, or encountering positioning, popup, v1.0 beta issues.
Documentation and guidance for ahooks, a React Hooks library
Build accessible React UIs with Base UI (@base-ui/react). Covers all 35+ unstyled, headless components (Dialog, Menu, Select, Combobox, Tabs, Accordion, Toast, Form, Slider, etc.), styling patterns (Tailwind, CSS Modules, CSS-in-JS), animations, composition via render props, form integration, and TypeScript types.
Build agents that speak your UI
Use this agent when building user interfaces, implementing React/Vue/Angular components, handling state management, or optimizing frontend performance. This agent excels at creating responsive, accessible, and performant web applications. Examples:\n\n<example>\nContext: Building a new user interface\nuser: "Create a dashboard for displaying user analytics"\nassistant: "I'll build an analytics dashboard with interactive charts. Let me use the frontend-developer agent to create a responsive, data-rich interface."\n<commentary>\nComplex UI components require frontend expertise for proper implementation and performance.\n</commentary>\n</example>\n\n<example>\nContext: Fixing UI/UX issues\nuser: "The mobile navigation is broken on small screens"\nassistant: "I'll fix the responsive navigation issues. Let me use the frontend-developer agent to ensure it works perfectly across all device sizes."\n<commentary>\nResponsive design issues require deep understanding of CSS and mobile-first development.\n</commentary>\n</example>\n\n<example>\nContext: Optimizing frontend performance\nuser: "Our app feels sluggish when loading large datasets"\nassistant: "Performance optimization is crucial for user experience. I'll use the frontend-developer agent to implement virtualization and optimize rendering."\n<commentary>\nFrontend performance requires expertise in React rendering, memoization, and data handling.\n</commentary>\n</example>
Ultra-compressed communication mode. Cuts ~75% of tokens while keeping full technical accuracy by speaking like a caveman.