w-shadcn について
w-shadcnは、共有UIパッケージにshadcnプリミティブを追加または拡張するワークフロースキルです。コンポーネントのインポートと構成方法を示し、画面単位の変更は`/w-ui`に案内します。
主な機能
- 01shadcnプリミティブの追加・拡張
- 02共有UIパッケージの利用
- 03コンポーネントのインポート規約に準拠
- 04renderとdata属性による構成
- 05変更ファイルへのlint実行
活用シーン
- 01プロジェクトへのshadcnプリミティブ追加
- 02既存の共有UIコンポーネントの拡張
- 03コンポーネント追加後の画面調整
MCP 対応
バリアントが不明な場合、またはインストールエラー時に限り、shadcn MCPを使用します。
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/ / github.com/ blockmatic-icebox/ basilic-skills --skill w-shadcnインストール後、Claude Code で/w-shadcnを入力して読み込まれたか確認します。
詳細
shadcn のプリミティブをインストールまたは拡張します。画面の再構成は /w-ui で行います。shadcn-v3 に従ってください。
- バリアントが不明な場合、またはインストールエラーが発生した場合に限り、shadcn MCP を使用します。
components.jsonで指定された共有 UI パッケージにインストールします(Basilic の例:packages/w-ui/src/components/)。@repo/w-ui/components/*と、そのパッケージのcnをインポートします。まれなプリミティブでは@repo/w-ui/baseを使用します(@base-ui/react、@radix-ui/*、削除済みの@repo/w-ui/radixは使用しません)。components.jsonの"style": "base-vega"を維持します。renderとdata-slot/data-openを使って組み立てます(asChild/data-stateは使用しません)。- プリミティブを追加した後、対象がコンポーネントだけでなく画面全体の場合は、
/w-uiで画面を再構成します。変更したファイルに対して lint を実行します。 - 動作またはコマンドを変更した場合は、ドキュメントに
/w-docsを使用します。
コメント
Markdown 対応