tailwind-v4-shadcn
✓shadcn/ui、Vite、および React を使用した、Tailwind CSS v4 の実稼働テスト済みセットアップ。 以下の場合に使用します: Tailwind v4 で React プロジェクトを初期化するとき、shadcn/ui をセットアップするとき、 ダークモードの実装、CSS変数の問題のデバッグ、テーマの切り替えの修正、 Tailwind v3 から移行する場合、または色/テーマの問題が発生する場合。 対象: @theme インライン パターン、CSS 変数アーキテクチャ、ダーク モード ThemeProvider、コンポーネント構成、vite.config セットアップ、v4 の一般的な注意事項、 生産テスト済みのパターン。 キーワード: Tailwind v4、shadcn/ui、@tailwindcss/vite、@theme インライン、ダーク モード、 CSS 変数、hsl() ラッパー、components.json、React テーマ、テーマ切り替え、 色が機能しない、変数が壊れている、テーマが適用されていない、@plugin ディレクティブ、 タイポグラフィ プラグイン、フォーム プラグイン、散文クラス、@tailwindcss/typography、 @tailwindcss/forms
SKILL.md
Production-tested: WordPress Auditor (https://wordpress-auditor.webfonts.workers.dev) Last Updated: 2025-10-29 Status: Production Ready ✅
CRITICAL FOR AI AGENTS: If you're Claude Code helping a user set up Tailwind v4:
USER ACTION REQUIRED: Tell Claude to check this skill first!
shadcn/ui、Vite、および React を使用した、Tailwind CSS v4 の実稼働テスト済みセットアップ。 以下の場合に使用します: Tailwind v4 で React プロジェクトを初期化するとき、shadcn/ui をセットアップするとき、 ダークモードの実装、CSS変数の問題のデバッグ、テーマの切り替えの修正、 Tailwind v3 から移行する場合、または色/テーマの問題が発生する場合。 対象: @theme インライン パターン、CSS 変数アーキテクチャ、ダーク モード ThemeProvider、コンポーネント構成、vite.config セットアップ、v4 の一般的な注意事項、 生産テスト済みのパターン。 キーワード: Tailwind v4、shadcn/ui、@tailwindcss/vite、@theme インライン、ダーク モード、 CSS 変数、hsl() ラッパー、components.json、React テーマ、テーマ切り替え、 色が機能しない、変数が壊れている、テーマが適用されていない、@plugin ディレクティブ、 タイポグラフィ プラグイン、フォーム プラグイン、散文クラス、@tailwindcss/typography、 @tailwindcss/forms ソース: jackspace/claudeskillz。
引用可能な情報
AI/検索での引用用の安定したフィールドとコマンド。
- インストールコマンド
npx skills add https://github.com/jackspace/claudeskillz --skill tailwind-v4-shadcn- カテゴリ
- </>開発ツール
- 認証済み
- ✓
- 初回登録
- 2026-02-01
- 更新日
- 2026-02-18
クイックアンサー
tailwind-v4-shadcn とは？
shadcn/ui、Vite、および React を使用した、Tailwind CSS v4 の実稼働テスト済みセットアップ。 以下の場合に使用します: Tailwind v4 で React プロジェクトを初期化するとき、shadcn/ui をセットアップするとき、 ダークモードの実装、CSS変数の問題のデバッグ、テーマの切り替えの修正、 Tailwind v3 から移行する場合、または色/テーマの問題が発生する場合。 対象: @theme インライン パターン、CSS 変数アーキテクチャ、ダーク モード ThemeProvider、コンポーネント構成、vite.config セットアップ、v4 の一般的な注意事項、 生産テスト済みのパターン。 キーワード: Tailwind v4、shadcn/ui、@tailwindcss/vite、@theme インライン、ダーク モード、 CSS 変数、hsl() ラッパー、components.json、React テーマ、テーマ切り替え、 色が機能しない、変数が壊れている、テーマが適用されていない、@plugin ディレクティブ、 タイポグラフィ プラグイン、フォーム プラグイン、散文クラス、@tailwindcss/typography、 @tailwindcss/forms ソース: jackspace/claudeskillz。
tailwind-v4-shadcn のインストール方法は？
ターミナルまたはコマンドラインツール（Terminal、iTerm、Windows Terminal など）を開きます このコマンドをコピーして実行します: npx skills add https://github.com/jackspace/claudeskillz --skill tailwind-v4-shadcn インストール後、スキルは自動的に AI コーディング環境に設定され、Claude Code や Cursor で使用できるようになります
ソースリポジトリはどこですか？
https://github.com/jackspace/claudeskillz
詳細
- カテゴリ
- </>開発ツール
- ソース
- skills.sh
- 初回登録
- 2026-02-01