オリジナルの各種スターターキットとClaude Code用のスキルです。
スターターキットとスキルの多くはGitHubにて公開していますが、一部スキル（create-mockup / create-multi-mockup / astro-doctor）については販売中の講座の付録やセミナー特典として限定配布のみになります。
スターターキットにはAIエージェント向けのガイドラインを同梱。パッケージマネージャーは pnpm 推奨（npmでも大丈夫ですけど） 。クローン、もしくは.zipでダウンロード後、パッケージマネージャーのインストールコマンドを実行してお使いください。
スキルのインストール、使い方についてはこのドキュメント後半を参照してください。スキルはClaude Code用として作って公開していますが、他のエージェントで動かしたい場合は、AIに頼んで書き換えてもらってください。
スターターキット、スキルともにせっかく作ったので公開しておりますが、あくまでももともとは個人の作業用で作ってるものとしてご理解ください。
スターターキット
Astro 6 + Tailwind CSS v4 Starter
Astro v6 に Tailwind CSS v4をインテグレーションとして組み込んだスターターキット。Lucide Icons、Biome導入済。下記スキルは一部組み込んであります。
https://github.com/gaspanik/astro6-tailwind4-starter
React 19 + Tailwind CSS v4 + TanStack Router Starter
React 19 に Tailwind CSS v4、TanStack Router を組み込んだスターターキット。Lucide Icons、Biome導入済。Figma MCP経由でFigmaからコードを生成したい時などのベースキットとしても使えます。Figma関連スキル／コマンド追加済。
https://github.com/gaspanik/react19-tailwind4-starter
Vanilla + Tailwind CSS v4 Starter
ViteとTailwind CSS v4を使用したシンプルなVanilla TypeScriptプロジェクトのテンプレート。Lucide Icons導入済。ドキュメントルートに複数のHTMLを生成可能。Figma MCP経由でFigmaからコードを生成したい時などのベースキットとしても使えます。Figma関連スキル／コマンド追加済。
https://github.com/gaspanik/vanilla-tailwind4-starter
スキル
Claude Code 向けカスタムスキル。
各スキルはホームディレクトリ直下の ~/.claude/skills/ に配置することで /スキル名 コマンドとしてマシン内のどこからでも呼び出せます。作業環境のドキュメントルート直下 .claude/skills/ にコピーすればディレクトリ内のみで利用可能です。優先度は ローカル＞グローバル なので、同名スキルが両方にある場合はローカルのものが呼び出されます。
astro-doctor
Astro コードを最新仕様に照合してコンポーネント粒度を最適化するスキル。create-mockup などで生成した直後に実行するのが推奨です。light（仕様修正のみ）/ medium（コンポーネント抽出、デフォルト）/ deep（アトミックデザイン再構成）の3段階で最適化レベルを選べます。既存コンテンツのMarkdown書類（*.md / *.mdx）の仕様チェックも含まれます。
※一般非公開（Astro v6 実践ガイド付録・セミナー特典のみ）
create-mockup
UIモックアップを作成するスキル。サイトの種類・デザインスタイル・ページ種別をヒアリングしてから、プロジェクトの技術スタック（Astro / React / Vite など）に合わせた実装を行います。オプションでの詳細指定も可能。Figma URL なしでUIを組み上げたいときに使います。作成後、Figmaへのスクリーンショット書き出し、Figmaの編集可能なノードとしての書き出しなどサポート。
※一般非公開（Astro v6 実践ガイド講座付録・セミナー特典のみ）
※Figma×AI講座、React関連講座 / Tailwind CSS v4実践ガイド には、最新版を順次展開します
create-multi-mockup
1回のリクエストで複数レイアウトパターンのモックアップをまとめて生成するスキル。プロジェクトの技術スタック（Astro / React / Vite など）に合わせ、共通のカラーシステム・デザイン言語を維持しながら複数案を出せるので、デザイン方向性を決める前の比較検討に適しています。作成後、Figmaへのスクリーンショット書き出し、 create-mockup へ展開しての項目追加やブラッシュアップも可。
※一般非公開（Astro v6 実践ガイド講座付録・セミナー特典のみ）
※Figma×AI講座、React関連講座 / Tailwind CSS v4実践ガイド には、最新版を順次展開します
create-design-md
Google の design.md 仕様に従った DESIGN.md をプロジェクトルートに生成するスキル。コードベース探索・Figma URL・既存 DESIGN.md URL・テキスト貼り付けの4モードに対応し、生成後はリンターで自動検証します。
https://github.com/gaspanik/create-design-md-skill/
export-design-md
DESIGN.md をブログ風のビジュアル HTML ドキュメントに変換するスキル。デフォルトテンプレートを内蔵し、Astro プロジェクトでは src/pages/design-preview.astro を生成します。生成後に Figma へのエクスポートも選択できます。
https://github.com/gaspanik/export-design-md-skill
tailwind-review
Tailwind CSS コードをレビュー・最適化・移行するスキル。v3→v4 移行、任意値のトークン化、競合クラスの除去、HTML アクセシビリティ構造の検証など5つの観点でチェックします。HTML / React / Vue / Svelte / Astro に対応。
https://github.com/gaspanik/tailwind-review-skill
tailwind-typescale
Tailwind CSS v4 プロジェクトに調和のとれたタイプスケールを適用するスキル。ベースフォントサイズとスケール比率名（typescale.com 準拠）を選ぶと、@theme に --text-xs 〜 --text-9xl を設定し、@layer base で h1〜h6 のサイズも整えます。
https://github.com/gaspanik/tailwind-typescale-skill
tailwind-to-figma
Tailwind CSS v4 の @theme トークンを Figma Variables として書き出すスキル。CSS エントリファイルを自動検索し、型ごとに整理された Variable コレクションを Figma ファイルに作成します。既存ファイルへの追記・新規ファイル作成どちらにも対応。
https://github.com/gaspanik/tailwind-to-figma-skill
figma-to-tailwind
Figma ファイルの Variables をすべて取得し、Tailwind CSS v4 の @theme カスタムプロパティとしてプロジェクトの CSS エントリファイルに書き出すスキル。Figma URL を引数に渡すだけで使えます。
https://github.com/gaspanik/figma-to-tailwind-skill
figma-audit
Figma フレーム URL を受け取り、AI が正確に実装できる構造かどうかを4つの観点で検査してレポートを出力するスキル。レイヤー命名・構造の明瞭さ・自動レイアウトの整合性・コンテンツの分かりやすさなどをチェックします。
https://github.com/gaspanik/figma-audit-skill
figma-component-audit
Figma コンポーネント／コンポーネントセット URL を受け取り、バリアント構造・コンポーネントプロパティ・AI 実装精度を5つの観点で監査してレポートを出力するスキル。コード生成や AI 実装の精度向上に向けた改善提案を行います。
https://github.com/gaspanik/figma-component-audit-skill
スキルの依存関係
create-multi-mockup は内部で create-mockup のリファレンスファイルを参照するため、両方を同じ場所（グローバルまたはローカル）にインストールする必要があります。それ以外のスキルは単体で動作します。
使い方
Claude Code のチャットで /スキル名 と入力するだけで呼び出せます。自然言語での呼び出しもできますが、スキル名をコマンド形式で入力するのが最も確実です。
/create-mockup
/figma-audit <Figma URL>
/tailwind-review
必要な情報（URL や選択肢など）はスキル側から順番に質問されるので、URLなどの引数はなしで実行して大丈夫です。
スキル名だけだと英語で応答される場合があります。日本語で使いたいときはコマンドに続けて日本語を添えてください。
/create-mockup トップページを作りたい
/tailwind-review このファイルをチェックして
モックアップを作りたい
このFigmaをチェックして <Figma URL>
インストール方法
グローバル（どのディレクトリからでも使える）
cp -r ./* ~/.claude/skills/
ローカル（特定プロジェクト内のみ）
使いたいスキルのフォルダをプロジェクトルート直下の .claude/skills/ にコピーします。.claude/skills/ フォルダが存在しない場合は先に作成してください。
mkdir -p /path/to/your-project/.claude/skills
cp -r ./スキル名 /path/to/your-project/.claude/skills/
同名スキルがグローバルとローカルの両方にある場合はローカルが優先されるので、プロジェクトごとにカスタマイズしたい場合にも使えます。