毎日暑い日が続きますね。こもりです。
「KMRVID Claude Skills」にまた新たに「figma-layer-rename」「figma-tokenize」というFigmaに関係したスキル、オリジナルCSSからAIエージェントが得意とするTailwind CSSへの移行の手助けをする「css-to-tailwind」スキルが仲間入りしました。それに伴い既存の tailwind-review の対象範囲も少し整理しました。詳細については下記をご覧ください。
講座内のスキルは更新済です。
先日スキルエコシステム相関図をGeminiに描いてもらったのでこちら参考までにおいておきますね。制作工程の至る所で使えるスキルで一杯になりました（2026年7月24日現在36個）。
講座に付属しているスキル全貌がわかるREADME.mdはこちら
スキル増量！週末限定ディスカウント
予定にはなかったんですが、思わずスキルを新規追加してしまった記念に？「スキル増量！週末ディスカウント」スタート。前回の「夏休み応援ディスカウント」に間に合わなかった…という方は前回ほどお求めになりやすくはないですがこの機会に。
2026年7月26日23:59まで有効なディスカウントコード「FK05ANQ7HZHZ」を発行しましたので（定価より4,400円オフ）、チェックアウト時にコードを入力していただくか、コードにあるリンクから商品をカートに入れてチェックアウトにお進みください（先にLINEの新規友だち登録すると、さらに10%オフになるコードも併用可）。
前回作ったランディングページの内容も新しくなりました。
https://kmrvid-claude-skills.gaspanik.workers.dev/
ランディングページの全データ公開してます
ページを改修したついでに「tailwind-review」とか「astro-doctor（mediumレベル）」をかけて再度最適化処理をして、「create-design-md」で `DESIGN.md` をコードから自動生成し「export-design-md」でプレビューデータも作りました。
id-claude-skills.gaspanik.workers.dev/design-preview/
そしてこのランディングページのデータをGitHubにて全公開しました。要件を「brief-me」でまとめた `BRIEF.md` とかそういうのも入っています。 `README.md`に仕様含めいろいろ書いてありますので、興味のある方はご参考まで。お勉強用途にでもどうぞ。
クローンもしくはzipでダウンロードして、`npm i` して `npm run dev` で手元で再現可能です。 Astroのコードはいろいろ最適化されていますが、直接コード触って中身の修正をせずとも、AIにあらかた任せてもこれぐらいのことはできるよ、ってことで。
新規スキル
Figma系の2つのスキルの実行内容については、Figma内部のAIを使って現状AIクレジットを消費せずに適用可能です。ただ、今後その辺がどうなるか不明であることと、誰もが必ずFigmaを起動して実行するとも限らない（FigmaのフレームURLさえわかればコンソールからでも使える）のでスキルを用意した次第です。
一般的なCSSをTailwind CSSのクラスベースに変換するスキルは、Claudeに変換指示を与えても可能ですし、サードパーティのMCPを単独で飛び出しても実行可能です。しかし、それぞれの癖というのもあって片手落ちということもあります。そこで、双方を使いながら極力見落としを減らせるスキルとして仕上げました。
figma-layer-rename
Figma の FRAME または SECTION の URL を渡すと、ノードツリー全体を走査して Frame 12・Group 4・番号なしの素の Frame のような自動生成レイヤー名を検出し、種類・位置・子要素の内容から意味のある名前を提案してくれるスキルです。
- 提案は確認テーブルで一覧表示され、
yesで全件適用、または番号を指定して部分適用できます - コンポーネントのインスタンス内部（
INSTANCEのサブツリー）は自動的にスキップします。インスタンス内でリネームしてもローカルの上書きになるだけでメインコンポーネントには反映されないためです - コンポーネント／コンポーネントセットの URL には対応していません（フレーム／セクション全体のレイヤー整理専用です）
figma-tokenize
figma-layer-rename と組み合わせて使う、ハードコードされた Figma の値をトークン化、変数の値を使用箇所に紐付ける（バインド）スキルです。もともとは Figma「Design Agent」やChrome公式機能拡張、Figma MCPの generate_figma_design ツールでのキャプチャの後処理として作りました。
前述の各ツールに関係なくキャプチャされたデータの内部レイヤーは Frame/Line だらけ、色やフォントサイズは全部ハードコードで変数が一切使われていません（Design Agentのプロンプトでも変数化などは可能です）。このスキルはそれだけが対象ではなく、デザイナーが手作業で作った雑然としたFigmaファイルのフレームにも同じように使えます。
- 起動するとまず「レイヤー名の整理（figma-layer-rename）も一緒に行うか」を聞かれます。「はい」を選ぶと figma-layer-rename が呼ばれ、上記の一連の流れがそのまま実行されます
- 続けて、フレーム内で使われている色をスキャンし、彩度・明度から
brand/accent・neutral/500のようなトークン名を提案 → 確認 → Figma Variables として作成・バインドします - テキストサイズも同様にスキャンし、
text/16のようなトークンとして変数化・バインドします - スペーシング（余白・間隔）は、すでに Auto Layout が使われている箇所はそのまま変数化してバインドしますが、そうでない absolute 配置の箇所は「よく使われている間隔の候補」を参考情報として提示するだけで、変換やバインドは行いません。レイアウト構造そのものを変更することは一切しない設計です
- 作成した色・タイポグラフィの変数は、既存の
figma-to-tailwindスキルでそのまま Tailwind のテーマに取り込めます - こちらもコンポーネント／コンポーネントセットの URL には対応していません
css-to-tailwind
まだ Tailwind を使っていないコードベース（手書きのプレーン CSS、あるいは Sass/SCSS）を Tailwind CSS v4 のユーティリティクラスに移行するスキルです。tailwind-review が「すでに Tailwind で書かれたコードのレビュー・v3→v4 移行」を担当するのに対し、こちらは「まだ Tailwind を使っていないコードを初めて Tailwind に移す」導入前の工程を担当する、いわば姉妹スキルです。
- 変換にはサードパーティ製の MCP サーバー（
tailwindcss-mcp-server）を使用します。導入されていない場合は案内を出して一旦停止するか、その場で明示的に選んだ場合のみ精度は落ちますが Claude 自身の知識だけで続行するかを聞かれます - Sass のネスト・変数・mixin は
npx sassで一旦フラットな CSS に変換してから処理します（プロジェクトに永続的な依存関係は追加されません） - 複雑なセレクタの組み合わせや
@keyframesアニメーションなど、うまく変換できないものは無理にクラス化せず、「手動で確認してください」という形でレポートに残します - 変換が終わったスタイルシートの
<link>は削除ではなくコメントアウトするだけなので、元の CSS/SCSS ファイル自体はそのまま手元に残ります -
プロジェクトルートに
CLAUDE.mdがある場合は Tailwind 運用ルールのセクションを追記し、まだ無い場合は新規に作成します（既存の内容を書き換えることはありません） - あくまでベストエフォートの機械的な変換のため、見た目や挙動が完全に同じになる保証はありません。実行前後に、バックアップと目視確認を促すメッセージが表示されます
- 移行が終わったら、それ以降の継続的なメンテナンスは
tailwind-reviewにバトンタッチする設計です
更新スキル
tailwind-review
上記の css-to-tailwind 追加にあわせて、tailwind-review の説明文を「すでに Tailwind で書かれているコードが対象」であることが分かるように整理しました。動作自体に変更はありませんので、特に入れ替えの必要はありませんが若干の修正が入っています。
入手・更新方法
kmrvid-skills リポジトリの最新版を再ダウンロードして、figma-layer-rename / figma-tokenize / css-to-tailwind の各フォルダを ~/.claude/skills/ にコピーしてください。tailwind-review をすでにお使いの場合は、念のため上書きコピーして説明文を最新にしておくことをおすすめします。