prof-ramos/shadcn-ui-skill

shadcn-ui-skill は何をしますか？

Claude Code 向けの包括的な shadcn/ui スキル - React プロジェクトにおける shadcn/ui のインストールガイド、コンポーネント例、ベストプラクティス

概要

このスキルは、shadcn/ui ライブラリを React アプリケーションに統合するプロセスを効率化します。公式ドキュメントを活用して、正確なインストール手順、コンポーネントの実装例、そしてプロフェッショナルな UI 開発のための設計パターンを提供します。

使用方法

インストール

# shadcn/ui を新規プロジェクトに初期化する
npx shadcn@latest init

コンポーネントの追加

# 特定のコンポーネントを追加する
npx shadcn@latest add button
npx shadcn@latest add card
npx shadcn@latest add dialog

コンポーネント例

ボタン

import { Button } from "@/components/ui/button"

export default function Home() {
  return (
    <div>
      <Button>クリックしてください</Button>
      <Button variant="destructive">削除</Button>
      <Button variant="outline">アウトライン</Button>
    </div>
  )
}

カード

import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

export function CardDemo() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>カードタイトル</CardTitle>
        <CardDescription>カードの説明</CardDescription>
      </CardHeader>
      <CardContent>
        <p>カードコンテンツ</p>
      </CardContent>
      <CardFooter>
        <p>カードフッター</p>
      </CardFooter>
    </Card>
  )
}

ベストプラクティス

1. TypeScript を使用する: shadcn/ui は TypeScript で構築されており、型安全を最大限に活用してください。
2. Tailwind CSS の設定をカスタマイズする: tailwind.config.ts でテーマを拡張して、ブランドカラーに合わせます。
3. コンポーネントを small に保つ: 各コンポーネントは単一責任の原則に従うようにしてください。
4. アクセシビリティを考慮する: すべての shadcn/ui コンポーネントはアクセシブルになるよう設計されています。aria-* 属性を活用してください。

トラブルシューティング

問題	解決策
インストールエラー	Node.js と npm が最新版であることを確認してください。node -v と npm -v を実行します。
コンポーネントが表示されない	components.json がプロジェクトルートに存在することを確認してください。
スタイルの競合	Tailwind CSS のクラスが正しく適用されているか確認してください。PostCSS の設定をチェックします。

参考リンク

• shadcn/ui ドキュメント
• GitHub リポジトリ
• Tailwind CSS ドキュメント