jpskill.com
🛠️ 開発・MCP コミュニティ

tailwindcss-next-init

Next.jsのApp Routerプロジェクトで、Tailwind CSS v4とIconifyを、一貫性のあるスタイル設定で迅速に導入・移行できるよう、スクリプト駆動のテンプレートを使って初期設定を自動化するSkill。

📜 元の英語説明(参考)

Initialize Tailwind CSS v4 and Iconify for Next.js App Router projects with script-driven templates. Use when you need a fast setup or migration with consistent style-entry conventions.

🇯🇵 日本人クリエイター向け解説

一言でいうと

Next.jsのApp Routerプロジェクトで、Tailwind CSS v4とIconifyを、一貫性のあるスタイル設定で迅速に導入・移行できるよう、スクリプト駆動のテンプレートを使って初期設定を自動化するSkill。

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux 
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o tailwindcss-next-init.zip https://jpskill.com/download/9721.zip && unzip -o tailwindcss-next-init.zip && rm tailwindcss-next-init.zip
🪟 Windows (PowerShell) 
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/9721.zip -OutFile "$d\tailwindcss-next-init.zip"; Expand-Archive "$d\tailwindcss-next-init.zip" -DestinationPath $d -Force; ri "$d\tailwindcss-next-init.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)
  1. 1. 下の青いボタンを押して tailwindcss-next-init.zip をダウンロード
  2. 2. ZIPファイルをダブルクリックで解凍 → tailwindcss-next-init フォルダができる
  3. 3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
  4. 4. Claude Code を再起動
⬇ .zip でダウンロード(推奨) ⬇ .skill 形式(上級者用) 元のソース ↗

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

  1. 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
  2. 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
  3. 3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
    • · macOS / Linux: ~/.claude/skills/
    • · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →
最終更新
2026-05-18
取得日時
2026-05-18
同梱ファイル
1

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

Tailwindcss Next Init

概览

本 skill を使用して、対象リポジトリに Tailwind v4 の初期化スケルトンを生成し、コピー可能な依存関係のインストールコマンド、レイアウトのインポートチェック結果、@source と @reference の使用に関する推奨事項を提供します。 手作業での見落としを避けるため、スクリプトを優先的に実行して標準化された出力を完了します。

標準的な流れ

  1. 対象プロジェクトの構造を識別します。
  • <project-root>/package.json が存在するかどうかを確認します。
  • src/app/layout.tsx または app/layout.tsx が存在するかどうかを確認します。
  • src/styles/ と styles/ ディレクトリの状態を確認します。
  1. まずは dry-run でプレビューします。
  • 実行：
    python3 scripts/init_tailwind_v4.py --project-root /abs/path/to/project --dry-run
  • 作成/上書きされるファイルを確認してから、実際に書き込みを実行するかどうかを決定します。
  1. 初期化書き込みを実行します。
  • デフォルトの最小テンプレート：
    python3 scripts/init_tailwind_v4.py --project-root /abs/path/to/project
  • このリポジトリのテンプレートに近いもの：
    python3 scripts/init_tailwind_v4.py --project-root /abs/path/to/project --preset project-like
  • 既存のファイルを上書きする必要がある場合は、--force を明示的に追加します。
  1. 依存関係のインストールを処理します。
  • スクリプトが出力するパッケージマネージャーのコマンドに従って依存関係をインストールします（スクリプトはコマンドを生成するだけで、インストールを直接実行しません）。
  • デフォルトのアイコン戦略は --icons all で、lucide/mdi/tabler の3つのアイコンセットをインストールします。
  1. インポートとスキャン範囲を確認します。
  • スクリプトがグローバルスタイルのインポートが不足していると示している場合は、対象の layout.tsx に以下を追加します。
    import "@/styles/globals.css";
import "@/styles/custom.css";
  • クラス名が node_modules またはスキャン範囲外にある場合は、指示に従って tailwind-core.css に @source を追加します。
  1. プロジェクトの検証を行います。
  • 少なくとも1回はビルドチェーンのチェックを実行します（例：pnpm typecheck、pnpm dev）。
  • ページスタイルが有効になっていること、Iconify アイコンクラスがレンダリング可能であることを確認します。

スクリプトパラメータの契約

scripts/init_tailwind_v4.py は以下のパラメータをサポートします。

  • --project-root <path>：対象プロジェクトのルートディレクトリ（必須）
  • --preset minimal|project-like：テンプレートのスタイル、デフォルトは minimal
  • --icons all|lucide|none：アイコン戦略、デフォルトは all
  • --package-manager auto|pnpm|npm|yarn|bun：パッケージマネージャー、デフォルトは auto
  • --dry-run：プレビューのみ、ファイルを書き込まない
  • --force：既存のファイルを上書きする

リソースの説明

  • references/repo-tailwind-audit.md
    • 現在のリポジトリの Tailwind 連携と過去の進化を記録し、「プロジェクト同款」戦略の参考にします。
  • references/tailwind-v4-best-practices.md
    • Tailwind v4 / Next.js / Iconify のベストプラクティスと公式リンクを記録します。
  • assets/templates/minimal/*
    • 汎用的な最小テンプレートで、プロジェクトを跨いでの迅速な導入に適しています。テンプレートのソースファイルは .tpl 拡張子を使用します。
  • assets/templates/project-like/*
    • このリポジトリのスタイルに近く、safe-area、reduced-motion、theme token bridge が含まれています。テンプレートのソースファイルは .tpl 拡張子を使用します。
    • project-like テンプレートの @layer ... antd ... はリポジトリ同款の特殊な項目です。Ant Design プロジェクトでない場合は、必要に応じてこのレイヤーを削除できます。

テンプレートの拡張子の約束：

  • テンプレートソース：*.tpl
  • ターゲット成果物：src/styles/*.css または styles/*.css（スクリプトが自動的に判定）
  • init_tailwind_v4.py は .tpl を厳密に読み取り、.css テンプレートへのフォールバックは行いません。

出力制約

本 skill を実行する際は、常に以下を出力します。

  1. 対象プロジェクトの識別結果（layout、styles、package manager）
  2. 書き込み/書き込み済みのファイルリスト
  3. 依存関係のインストールコマンド（選択したパッケージマネージャーによる）
  4. @source と @reference の推奨されるスニペット
  5. 検証チェックリスト（少なくとも3つの実行可能なチェック項目）
📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

Tailwindcss Next Init

概览

用本 skill 为目标仓库生成 Tailwind v4 初始化骨架，并给出可复制的依赖安装命令、布局导入检查结果、@source 与 @reference 使用建议。 优先运行脚本完成标准化输出，避免手工遗漏。

标准流程

  1. 识别目标项目结构。
  • 检查 <project-root>/package.json 是否存在。
  • 检查 src/app/layout.tsx 或 app/layout.tsx 是否存在。
  • 检查 src/styles/ 与 styles/ 目录状态。
  1. 先做 dry-run 预览。
  • 运行：
    python3 scripts/init_tailwind_v4.py --project-root /abs/path/to/project --dry-run
  • 先确认将创建/覆盖的文件，再决定是否执行真实写入。
  1. 执行初始化写入。
  • 默认最小模板：
    python3 scripts/init_tailwind_v4.py --project-root /abs/path/to/project
  • 贴近本仓库模板：
    python3 scripts/init_tailwind_v4.py --project-root /abs/path/to/project --preset project-like
  • 已有文件需覆盖时显式加 --force。
  1. 处理依赖安装。
  • 按脚本输出的包管理器命令安装依赖（脚本只生成命令，不直接执行安装）。
  • 默认图标策略是 --icons all，安装 lucide/mdi/tabler 三套图标集。
  1. 检查导入与扫描边界。
  • 若脚本提示缺少全局样式导入，在目标 layout.tsx 增加：
    import "@/styles/globals.css";
import "@/styles/custom.css";
  • 若类名来自 node_modules 或扫描盲区，按提示在 tailwind-core.css 增加 @source。
  1. 进行项目验证。
  • 至少执行一次构建链路检查（如 pnpm typecheck、pnpm dev）。
  • 确认页面样式生效、Iconify 图标类可渲染。

脚本参数契约

scripts/init_tailwind_v4.py 支持以下参数：

  • --project-root <path>：目标项目根目录（必填）
  • --preset minimal|project-like：模板风格，默认 minimal
  • --icons all|lucide|none：图标策略，默认 all
  • --package-manager auto|pnpm|npm|yarn|bun：包管理器，默认 auto
  • --dry-run：仅预览，不写文件
  • --force：覆盖已存在文件

资源说明

  • references/repo-tailwind-audit.md
    • 记录当前仓库 Tailwind 链路与历史演进，供“项目同款”策略参考。
  • references/tailwind-v4-best-practices.md
    • 记录 Tailwind v4 / Next.js / Iconify 的最佳实践与官方链接。
  • assets/templates/minimal/*
    • 通用最小模板，适合跨项目快速落地。模板源文件使用 .tpl 后缀。
  • assets/templates/project-like/*
    • 贴近本仓库风格，包含 safe-area、reduced-motion、theme token bridge。模板源文件使用 .tpl 后缀。
    • project-like 模板中的 @layer ... antd ... 为仓库同款特化项；非 Ant Design 项目可按需移除该 layer。

模板后缀约定：

  • 模板源：*.tpl
  • 目标产物：src/styles/*.css 或 styles/*.css（脚本自动判定）
  • init_tailwind_v4.py 严格读取 .tpl，不会回退读取 .css 模板。

输出约束

执行本 skill 时，始终输出：

  1. 目标项目识别结果（layout、styles、package manager）
  2. 将写入/已写入文件列表
  3. 依赖安装命令（按所选包管理器）
  4. @source 与 @reference 的建议片段
  5. 验证清单（至少 3 条可执行检查项）