連日更新ばかりですみません、こもりです。
昨晩CSS Niteさんの「できることから始めるWebアクセシビリティ」をYouTubeで見ていたんですけどね、参加者の皆さんのコメントを見ていてふと思いついたのです。「色のコントラストチェッカーはFigmaのピッカーにもあるし、プラグインなんかもあるけど、これスキルにして自動修正までかけると楽かも…」と。
ということで作りました、「figma-contrast-check」スキル。
FigmaのフレームのURLを渡すことで、中のレイヤーにあるテキストの色と背景色を精査してレポート提出、ご希望に応じて自動修正まで可能です。「そこまでしないでチェックだけで良いよ」という方は、コアの部分だけを取り出した軽量版「figma-contrast-check-lite」をGitHubにて一般公開しましたので、こちらをご利用ください（いずれも要Figma MCPとの接続）。デザイナーさんは作る時に気をつければ良いと思いますが、そうでないコーダーさんはじめエンジニアの方は配慮できないデザイナーさんにチェックして指摘するとかできますからね（自動修正はしなくても）。
ちなみにですが、コードでモックアップを生成する「create-mockup」とかの各スキルには、もともと「セマンティックなHTMLを書いてね」「alt属性入れろよ」「アクセシビリティにも配慮してね」という指示が入っています。ただ、スターターキット側には入れてなかったので、今回各種スターターキット（`setup-*` スキルが呼び出すもの）にもその辺入れておきました。
以下、更新スキルです。
また、以前から公開している「create-design-md」スキルにも更新をかけました。こちらは、生成時にソースに付与された見出しや本文のウェイトに関するtailwindクラスを無視してファイルを生成していたので、ウェイトチェックをして関連クラスが存在しなければ「400（Regular）」に、存在すればそのウェイトを適用するように修正しました。
（追記）
これまでの「figma-layer-rename」は Frame 12 や Group 4 のような Figmaが自動生成した名前だけを検出してリネームしていましたが、今回コードを Figma に書き出したフレーム（Code to Canvas、Figma公式Chrome拡張機能でのキャプチャなど）で頻発する「重複レイヤー名の差別化」機能を追加しました
なお、講座内のスキルへは反映済です。各スキルの詳細はこのページの下にあります。
昨日もお知らせしたのですが、スキルがだいぶ増えましたので「スキル増量！ 週末ディスカウント」やっています。こちら今週定価を改定しましたが、今後ますます値上げする可能性があるので…この機会に是非。
スキル増量！週末限定ディスカウント
予定にはなかったんですが、思わずスキルを新規追加してしまった記念に？「スキル増量！週末ディスカウント」スタート。前回の「夏休み応援ディスカウント」に間に合わなかった…という方は前回ほどお求めになりやすくはないですがこの機会に。
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-contrast-check
Figma の FRAME / SECTION / COMPONENT / COMPONENT_SET の URL を渡すと、テキストごとの実際の配色（覆う兄弟レイヤーや祖先の Fill を合成して求めた実効的な前景色・背景色）を解決し、WCAG のコントラスト比をチェックしてくれるスキルです。
色のアクセシビリティはデザインツールの中で決まってしまうことがほとんどで、実装が終わってからコントラスト不足が見つかると、デザインとコードの間で手戻りが発生しがちです。このスキルは実装に進む前の Figma そのものに対して WCAG の計算式を直接適用するので、そうした手戻りを防げます。
適合レベルは AA（推奨・実務標準）と AAA（より厳格）から選択でき、レイヤーごとに Pass / Fail をサンプルテキストと解決後の色つきでレポートします。ボタン枠線やアイコンなど非テキスト要素のコントラストも参考情報としてチェックでき、コントラスト不足が見つかった箇所はユーザーの確認後、色相を保ったまま明度だけを調整する自動修正にも対応しています。
構造面の AI 可読性を監査する figma-audit と組み合わせて使うと、「AI が正確に実装できる状態か」と「実装結果が実際に読める配色になっているか」の両方をカバーできます。
更新スキル
create-design-md
コードベース探索モードで DESIGN.md を生成する際、見出しなどの fontWeight（フォントの太さ）が実装と異なる値になってしまうケースがありました。
Tailwind CSS v4 のプロジェクトでは、見出しの font-family や line-height はグローバルな CSS（@layer baseなど）にまとめて書かれていても、font-weight はグローバルには設定されず、ページ側で各要素に個別にユーティリティクラス（font-bold など）を当てる書き方が一般的です。これまでの create-design-md はメインの CSS ファイルだけを読んでタイポグラフィ情報を収集していたため、CSS 側に太さの指定がない場合に「見出しは太字が普通」という一般論で 700 のような値を当ててしまうことがありました。
修正後は、CSS ファイルに加えて実際のページ・コンポーネントのマークアップ（src/pages/index.astro など）も確認し、見出し・本文の要素に実際についている Tailwind のフォントウェイトクラスから fontWeight を判定するようになりました。該当箇所にウェイトクラスが一つも見つからない場合も、慣習で太めの値を推測するのではなく、実際の初期値である 400 をそのまま記録します。
この結果、DESIGN.md および export-design-md で生成されるプレビューが、実際のサイトの見た目により忠実になります。
figma-layer-rename
これまでの figma-layer-rename は Frame 12 や Group 4 のような Figmaが自動生成した名前だけを検出してリネームしていました。今回、これとは別種の問題に対応する新しいステップ（Step 3.5）を追加しました。
Section や Container のような名前は、それ自体は自動生成名ではなく「本物の意味のある名前」です。しかしヒーロー・料金・フッターなど、中身がまったく違う複数のセクションが全部揃って Section という同じ名前になっていると、名前としての意味はあっても、レイヤーパネル上ではどれがどれだか見分けがつきません。これは特に、コードを Figma に書き出したフレーム（Code to Canvas、Figma公式Chrome拡張機能でのキャプチャなど）で頻発します（ノードとして生成した場合は起きません）。
新しい Step 3.5 はオプション機能で、実際に重複が見つかったときだけ確認が入ります。どこまで深く見るか（ルート直下のみ／2階層下まで／4階層下まで／自由入力でさらに深くやフレーム全体まで）を選べるほか、同じ形のカードやリスト項目のような「意図的な繰り返し」は自動で除外し、内容が実際に異なるものだけを重複候補として提示します。また、キャプチャ由来のパディング専用ラッパーフレーム（Section:margin など）が深さのカウントを狂わせないよう、そうしたラッパーを自動的に透過して扱うようにしています。
実際にCode to Canvas・Figma公式Chrome拡張機能・Figma Design Agent（generate_figma_design）の3種類のキャプチャで検証済みです。
入手・更新方法
kmrvid-skills の最新版を再ダウンロードして、新規追加された figma-contrast-check フォルダと、修正・機能追加が入った create-design-md／figma-layer-rename フォルダをそれぞれ ~/.claude/skills/ にコピー（create-design-md・figma-layer-rename は上書き）してください。すでに DESIGN.md を生成済みの場合は、create-design-md を再実行して再生成することをおすすめします（Tailwind でウェイトクラスを直接指定しているプロジェクトほど影響が出やすいです）。