またまたスキルの追加です。こもりです。
今回は、Astroプロジェクトにいつでも多言語対応を追加できる新スキル「astro-i18n」、Figmaの新機能「Design Agent」に関する発見とそこから生まれた新しいスキルセット「kmrvid-skills-figma」、既存スキルの更新内容をまとめてお届けしますね。
なお、このFigmaのDesign Agent専用のスキルセットは、販売中の「KMRVID Claude Skills」とは別に、機能限定版のパッケージとして販売予定です。準備ができるまでしばらくお待ちください。
では、早速いってみましょう。
あ、講座内へは反映済です（2026.7.29 5:00）
新規スキル
astro-i18n
すでに構築済みの Astro プロジェクトに、多言語対応（国際化・i18n）を後付けするスキルです。react-i18next のような外部ライブラリは一切使わず、Astro 本体が公式にドキュメント化しているパターン（i18n 設定 + ファイルベースのロケールルーティング + src/i18n/ui.ts の翻訳辞書）だけで完結します。
日本語サイトに後から英語版を足したい、というのはよくある要望ですが、いざ手を動かすとなると「ルーティングをどう分けるか」「既存 URL を壊さずに済むか」「ハードコードされたテキストをどう辞書化するか」「ブログ記事のようなコンテンツコレクションはどう扱うか」など、決めることが地味に多く、一つずつ確認しながら進めると時間がかかる作業です。このスキルはその一連の流れを、質問形式で要点だけ確認しながら一括で進めます。
まず既存コンテンツから現在のデフォルト言語を自動検出し（lang 属性、なければ本文の内容から推測）、そのうえで「追加する言語」「デフォルトロケールに /ja/ のような URL プレフィックスを付けるか（既存サイトなら付けない方が安全です）」「Claude でその場で翻訳するか、まず TODO: translate のプレースホルダーだけ用意するか」「言語スイッチャーと hreflang タグを追加するか」「URL のスラッグ自体も言語ごとに翻訳するか（/en/about/ → /fr/a-propos/ のような形）」を確認します。回答が決まれば、astro.config.mjs の設定、ページのロケール別フォルダへの再構成、UI 文字列の翻訳辞書化、<html lang> の設定までを一気に進めます。
ブログ記事などのコンテンツコレクションがある場合は、本文をまとめて機械翻訳してしまうのではなく、ロケール別フォルダの構造とプレースホルダーだけを用意するオプションになっています。長文コンテンツの翻訳はページの見出しやボタンラベルとは重みが違う作業なので、構造だけ用意して翻訳自体は別途レビューを挟みながら進める設計です。また、日本語サイトで本文に text-justify（均等揃え）を使っている場合、それをそのまま英語などの言語に持ち込むと単語間隔が不自然になってしまうため、ロケールごとに自動で text-start に切り替える細かい調整も入っています。
setup-astro や create-mockup の直後に限らず、すでに運用中のサイトに対しても、思い立ったタイミングで単体で呼び出せます。
新規スキルセット：Figma版スキル5種を追加
今年6月でしょうか？、Figma Designに新しく追加された「Design Agent」を使えば、Figma Makeのようなプロンプトを使って作りたいものをAIに指示して作れるようになりました。で、このDesign Agentを見ていたらカスタムスキルの登録ができることに気付きましてね…。
「もしや？、これClaude Codeのスキルそのままいけるんじゃ？」と試しに放り込んでみたところ、これまで作ってきた Claude 用スキルの一部はそのまま動くことがわかりました。Figma 側にも自前のエージェントが動いていて、外部ツールに依存しないスキルであれば SKILL.md をそのまま渡すだけで実行できてしまいます。
ただし全く同じというわけではありませんで。試してみると、Figma 環境では Claude Code 側で使っている MCP ツールの代わりに evaluate_script という Plugin API 実行ツールが使われていること、また Figma URL を貼るのではなくキャンバス上で選択したノードがそのまま渡されるケースが多いことがわかりました。加えて、Figma のサンドボックスに書き込んだファイルは再起動すると消えてしまうため、BRIEF.md のようにファイルを書き出す設計のスキルは、チャット上に内容を出力する形に作り直す必要がありました。
そこで、この環境差分を踏まえてゼロから書き直した Figma 専用版を「kmrvid-skills-figma」というスキルセットとしてまとめ、「kmrvid-skills」の中に収録しました。
収録しているのは以下の5スキルです。
-
figma-layer-rename — 自動生成されたレイヤー名（
Frame 12など）を検出し、意味のある名前にリネームします。`Container` `Section` などの重複にも対応 - figma-audit — 選択したフレームの AI可読性を4観点で採点し、Figmaの狭いチャットウィンドウに収まるコンパクトなレポートを出力します（詳細は「詳細を見せて」で追加表示）
- figma-tokenize — 変数を使わずにハードコードされた色・フォントサイズ・スペーシングを変数（トークン）化してバインド（紐付け）します
- brief-me — デザイン着手前のビジネス要件ヒアリング。結果は上記の理由によりチャットに出力します。`create-multi-pattern` を実行する前に要件をまとめることでより精緻な画面を生成可能
- create-multi-pattern — 複数レイアウトパターンを一括生成・比較します（create-multi-mockupのFigma版と考えてください）。`cognitive-ui-design` `japanese-web-guideline` の併用可（本体スキルがそのまま使えます）
なお cognitive-ui-design や japanese-web-guideline のようにファイル書き出しやツール呼び出しを伴わない「ガイドライン型」のスキルは、無改変のまま Figma に登録して問題なく使えることも確認できています。
「create-multi-pattern」スキルを登録する際は、Claude Code用の上記2つの補助スキルも一緒にカスタムスキルとして登録することでスキル実行時に呼び出すことが可能です。
カスタムスキルの登録はDesign Agentの画面の下から。
登録したスキルはオンオフの切り替え、削除も可能。スキル自体はDesign Agentの中のエージェントに依頼して修正も可能です。動作がおかしいなど、気に入らないところは変えてください。
これでFigma側からでもこれまでの「create-multi-mockup」同様にAIエージェントが無難に処理しがちな複数のレイアウトパターンの生成をまったく異なるレイアウトとして作り出して比較する、任意のセクションのレイアウトパターンの生成、パターンAとBのミックスみたいなことができるようになりました。使い勝手は同じです。できあがるものがFigmaなのか、コードなのかの違いしかありません。
更新スキル
figma-layer-rename
上記の Figma 版を実際に使ってテストする中で、既存の「figma-layer-rename」にも見つかった改善点があります（GitHubで公開中のものも更新済）。
これまで、アイコン（矢印アイコンなど、複数の Vector パスを組み合わせて1つの絵柄を作っているもの）を含むフレームに対してこのスキルを実行すると、アイコンのコンテナ自体（例: Icon）だけでなく、内部を構成する個々の Vector パス（例: Arrow Head / Arrow Stem）まで律儀に検出してリネームしようとしてしまう挙動がありました。パス単位の名前は実装上の詳細であり、個別に意味を持つレイヤーではないため、今回のアップデートでコンテナ止まりで処理を打ち切るよう修正しています。
あわせて、以下の細かい改善も加えました。
- リネームの命名規則が未定義だった点を修正——ファイル内の既存レイヤー名の傾向（kebab-case か Title Case かなど）に合わせ、前例がなければ PascalCase をデフォルトにするようにしました
- 候補が30件を超える大きなフレームでは、一括確認とセクションごとの段階確認を選べるようにしました
- Code to Canvas で生成されたファイル特有の
:margin/:paddingラッパー折りたたみ処理が、該当しないファイルにも無条件に走っていた点を修正しました
Figma版・通常版どちらのfigma-layer-renameにも反映済みです。
入手・更新方法
astro-i18n / figma-layer-rename の更新について： kmrvid-skills.zipの最新版を再ダウンロードして、新規追加された astro-i18n フォルダと、更新された figma-layer-rename フォルダを ~/.claude/skills/ にコピーしてください。
Figma版スキルセットについて： 同梱されている「kmrvid-skills-figma」ディレクトリの中から、Figmaで使いたいスキルの SKILL.mdを Figma のカスタムスキル登録機能に登録してください。フォルダをそのままコピーする形式ではなく、スキルごとに個別登録する点が通常版と異なります。