菜单
Chakra UI v3 (React コンポーネントライブラリ) リファレンス。 別名: Chakra, chakra, chakra-ui。 コンポーネント (Button, Input, Modal, Drawer, Toast, Menu, Tabs, Tooltip 等)、 レイアウト、フォーム、オーバーレイ、チャート、テーマ、レシピ、 スタイルプロップ、レスポンシブ、ダークモード、Chakra UI Pro ブロック。
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/Fandhe-AI/agent-reference-skills --skill chakra-ui命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
基于 SOC 职业分类
正在显示 SKILL.md
| name | chakra-ui |
| description | Chakra UI v3 (React コンポーネントライブラリ) リファレンス。 別名: Chakra, chakra, chakra-ui。 コンポーネント (Button, Input, Modal, Drawer, Toast, Menu, Tabs, Tooltip 等)、 レイアウト、フォーム、オーバーレイ、チャート、テーマ、レシピ、 スタイルプロップ、レスポンシブ、ダークモード、Chakra UI Pro ブロック。 |
| user-invocable | false |
| model | sonnet |
Chakra UI v3 公式ドキュメントを網羅したスキル。 タスクからカテゴリを引き、カテゴリの README.md で目的のページを特定すること。
skills/chakra-ui/
SKILL.md
references/
get-started/
README.md
ai-llms.md
ai-mcp-server.md
ai-skills.md
changelog.md
cli.md
contributing.md
env-iframe.md
env-shadow-dom.md
figma.md
framework-next-app.md
framework-next-pages.md
framework-remix.md
framework-storybook.md
framework-tanstack-router.md
framework-vite.md
installation.md
migration.md
playground.md
components/
README.md
concepts/
layout/
typography/
buttons/
date-time/
forms/
collections/
overlays/
disclosure/
feedback/
data-display/
i18n/
utilities/
charts/
README.md
installation.md
area-chart.md
bar-chart.md
bar-list.md
bar-segment.md
axes.md
cartesian-grid.md
donut-chart.md
legend.md
line-chart.md
pie-chart.md
radar-chart.md
scatter-chart.md
sparkline.md
tooltip.md
use-chart.md
styling/
README.md
concepts/
compositions/
style-props/
theming/
README.md
concepts/
design-tokens/
compositions/
customization/
blocks/
README.md
ai.md
app-headers.md
app-integrations.md
app-navbars.md
authentication.md
banners.md
blogs.md
cards.md
careers.md
charts.md
contacts.md
cta.md
dividers.md
docs-changelog.md
docs-code-block.md
docs-example-preview.md
docs-header.md
docs-navbar.md
docs-pagination.md
docs-parameter-field.md
docs-sidebar.md
docs-step.md
docs-toc.md
faqs.md
features.md
feeds.md
footers.md
help-center.md
heroes.md
layouts.md
logos.md
marketing-headers.md
marketing-navbars.md
notifications.md
onboarding.md
org-switcher.md
pricing.md
product-categories.md
product-grid.md
product-reviews.md
profiles.md
property-panels.md
settings.md
sharing.md
shopping-carts.md
sidebars.md
stats.md
store-signup-offers.md
teams.md
testimonials.md
webhooks.md
samples/
README.md
provider-setup.md
dark-mode.md
responsive-styles.md
theme-customization.md
component-recipes.md
chakra-factory.md
form-field-input.md
dialog.md
toast.md
table.md
scripts/
README.md
install.md
cli.md
generate.md
migration.md
test.md
mcp.md
タスクからカテゴリを引き、カテゴリの README.md で目的のページを特定する:
references/{category}/README.md を参照して目的のページを特定する.md を Read して詳細を確認する| タスク | カテゴリ | 参照 README |
|---|---|---|
| インストール、フレームワーク統合（Next.js/Remix/Vite/TanStack Router）、AI 連携（LLMs.txt/MCP Server/AI Skills）、環境設定、CLI、移行 | get-started | references/get-started/README.md |
| コンポーネントの使い方、Props、バリアント、レイアウト、フォーム、オーバーレイ | components | references/components/README.md |
| チャートの表示、BarChart/LineChart/PieChart、useChart、データ可視化 | charts | references/charts/README.md |
| スタイルプロップ、レスポンシブデザイン、ダークモード、CSS 変数、Chakra Factory | styling | references/styling/README.md |
| デザイントークン、レシピ、スロットレシピ、カスタマイズ、defineConfig | theming | references/theming/README.md |
| UI ブロックテンプレート（ヒーロー、ナビバー、フッター等、要 CHAKRA_PRO_API_KEY） | blocks | references/blocks/README.md |
| 典型的な使い方（Provider 設定、ダークモード、フォーム、ダイアログ等） | samples | samples/README.md |
| インストール・CLI コマンド、コード生成、マイグレーション、テスト、MCP | scripts | scripts/README.md |