OpenClaw shadcn/ui スキルガイド

OpenClaw shadcn/ui スキル概要

shadcn/ui スキルは、OpenClaw を shadcn/ui コンポーネントライブラリに接続し、エージェントがプロジェクト内でアクセシブルな React コンポーネントを追加、設定、組み合わせる機能を提供します。インストール後は、フォーム、データテーブル、ナビゲーション、ダイアログなど、完全な UI 機能を日本語の説明で構築できます。

従来のコンポーネントライブラリが npm パッケージとして配布されるのに対し、shadcn/ui はコンポーネントのソースコードをプロジェクトに直接コピーします。つまり、すべてのコードを完全に所有でき、ライブラリの抽象化に制約されることなくコンポーネントをカスタマイズできます。OpenClaw shadcn/ui スキルは、会話を通じてコンポーネントの選択、インストール、構成、スタイリングを処理することで、このワークフローをさらに高速化します。

一般的なワークフロー：

1. OpenClaw にソートとページネーション付きのデータテーブルの追加を依頼します。
2. エージェントが npx shadcn@latest add table と関連コンポーネントを実行し、指定したカラムでテーブルの実装を生成します。
3. 完全に機能する、アクセシブルなデータテーブルがプロジェクトに作成されます — すぐにカスタマイズ可能です。

このスキルは、Tailwind CSS を使用する React および Next.js プロジェクト向けに構築されています。レイアウトや UX のガイダンスには Frontend Design スキルと自然に組み合わせられ、あらゆるデザインシステムワークフローとも連携します。

shadcn/ui スキルの前提条件

shadcn/ui スキルをインストールする前に、以下を準備してください：

• OpenClaw がインストールされ、実行中であること（v1.0+）
• React または Next.js プロジェクト（Tailwind CSS が設定済み）
• Node.js v18+ およびパッケージマネージャー（npm、pnpm、または bun）
• スキル管理用の clawhub CLI がインストールされていること

セットアップを確認します：

# OpenClaw のバージョンを確認
openclaw --version

# Node.js のバージョンを確認
node --version

# Tailwind CSS の設定を確認
npx tailwindcss --help

新しいプロジェクトを開始する場合、エージェントが npx shadcn@latest init を使用して、shadcn/ui が事前設定された Next.js プロジェクトの初期化を手助けできます。

shadcn/ui スキルのインストール方法

単一コマンドで shadcn/ui スキルをインストールします：

npx clawhub@latest install shadcn-ui

インストールを確認するには：

clawhub list

インストール済みスキルの一覧に shadcn-ui が表示されるはずです。

shadcn/ui スキルの設定

shadcn/ui スキルは API キーや外部認証を必要としません。ローカルプロジェクトファイルと shadcn CLI で動作します。

プロジェクトの初期化

プロジェクトに shadcn/ui がまだ設定されていない場合、エージェントが初期化できます：

# プロジェクトで shadcn/ui を初期化
npx shadcn@latest init

これにより、プロジェクトルートに以下の設定を含む components.json 設定ファイルが作成されます：

| 設定 | 説明 | |------|------| | style | コンポーネントスタイルのバリアント（default または new-york） | | tailwind.baseColor | テーマのベースカラー（slate、gray、zinc など） | | tailwind.cssVariables | テーマに CSS 変数を使用するかどうか | | aliases.components | コンポーネントのインポートパスエイリアス | | aliases.utils | ユーティリティ関数のインポートパスエイリアス |

テーマのカスタマイズ

CSS 変数を編集するか、エージェントにカラーの調整を依頼してデフォルトテーマをカスタマイズします：

/* 例：globals.css のカスタムテーマ変数 */
@layer base {
  :root {
    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
  }
}

重要： shadcn/ui コンポーネントはプロジェクトのソースコードにコピーされます。すべてのコンポーネントを完全に制御でき、隠れた依存関係やロックされた抽象化はありません。

shadcn/ui スキルの使用例

1. 完全なフォームの追加

あなた： 「名前、メール、パスワード、利用規約チェックボックスのフィールドを持つユーザー登録フォームを作成してください。zod を使用してバリデーションを追加してください。」

エージェントが npx shadcn@latest add を使用して必要なコンポーネント（form、input、checkbox、button、label）をインストールし、zod スキーマバリデーション、エラーメッセージ、アクセシブルなラベルを備えた完全なフォームコンポーネントを生成します。フォームは React Hook Form のパターンに従い、API への接続準備が整った状態です。

2. データテーブルの構築

あなた： 「名前、メール、ロール、ステータスのカラムを持つユーザー表示用のデータテーブルを追加してください。ソート、フィルタリング、ページネーションを含めてください。」

エージェントが table コンポーネントを追加し、@tanstack/react-table を使用してフル機能のデータテーブルを構築します。カラム定義、フィルターコントロール、ソートハンドラー、ページネーションを生成します — すべて適切な TypeScript 型とアクセシビリティ属性付きです。

3. ダッシュボードレイアウトの作成

あなた： 「折りたたみ可能なサイドバー、トップナビゲーションバー、パンくずリスト、メインコンテンツエリアを持つダッシュボードレイアウトを設定してください。」

エージェントが sidebar、navigation-menu、breadcrumb、separator コンポーネントをインストールし、モバイル対応のサイドバートグルと適切なセマンティック HTML 構造を持つレスポンシブレイアウトに組み立てます。

4. コマンドパレットの追加

あなた： 「VS Code のような Ctrl+K ショートカットでページやアクションを検索できるコマンドパレットを追加してください。」

エージェントが command と dialog コンポーネントをインストールし、キーボードショートカットリスナーを設定して、グループ化されたアイテム、アイコン、ナビゲーションハンドラーを備えた検索可能なコマンドメニューを作成します。

5. 設定ページの構成

あなた： 「プロフィール、アカウント、通知、外観のタブを持つ設定ページを作成してください。各タブ内でカードを使用して関連オプションをグループ化してください。」

エージェントが tabs、card、switch、select、separator コンポーネントをインストールし、フォームフィールド、トグル、ドロップダウンセレクターを論理的なタブグループに整理した完全な設定インターフェースを構築します。

セキュリティとベストプラクティス

shadcn/ui スキルを使用する際は、以下のガイドラインに従ってください：

• 生成されたコードを確認する。 エージェントはプロジェクト内にコンポーネントコードを直接生成します。コミットする前に、特にフォームハンドラーや API 統合部分について、新しいファイルと変更を必ず確認してください。
• ユーザー入力を検証する。 shadcn/ui は UI コンポーネントを提供しますが、入力バリデーションは含まれません。フォームには常に zod や yup などのライブラリを使用したサーバーサイドバリデーションを組み合わせ、処理前に入力をサニタイズしてください。
• 依存関係を最新に保つ。 shadcn/ui コンポーネントは Radix UI プリミティブやその他のパッケージに依存しています。定期的に npm audit を実行し、脆弱な依存関係を更新してください。
• セマンティック HTML を使用する。 エージェントはデフォルトでアクセシブルなマークアップを生成しますが、カスタム変更が ARIA 属性やキーボードナビゲーションを保持していることを確認してください。
• コンポーネントパターンに従う。 shadcn/ui コンポーネントは指定されたコンポーネントディレクトリ（例：components/ui/）に配置してください。インラインでの変更は避け、コンポジションを通じて拡張してください。一般的な OpenClaw ガイダンスについては安全チェックリストを確認してください。

よくあるエラーのトラブルシューティング

「components.json not found」

プロジェクトがまだ shadcn/ui で初期化されていません。

# プロジェクトで shadcn/ui を初期化
npx shadcn@latest init

プロンプトに従って、スタイル、ベースカラー、インポートエイリアスを選択してください。エージェントがこの操作を代行することもできます。

「Module not found: Can't resolve '@/components/ui/button'」

インポートパスエイリアスがプロジェクト設定と一致していません。

1. components.json で設定されたエイリアスパスを確認します。
2. tsconfig.json に一致するパスエイリアスがあることを確認します：

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

3. Next.js を使用している場合、tsconfig.json を変更した後に開発サーバーを再起動してください。

「Tailwind CSS classes not applying」

Tailwind がコンポーネントファイルのディレクトリを処理していません。

1. tailwind.config.js にコンポーネントパスが含まれていることを確認します：

module.exports = {
  content: [
    "./src/components/**/*.{js,ts,jsx,tsx}",
  ],
}

2. globals.css が Tailwind ディレクティブをインポートしていることを確認します（@tailwind base; @tailwind components; @tailwind utilities;）。
3. 開発サーバーを再起動してください。