chakra-ui-builder
Chakra UI v3を使用して、レスポンシブでアクセシブルなUIコンポーネントやレイアウトを構築し、新規・既存プロジェクトへのChakra UIの導入・設定、およびトークン・セマンティックトークン・レシピ・スロットレシピを活用したスケーラブルなテーマ設計を行うスキルです。UIコンポーネント・ページ・フォーム・ダッシュボード・ナビゲーションバー・カード・ランディングセクション・料金表・レイアウトの作成、ChakraProviderのセットアップ・カラーモード設定・プロバイダー構成、またはブランドカラー・デザイントークン・ダークモード・コンポーネントレシピ・タイプ生成などのテーマ設定に関するあらゆるリクエストに対応します。「ブランドカラーを追加して」「再利用可能なカードスタイルを作って」「ログインフォームを作成して」「アプリにChakraを導入して」といった日常的な表現でのChakra UI構築・セットアップ・テーマ・チャートに関するリクエストをトリガーとして動作します。
description の原文を見る
> Build responsive, accessible UI components and layouts using Chakra UI v3, install or configure Chakra UI in new and existing projects, and design scalable themes using tokens, semantic tokens, recipes, and slot recipes. Use this skill whenever a user asks to build, create, or generate any UI component, page, form, dashboard, navbar, card, landing section, pricing table, or layout using Chakra UI; wants to add Chakra UI to a project, set up ChakraProvider, run CLI snippets, configure color mode, or fix provider wrapping; or asks about theming — defining brand colors, design tokens, semantic tokens, dark mode values, component recipes, slot recipes, typegen, or ejecting the default theme. Trigger on any Chakra UI building, setup, or theming or charts request, however casually phrased — "add my brand colors", "make a reusable card style", "build a bar chart", "show me a line chart", "make me a login form", "build a sidebar", "add Chakra to my app".
SKILL.md 本文
Chakra UI Builder
Chakra UI v3でUIを構築し、開発者がプロジェクトにChakra UIをセットアップするのを支援しています。あなたの仕事は、ジェネリックなボイラープレートではなく、プロジェクトに合わせた、クリーンで、アクセシブルで、レスポンシブなコードを生成することです。まずプロジェクトコンテキストを読み、その後に構築またはセットアップしてください。
ステップ1 — プロジェクトコンテキストを読む
利用可能な場合は package.json をチェックしてください。以下を探してください:
- Chakra UIバージョン(デフォルトではv3パターンを使用; v2が明示的に使用されている場合のみv2を使用)
- フレームワーク: Next.js App Router、Pages Router、Vite、プレーンReact
- TypeScriptまたはJavaScript
- パッケージマネージャー(ロックファイルから:
pnpm-lock.yaml、yarn.lock、bun.lock、package-lock.json)
ユーザーが既存コンポーネントを参照している場合は、既に使用されている規約(命名、ファイル構造、インポートスタイル)と一致させるために既存コンポーネントをざっと見てください。
要件があいまいで、レイアウト方向、データ形状、カラーパレット、バリアントの数など、選択が重要になるほど複雑な場合は、捨てられる必要があるものを生成するのではなく、構築する前に質問してください。
プロジェクトセットアップ
Chakra UIがまだインストールされていない場合は、構築前にセットアップを完了してください。
インストール
# npm
npm install @chakra-ui/react @emotion/react
# pnpm
pnpm add @chakra-ui/react @emotion/react
# yarn
yarn add @chakra-ui/react @emotion/react
# bun
bun add @chakra-ui/react @emotion/react
CLIでスニペットを生成
npx @chakra-ui/cli snippet add
引数なしで実行すると、推奨セット(provider、toaster、tooltip)が追加され、必要な依存関係(next-themesを含む)が自動的にインストールされます。--allを使用してすべてのスニペットを追加するか、snippet listで最初に参照してください。
CLIはフレームワークを検出し、ファイルを正しい場所に書き込みます:
| フレームワーク | 出力パス |
|---|---|
Next.js (src/付き) | src/components/ui/ |
Next.js (src/なし) | components/ui/ |
| Vite / プレーンReact | src/components/ui/ |
| Remix | app/components/ui/ |
Providerを接続
Next.js App Router (app/layout.tsx):
import { Provider } from "@/components/ui/provider"
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en" suppressHydrationWarning>
<body>
<Provider>{children}</Provider>
</body>
</html>
)
}
suppressHydrationWarningは、next-themesがカラーモードクラスを注入することによって引き起こされるミスマッチを防ぎます。layout.tsxに "use client" を追加しないでください — 生成されたプロバイダーファイルには既に含まれています。
Next.js Pages Router (pages/_app.tsx):
import { Provider } from "@/components/ui/provider"
export default function App({ Component, pageProps }) {
return (
<Provider>
<Component {...pageProps} />
</Provider>
)
}
Vite (src/main.tsx):
import { Provider } from "./components/ui/provider"
createRoot(document.getElementById("root")!).render(
<StrictMode>
<Provider>
<App />
</Provider>
</StrictMode>,
)
手動Provider(CLIが利用できない場合)
CLIが失敗した場合は、components/ui/provider.tsxを手動で作成し、next-themesを別途インストールしてください:
"use client"
import { ChakraProvider, defaultSystem } from "@chakra-ui/react"
import { ThemeProvider } from "next-themes"
export function Provider({ children }: { children: React.ReactNode }) {
return (
<ChakraProvider value={defaultSystem}>
<ThemeProvider attribute="class" disableTransitionOnChange>
{children}
</ThemeProvider>
</ChakraProvider>
)
}
よくあるセットアップの問題
- スタイルが適用されないコンポーネント — アプリが
<Provider>でラップされていません。インポートパスを確認し、Providerがコンポーネントツリーをラップしていることを確認してください。 - ハイドレーションミスマッチ — App Routerの
<html>にsuppressHydrationWarningを追加してください。 next-themesが見つからない — インストールしてください:npm install next-themes(手動フォールバックの場合のみ必要です; CLIが自動的に処理します)。extendThemeがエクスポートされていない — これはv2パターンです。v3ではcreateSystemを使用してください。
ステップ2 — 正しいレイアウトプリミティブを選択
すべてをBoxでラップするのではなく、適切なChakraプリミティブを選択してください:
| 必要な場合 | 使用するもの |
|---|---|
| 項目の垂直スタック | Stack(デフォルト)またはVStack |
| 水平行 | HStackまたはFlex |
| CSSグリッド | Grid + GridItem |
| 等列グリッド | SimpleGrid columns={N} |
| ページコンテンツ中央配置 | Container maxW="container.lg" |
| 完全なフレックスボックス制御 | Flexと明示的なプロップ |
| セマンティックセクション/記事 | Box as="section" / Box as="article" |
深いネストを避けてください。セマンティック上の理由がなく、3つのBoxレベルの深さにある場合は、フラット化してください。兄弟要素間のマージンではなくgapを使用することを優先してください。
ステップ3 — トークンを使用し、生の値ではなく
Chakra v3には、ライト/ダークモードに自動的に適応するセマンティックトークンが付属しています。ハードコードされたパレット値ではなくそれらを優先してください — 追加の作業なしでコンポーネントをテーマ対応にします。
// セマンティックトークンを優先
<Box bg="bg.subtle" color="fg.default" borderColor="border.subtle" />
<Text color="fg.muted" />
<Box shadow="md" rounded="lg" />
// インタラクティブコンポーネントにはcolorPaletteを使用(colorSchemeではなく)
<Button colorPalette="blue">Submit</Button>
<Badge colorPalette="green">Active</Badge>
生のパレット値(blue.500、gray.100)は、特定の色が意図的であり、カラーモードでシフトしてはいけない場合にのみ使用してください。
ステップ4 — レスポンシブスタイル
Chakraはモバイルファーストブレークポイントを使用します。配列またはオブジェクトシンタックスを一貫して使用してください:
// 配列: [base, sm, md, lg, xl]
<Box px={[4, 6, 8]} fontSize={["sm", "md", "lg"]} />
// オブジェクト: 明示的なブレークポイント
<SimpleGrid columns={{ base: 1, md: 2, lg: 3 }} gap={6} />
<Stack direction={{ base: "column", md: "row" }} gap={4} />
すべてのレイアウトコンポーネントは、リクエストが明示的にデスクトップのみでない限り、少なくともbase(モバイル)とmd(デスクトップ)のブレークポイントを処理すべきです。
ステップ5 — フォーム
すべてのフォームフィールドにField.Rootを使用してください — ラベル、入力、エラー、ヘルプテキストを正しく接続します:
<Field.Root invalid={!!error} required>
<Field.Label>Email address</Field.Label>
<Input type="email" placeholder="you@example.com" />
<Field.ErrorText>{error}</Field.ErrorText>
<Field.HelpText>We'll never share your email.</Field.HelpText>
</Field.Root>
フォーム送信状態については、入力とボタンに(isDisabledではなく)disabledを使用してください。関連フィールドをStack gap={4}にグループ化してください。
ステップ6 — アクセシビリティ
Chakraの組み込みコンポーネントはほとんどのアクセシビリティを自動的に処理します — オーバーライドしないでください。提供する必要があるもの:
- アイコンのみボタン: 常に
aria-labelを追加<IconButton aria-label="Close dialog" icon={<CloseIcon />} /> - 画像: 常に意味のある
altテキストを渡してください(装飾的な場合はalt="") - フォームラベル:
Field.Labelを使用するか、htmlForが入力idと一致することを確認 - インタラクティブカスタム要素:
BoxでonClickを持つものを構築する場合、as="button"または実際の<button>を使用してキーボードナビゲーションが機能するようにしてください - セマンティック見出し:
h1–h6階層を使用; レベルをスキップしないでください - 色のコントラスト: 白い背景に薄いグレーのテキストを使用しないでください; コントラストテスト済みのセマンティックトークンに依存してください
ステップ7 — Next.js: "use client"を追加する場所
Next.js App Routerでは、Server Componentsがデフォルトです。"use client"を必要とするファイルにのみ追加してください — レイアウト全体またはページ全体には追加しないでください。
コンポーネントが"use client"を必要とするのは:
- Reactフック(
useState、useEffect、useContextなど)を使用する場合 - ブラウザイベント(
onClickと状態、フォーム送信など)を処理する場合 - ブラウザAPIを使用する場合
// Server Component — ディレクティブ不要
export default function ProductCard({ name, price }: Props) {
return (
<Box p={4} borderWidth={1} rounded="md">
<Text fontWeight="bold">{name}</Text>
<Text color="fg.muted">{price}</Text>
</Box>
)
}
// Client Component — ディレクティブが必要
;("use client")
export function AddToCartButton({ productId }: { productId: string }) {
const [added, setAdded] = useState(false)
return (
<Button onClick={() => setAdded(true)} colorPalette="blue">
{added ? "Added!" : "Add to cart"}
</Button>
)
}
目標は相互作用をリーフまで押し下げることです — できるだけ多くのツリーをServer Componentsとして保ってください。
ステップ8 — コンポーネント抽出、レシピ使用、テーマカスタマイズのタイミング
同じ構造が2回以上現れた場合、またはピースが十分に複雑でそれを命名することでペアレント(親)がより明確になる場合は、コンポーネントを抽出してください。
コンポーネントが意味のあるスタイルバリアントを持っており、開発者がカスタマイズしたいと思うようなときにレシピを提案してください。複数の連携するパーツ(ヘッダー/本文/フッター付きカード、ラベル/値/アイコン付き統計など)を持つコンポーネントの場合は、スロットレシピを提案してください。
ブランドカラートークン定義、ダークモード値を持つセマンティックトークン、完全なレシピ/スロットレシピオーサリング、typegen、またはデフォルトテーマのイジェクトなど、より深いテーマ設定作業については、応答する前にreferences/theming.mdを読んでください。完全なdefineConfig / createSystem APIと全例をカバーしています。
チャートリクエスト — 棒グラフ、面グラフ、折れ線グラフ、円/ドーナツグラフ、BarList、BarSegment、または@chakra-ui/chartsに関連する何かについては、応答する前にreferences/charts.mdを読んでください。useChartフック、3つのすべてのチャートタイプ、Rechartsの統合、カラートークン、および完全な実行可能な例をカバーしています。
どのコンポーネントを使用するか確信が持てない場合、またはユーザーが1つを指定していない場合は、references/component-decision-tree.mdを読んでください。すべてのChakraコンポーネントを、類似する代替品より1つを選択するタイミングに関するガイダンスとともにカバーしています。
出力フォーマット
以下を生成してください:
- 完全で実行可能なコード — 正しいインポート、
TODOや...rest of componentのようなプレースホルダーなし - 適切なインポートステートメント — Chakraインポートをグループ化してから、ローカルインポート
- コンポーネント分離 — コンポーネントが複雑か、明確に分離可能なパーツを含む場合は、複数のコンポーネント/ファイルに分割
- レスポンシブスタイル — レイアウトの場合、最低限
baseとmdブレークポイント - コード後の簡潔な説明 — 行われた主要な決定(レイアウトアプローチ、アクセシビリティの選択、レスポンシブ戦略)に関する2–4文。リクエストが些細な場合は説明をスキップしてください。
// 良好なインポートスタイル
import { Box, Button, Field, Stack, Text } from "@chakra-ui/react"
// その後ローカル
import { SomeLocalComponent } from "./SomeLocalComponent"
いつ最初に質問するか
リクエストが有用な何かを生成するのに十分明確な場合は、すぐに構築してください。以下の場合は最初に質問してください:
- データ形状が不明でそれが全体的な構造を変更する場合(例: 「テーブルを構築」 — 何列あるか? どのようなデータか?)
- ユーザーが気にするかもしれない意味のある設計上の選択がある場合(レイアウト方向、列数、カラーパレット)
- ユーザーがあなたが見ていないファイルまたは既存コンポーネントを参照している場合
確認できない場合は、応答の先頭に仮定を述べて構築してください — 何もないものからではなく、具体的なものからリダイレクトする方が、ユーザーにとって高速です。
ライセンス: MIT(寛容ライセンスのため全文を引用しています) · 原本リポジトリ
詳細情報
- 作者
- chakra-ui
- リポジトリ
- chakra-ui/chakra-ui
- ライセンス
- MIT
- 最終更新
- 不明
Source: https://github.com/chakra-ui/chakra-ui / ライセンス: MIT
関連スキル
nano-banana-2
inference.sh CLIを通じてGoogle Gemini 3.1 Flash Image Preview（Nano Banana 2）で画像を生成します。テキストから画像を生成する機能、画像編集、最大14枚の複数画像入力、Google Searchグラウンディング機能に対応しています。トリガーワード：「nano banana 2」「nanobanana 2」「gemini 3.1 flash image」「gemini 3 1 flash image preview」「google image generation」
octocode-slides
洗練されたマルチファイル形式のHTMLプレゼンテーションを生成します。6段階のフロー（概要 → リサーチ → アウトライン → デザイン → 実装 → レビュー）で構成されています。各スライドは独立したHTMLファイルとなり、iframeで読み込まれます。「スライドを作成してほしい」「プレゼンテーションを作ってほしい」「HTMLスライドを生成してほしい」「デックを構築してほしい」といった依頼や、ノート・ドキュメント・コードを洗練されたプレゼンテーションに変換する際に使用できます。
gpt-image2-ppt
OpenAIのgpt-image-2を使用して、視覚的に優れたPPTスライドを生成します。Spatial Glass、Tech Blue、Editorial Monoなど10種類のキュレーション済みスタイルに対応し、ユーザーが提供したPPTXファイルを模倣するテンプレートクローンモードも搭載しています。HTMLビューアと16:9形式のPPTXファイルを出力します。プレゼンテーション、スライド、ピッチデック、投資家向けPPT、雑誌風PPTの作成依頼などで活用してください。
nano-banana
Nano Banana PRO（Gemini 3 Pro Image）およびNano Banana（Gemini 2.5 Flash Image）を使用したAI画像生成機能です。以下の場合に活用できます：（1）テキストプロンプトからの画像生成、（2）既存画像の編集、（3）インフォグラフィックス、ロゴ、商品写真、ステッカーなどのプロフェッショナルなビジュアルアセット制作、（4）複数画像での人物キャラクターの一貫性保持、（5）正確なテキスト描画を含む画像生成、（6）AI生成ビジュアルが必要なあらゆるタスク。「画像を生成」「画像を作成」「写真を作る」「ロゴをデザイン」「インフォグラフィックスを作成」「AI画像」「nano banana」またはその他の画像生成リクエストをトリガーとして機能します。
oiloil-ui-ux-guide
モダンでクリーンなUI/UXガイダンス・レビュースキルです。新機能や既存システム（Webアプリ）に対して、実行可能なUI/UX改善提案、デザイン原則、デザインレビューチェックリストが必要な場合に活用できます。CRAP（コントラスト・反復・配置・近接）をベースに、タスクファーストなUX、情報設計、フィードバック・システムステータス、一貫性、affordances、エラー防止・復旧、認知負荷を重視します。モダンミニマルスタイル（クリーン・余白・タイポグラフィ主導）を強制し、不要なテキストを削減、アイコンとしての絵文字を禁止し、統一されたアイコンセットから直感的で洗練されたアイコンを推奨します。
axiom-hig-ref
Apple Human Interface Guidelines リファレンス — 色（セマンティックカラー、カスタムカラー、パターン）、背景（マテリアル階層、ダイナミック背景）、タイポグラフィ（標準スタイル、カスタムフォント、Dynamic Type）、SF Symbols（レンダリングモード、色、多言語対応）、ダークモード、アクセシビリティ、プラットフォーム固有の考慮事項を網羅したガイドラインです。