Communitygithub.com

chakra-ui/chakra-ui-builder

Chakra UI v3を使用して、レスポンシブでアクセシブルなUIコンポーネントとレイアウトを構築し、新しいプロジェクトや既存プロジェクトにChakra UIをインストール・設定し、トークン、セマンティックトークン、レシピ、スロットレシピを用いたスケーラブルなテーマを設計します。

chakra-ui-builder とは?

このスキルは、Chakra UI v3を利用したUIコンポーネント開発、プロジェクトへの導入・設定、テーマ設計を包括的にサポートします。ユーザーが「ログインフォームを作って」「サイドバーを構築して」「ブランドカラーを追加して」など、カジュアルな依頼をした際に自動的にトリガーされます。対応プラットフォームはClaude Code、Cursor、Codexなどの主要なAIエージェントツールで、Chakra UIのCLIスニペット実行、ChakraProviderのセットアップ、カラーモード構成、プロバイダーのラッピング修正などを支援します。テーマに関しては、デザイントークン、セマンティックトークン、ダークモード値、コンポーネントレシピ、スロットレシピ、型生成、デフォルトテーマのイジェクトまでカバーし、チャート(棒グラフ、折れ線グラフなど)の構築リクエストにも対応します。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/chakra-ui/chakra-ui/tree/main/skills/chakra-ui-builder

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

chakra-ui-builder は何をしますか?

Chakra UI v3を使用して、レスポンシブでアクセシブルなUIコンポーネントとレイアウトを構築し、新しいプロジェクトや既存プロジェクトにChakra UIをインストール・設定し、トークン、セマンティックトークン、レシピ、スロットレシピを用いたスケーラブルなテーマを設計します。このスキルは、ユーザーがChakra UIを使ってUIコンポーネント、ページ、フォーム、ダッシュボード、ナビゲーションバー、カード、ランディングセクション、価格表、レイアウトを構築・作成・生成するよう依頼した場合、プロジェクトにChakra UIを追加したい、ChakraProviderをセットアップしたい、CLIスニペットを実行したい、カラーモードを設定したい、プロバイダーのラッピングを修正したい場合、またはテーマ(ブランドカラーの定義、デザイントークン、セマンティックトークン、ダークモード値、コンポーネントレシピ、スロットレシピ、型生成、デフォルトテーマのイジェクト)について質問された場合に使用します。次のような、カジュアルな表現であっても、Chakra UIの構築、セットアップ、テーマ、チャートに関するあらゆるリクエストでトリガーされます — 「ブランドカラーを追加して」「再利用可能なカードスタイルを作って」「棒グラフを構築して」「折れ線グラフを見せて」「ログインフォームを作って」「サイドバーを構築して」「アプリにChakraを追加して」。

関連スキル