何だか9月は雨ばっかりで嫌になりますね。こもりです。
シルバーウィーク中にセコセコと準備をしていたのですが、「Agensi.io」という海外のスキルのマーケットプレイスの方からお声がかかったので、これまでパッケージとして販売していたスキルの単体販売を開始しました。Claude Code用のスキルをユニバーサルスキル化して登録・販売している形になるので、多くのエージェントでも動作するのではないかと(下記無料お試しの話も読んでね)。

サイト自体は英語、登録しているスキルも英語になりますが、スキル自体はいまどきのエージェントだと日本語で動かせば日本語でのやりとりになると思います(英語が出てきたら日本語にして、でOK)。無料版/有料版含めて現在15個のスキルを公開中です。ただ、残念ながら現在Figmaエージェント専用スキルの登録はできないので、Claude版をベースにしたユニバーサルスキルのみの展開です。
こちらの良いところは、AgensiのMCPサーバを各種エージェントに登録することで、有料版のスキルも3回まで事前に試せるところでしょう。「スキルは使ってみないとわからない(買えない)」ということがあると思いますが、こればっかりはお試し版で配布ということがなかなか難しいものです(配布したらそれはもうコピーでも何でもできてしまいますし、時限爆弾でファイルを破棄することもできません)。
ということで、これまでパッケージ版でしか提供していなかったスキルも順次Agensiに登録中です。また、基本的にユニバーサルスキル化しているので、Claude Code以外でも動作するのではないかと思います。他のエージェントをお使いの方はMCPを追加して試してみてください。
そんなこんなでAgensiへの出品登録に際して既存のスキルにもいろいろ調整をおこないました。更新以外にも今回は新しいスキル「create-jp-lp」「polish-me」の2本を追加しています。こちらFigma版に先行で追加したスキルのClaude版への移植になります。
polish-me はFigma版の「hey-polish-me」のブラウザ版ですが、アノテーションを追加するとかそういうことができないので、番号付きのレポートとその番号が付与されたページを表示するような仕掛けになっています。変更を適用したい場合は、番号を選んで「変更適用して」でどうぞ。


<今回の主なアップデート内容>
- 新スキル
create-jp-lpを追加(日本の商業LP向けに、業種・訴求ジャンルの判定から配色・CTA色・セクション構成・画像方針までを自動で決めてcreate-mockupに渡す) - 新スキル
polish-meを追加(実装済みのページ/セクションを、ソースを編集せずにレビューし、測定に基づく改善提案を番号ピンつきで報告するレポート専用スキル) -
figma-node-checkをfigma-tidy-up/figma-componentize/figma-enhance/code-to-figmaのreferences/known-pitfalls.mdに統合(単体スキルへの依存がなくなりました。新ルール2件・GRIDの注意点も追加) -
css-to-tailwind・figma-contrast-check・create-design-md・japanese-web-guidelineを改善
講座内には反映済です。双方の講座のスキル一覧、使い方など、以下の公開中のREADME.mdでご確認ください。
For English readers:
KMRVID Claude Skills update (2026.09.26)
New skills
- create-jp-lp — Decision logic for Japanese commercial landing pages. Reads BRIEF.md and picks the industry, appeal genre, palette, WCAG-AA CTA colors, section structure and image policy without asking, then hands off to create-mockup.
- polish-me — Report-only design review. It measures the running page at 1440px and 390px, including text-over-photo contrast from real pixels. Findings are pinned on the live page as numbered overlays. It never edits your source.
Updates
- figma-node-check is now folded into figma-tidy-up / figma-componentize / figma-enhance / code-to-figma as references/known-pitfalls.md. There is no standalone dependency anymore, and there are 2 new rules (21 in total).
- css-to-tailwind: the MCP is now optional, and every class is checked against bundled reference tables.
- figma-contrast-check: handles semi-transparent text correctly.
- create-design-md, japanese-web-guideline, figma-componentize: fixes and notes.
📦 Already using the course? Please re-download the latest package to get the new and updated skills.
新規スキル
create-jp-lp(Claude版)
日本の商業LP(ランディングページ)に特化した判断ロジックのスキルです。Figma版 create-jp-lp の姉妹スキルで、判断ロジックは共通です。
-
BRIEF.md(または呼び出し文)から、業種と訴求ジャンル(世界観訴求型/直販型/中間)を自動で判定 - 業種別の配色・CTA色(白文字でWCAG AAを満たすよう調整)、ターゲットに応じた見出しのウェイト、セクション構成、画像の運用方針(ストック写真+ライブテキストの見出し+スクリム)、連携スキルの強度を、質問なしで確定
- 実装そのものは
create-mockupに委譲(create-mockup本体は変更なし)。新規/既存プロジェクトの確認など、環境に関する質問だけが表示される - BRIEFに事実が無い実績・お客様の声などは、捏造せずダミーと明示
使い方: brief-me で作った BRIEF.md があるプロジェクトで /create-jp-lp を呼び出します(BRIEF.md が無くても、「エステのLP作って」のような呼び出し文から業種を判定して進みます)。依存スキルは create-mockup(必須)、brief-me・japanese-web-guideline・cognitive-ui-design・japanese-lp-seasoning(オプション)です。
注意点:
- Claude Codeには画像を生成・合成する手段がないため、見出し文言の画像への焼き込みはできません(ライブテキスト+スクリムで代替)。文字入り見出し画像が必要な場合はFigma版を使います
-
lp-pipeline(目的とセクションを聞きながら進める一気通貫パイプライン)とは別軸で、こちらは日本のLP特有の判断(配色・CTA・見出し・画像運用・演出の強さ)を自動化します
polish-me(Claude版)
実装済みのページ/セクションを、ソースを一切編集せずにレビューして、根拠のある改善提案をレポートするスキルです。
- 稼働中のページを 1440px と 390px(ビューポートのエミュレーション)で撮影し、コントラスト・フォントサイズ・タップ領域・横あふれなどを実測
- 写真の上の文字は、文字を隠して背景のピクセルを測り、基準を下回る面積の割合で報告
- 指摘には番号が付き、稼働ページに番号ピン(オーバーレイ)として重なる(Figmaのアノテーションに相当)
- 各指摘に、ファイルと行、観察した事実、根拠、期待される効果(仮説)、検証方法、影響範囲(このページのみ/共有コンポーネント)が付く
-
cognitive-ui-design・rewrite-me・create-jp-lpは、インストール済みの場合だけ選択肢として現れる
使い方: 開発サーバーを起動した状態で、/polish-me src/pages/index.astro のように呼び出します(「このページの改善提案を出して」でも可)。レポートを見て「#1 と #3 を実装して」と頼めば、通常のタスクとして実装します(新しい git ブランチを切ることを推奨)。ブラウザツール(chrome-devtools-mcp または claude-in-chrome)がなければ、ソースだけを読むモードで動きます。
注意点:
-
visual-polish(スクリーンショットの自律ループでコードを直す)とは役割が逆で、こちらは提案だけを行います
更新スキル
figma-node-check の統合 - figma-tidy-up / figma-componentize / figma-enhance / code-to-figma -(Claude版)
これまで別スキルだった figma-node-check(use_figma の実行結果がおかしいときの落とし穴集)を、使っていた4スキルの references/known-pitfalls.md として内蔵しました。
- 4スキルは単体の
figma-node-checkに依存しなくなりました(use_figmaの結果がおかしいときだけ、症状の早見表から読み込まれます) - 実運用で見つかった新ルールを追加し、全21ルールになりました
- ルール20:
<br>から取り込まれたテキストは末尾に見えない改行を持つことがあり、オートレイアウトで縦に並べると高さが2倍になる - ルール21: 内側の枠線の太さはオートレイアウトの余白に加算されるため、枠線付きのフレームは太さを引かないと少し大きくなる
- ルール20:
-
create-mockupとlp-pipelineから、figma-node-checkの存在確認・連携に関する記述を削除 - 単体の
figma-node-checkは廃止予定で、今後のリリースで配布から外します(すでにお持ちの方は、そのままでも動作に影響はありません)
figma-componentize(Claude版)
- GRIDレイアウトの親の中にある要素をインスタンスに置き換えると、1枚が新しい2行目に飛ぶ問題への対処(各子のセルを右から順に明示指定し、余った空行を削除)を追記
css-to-tailwind(Claude版)
- 位置づけを「完璧な移行」ではなく、素早い一次変換として明確化
- サードパーティ製MCP(更新が止まっており誤答もある)を任意にし、未接続でも停止せず続行するように
- ツールの有無にかかわらず、すべてのクラスを同梱の参照表(カラー・スケール)で検算するように
- 未変換のルールが残るスタイルシートは、リンクを外さず部分移行として残す。旧スタイルシートを残すと競合して旧ルールが勝つ点や、
text-*が line-height も設定する点への注意を追加 - preflight差分、要素・複合セレクタ、疑似要素、標準クラス優先、近似色の閾値の扱いを追加
figma-contrast-check(Claude版)
- 半透明のテキスト(例:暗い背景に白50%)を、Fill・ノード・祖先の不透明度を掛け合わせた実効値で判定するように。自動修正では色ではなく不透明度を上げます
- 従来は素のFill色だけを見るため、半透明テキストをPassと誤判定し、修正も効いていませんでした
create-design-md(Claude版)
- design.mdリンター(@google/design.md 0.4.0)がコンポーネントの
borderColorを未対応として警告するようになったため、borderなどのユーティリティカラーはdividerコンポーネントのbackgroundColor(height: 1pxと併用)から参照する方式に変更
japanese-web-guideline(Claude版)
- 段落で
balanceとtext-justifyを併用するときの注意と、prettyの限界を追記
入手・更新方法
KMRVID Claude Skills をお持ちの方は kmrvid-skills 圧縮ファイルの最新版を再ダウンロードして、更新された figma-tidy-up / figma-componentize / figma-enhance / code-to-figma / create-mockup / lp-pipeline / css-to-tailwind / figma-contrast-check / create-design-md / japanese-web-guideline フォルダと、新規の create-jp-lp / polish-me フォルダを ~/.claude/skills/ に上書きコピーしてください。