全68スキル。
実務のワークフローをまるごと自動化する

figma-layer-rename

自動生成レイヤー名を検出し、確認のうえセマンティックな名前にリネーム。Sectionなどレイヤーの兄弟間で重複している名前も、オプションで差別化リネームの対象に

figma-audit

MCPを介したエージェントによるコーディング結果はフレームの構造に依存。選択フレームのAI実装精度を4観点で採点し、コンパクトなレポートを出力（詳細は追加要求で表示）

figma-component-audit

選択したコンポーネント/コンポーネントセット単体を、バリアント定義・コンポーネントプロパティ・レイヤー命名・Auto-layout・カラー/タイポグラフィトークンの5観点で採点

brief-me

デザイン着手前のビジネス要件ヒアリング。create-multi-pattern の実行前の詳細な要件定義に。結果の BRIEF はチャットに出力。ファイルとして保存して再利用可能

design-brief-me

デザイン着手前の設定ヒアリング。結果のDESIGN_BRIEFを`brief-me`のBRIEFと一緒に貼り付けると、後続スキルの質問がすべて省略され完全無人実行が可能に

hey-brief-me

brief-me と design-brief-me のどちらを実行するか複数選択で選び、選ばれたものだけを固定順（brief-me → design-brief-me）で実行するピッカー。複数回呼び出すのが面倒なときに

rewrite-me

選択したフレーム/セクション内のテキストを要件に合わせて書き直す。文章のボリューム調整、LP限定の行動経済学的説得軸にも対応。レイアウト・色・構造は一切変更しない

create-multi-pattern

複数レイアウトパターンを一括生成・比較。BRIEF を渡すことでより精緻な画面を生成可能。cognitive-ui-design と連携したトポロジーモデル割当にも対応

create-single-page

`create-multi-pattern`の無質問版。全て決定的なルールで自動確定し、単一ページを一発生成。質問を一切出さないため、連続プロンプトに繋げて無人実行できる

japanese-lp-seasoning

フルブリード演出・カルーセル/バナースライダー・縦書きを、静的フレームでの見た目として選択・提案（スクロール連動アニメーションは対象外）、簡易実装処理まで

figma-typescale

ベースサイズと比率を聞き、タイプスケールを生成。命名規則を「オリジナル」と「Tailwind」から選択可能。オリジナルはText Styleも作成、Tailwindは変数のみ

figma-tokenize

変数を使わずに値を直接ハードコードしている色・フォントサイズ・スペーシングを変数（トークン）化してバインド。テキストのスタイル化にも対応

figma-componentize

選択フレーム内の繰り返しパターン（ボタン・カード等）を検出してコンポーネント化を提案。バリアント生成、バリアントの変数化までを対話的に実行

figma-systematize

選択フレームを「レイヤー名整理 → トークン化 → コンポーネント化」の3段パイプラインで一括処理。実行モード（自動／各ステップ確認あり）選択可

figma-enhance

すでにトークン化・コンポーネント化済みのファイルをページ全体で監査し、さらなる改善点を検出・提案・実装まで自動で実行

hey-optimize-me

figma-layer-rename / figma-tokenize / figma-componentize / figma-enhance の中から実行したいタスクを複数選択で選び、選ばれたものだけを固定順で実行するピッカー

figma-design-md

DESIGN.mdとFigmaの変数・Text Style・コンポーネントを双方向に同期するスキル。Import/Exportどちらのモードでもプレビューページをオプションで生成

figma-mobile-convert

デスクトップサイズのフレームからモバイル版を生成。レイアウトやフォントサイズを自動調整し、必要に応じてタッチターゲットのサイズも調整

figma-contrast-check

選択フレーム内のテキストのWCAGコントラスト比（AA/AAA）を判定し、コンパクトなレポートを出力（詳細表示可）。自動修正にも対応

figma-alt-suggest

選択したフレーム/セクション内の IMAGE fill を持つノードをすべて検出し、実際にレンダリング結果を見た上で具体的な ALT テキスト案を提案

figma-annotate

Figma 純正のDevモード注釈（プリセットカテゴリ）を選択範囲に書き込み、コーディングエージェントへ構造だけでは伝わらない実装意図を渡す

figma-japanese-web-guideline

日本語サイトのデザインを Figma で作成・編集する際に、AIが陥りやすいデフォルト（中央揃えの折り返し崩れ、行間の広げすぎ、不自然な配色など）を補正するガイドライン

figma-i18n-translator

実装前のレイアウト確認用（本番の多言語実装・翻訳はコード側で行う想定）。選択したフレーム/セクションを言語ごとに複製し、INSTANCE内も含めて全テキストノードを翻訳

coding-prompter

デザインが完成した選択フレームを、コーディングエージェントに実装してもらうための実装プロンプトを生成する。使用したい技術スタックに合わせて細かな指示も可能

slot-table-maker

スロットテーブルを自動生成する。列数・行数をヒアリングし、固定ヘッダー＋可変データ行のテーブルコンポーネントシステムを生成する

agent-handoff

会話全体の履歴を確認したうえでハンドオフドキュメントを1つのフェンス付きコードブロックで出力。新しいチャットセッションの最初のメッセージとして貼り付けて作業を継続可

setup-astro

Astro v7 + Tailwind v4 の新規プロジェクトをセットアップ

setup-html

Vite + TypeScript + Tailwind のバニラHTMLプロジェクトをセットアップ

setup-react

Vite + React + TanStack Router の新規プロジェクトをセットアップ

mockup-pipeline

セットアップ → DESIGN.md → タイプスケール → モックアップまで一括実行

full-pipeline

mockup-pipelineに続けてmobile-polish → tailwind-review →（Astroなら）astro-doctor → DESIGN.md再生成まで自動実行する統合パイプライン

lp-pipeline

ランディングページ（LP）に特化した一気通貫パイプライン。目的・ターゲットに合わせてセクションを事前選択し、create-mockup → tailwind-review → mobile-polishまで自動実行

brief-me

モックアップ作成の前段として、ビジネス要件をヒアリングして BRIEF.md を生成する

create-mockup

FigmaなしでUIをゼロから構築。サイトの種類・デザインスタイル・ページ種別をヒアリングしてから実装を

create-multi-mockup

1回のリクエストで複数レイアウトパターンのモックアップをまとめて生成する

mobile-polish

既存モックアップにモバイル対応・ナビゲーションを追加

create-design-md

Google仕様の `DESIGN.md` をプロジェクトルートに生成

export-design-md

DESIGN.mdをビジュアルHTML / Astroページに変換

rewrite-me

実装済みページの目に見える文言をビジネス要件 BRIEF.md に合わせて書き直す

figma-audit

フレームのAI実装精度を4観点で検査してレポート出力。改善点を修正してAIレディなFigmaに

figma-component-audit

コンポーネント単位でのチェックはこちら。コンポーネント構造・バリアントを5観点で監査

figma-weather

実装品質を天気形式（☀️〜🌀）でスコアリング（figma-auditと中身は同じ）

figma-layer-rename

Figmaのフレーム/セクション全体を走査し、自動生成されたレイヤー名を意味のある名前にリネーム

figma-tokenize

Figmaのフレーム/セクション全体を走査し、直接指定された色・フォントサイズなどをトークン化して変数バインド

figma-contrast-check

Figmaのフレーム/セクション全体を走査し、コントラスト比をチェックしてレポート出力。自動修正まで

figma-node-check

use_figma実行前に読み込む必須チェックルール。「code-to-figma」の裏でも使われる最重要スキル

figma-workflow

Figma → 実装 → レビュー → 最適化をサブエージェントで逐次実行。作業環境が既にある場合に

figma-pipeline

figma-weather → セットアップ → 変数同期 → 実装まで一気通貫

figma-update-checker

Figmaノードが前回チェック時から変更されたかを検知し、.figma-cache.json に記録

figma-update-patch

figma-update-checker での変更検知後、ページ全体を作り直さず変更箇所だけをピンポイント修正

figma-to-tailwind

Figma VariablesをTailwind CSS v4の @themeトークンとして書き出し

tailwind-to-figma

Tailwind CSS v4の @themeトークンを指定されたFigmaへ変数として書き出し

code-to-figma

実装済みコードをFigmaに書き出し（キャプチャ〜コンポーネント生成まで4段階）。自動でエクスポート設定も

css-to-tailwind

オリジナルのプレーンなCSS / Sass・SCSS のコードベースから Tailwind CSS v4 への初回移行を支援。

tailwind-review

コードレビュー・v3→v4移行・アクセシビリティ構造の検証・レポート提出後、自動修正の適用まで

tailwind-typescale

Tailwind標準の書体サイズを変更する。ベースサイズとスケール比率を選んで@themeに適用

astro-i18n

Astro プロジェクトに国際化（i18n）対応を追加。ロケールルーティング・翻訳辞書化・スイッチャーまで一括対応

html-to-astro

HTMLプロジェクトを新規Astro v7 + Tailwind CSS v4へ移行。コンポーネント抽出・画像最適化まで一括対応

astro-doctor

Astroコードを最新仕様に照合しコンポーネント粒度を最適化

japanese-web-guideline

日本語Webサイト・ページの実装時に、AIが陥りやすいデフォルト設定を補正するガイドラインスキル

cognitive-ui-design

視線誘導トポロジーと認知バイアス対策で、定番レイアウト・無難な配色への安易な依存を崩すガイドライン

japanese-lp-seasoning

日本の商業LPで使われるフルブリード・カルーセル・スクロール連動アニメ等を、密度確認を挟んで選択・実装

click-to-fix

コードに不慣れな方でもブラウザ上をクリックして修正指示をそのまま実装。レスポンシブ対応

visual-polish

AIが自らスクリーンショットを撮りながら最大5回ループでコードを自律修正。作業監視エージェント付き

finish-me

既存モックアップに対して、最適化処理を対話形式で順番に実行する仕上げパイプライン

a11y-review

コード内の画像の alt テキストを実際に画像を読んで生成、構造的アクセシビリティもチェック・修正（環境不問）

pipeline-thinking

自分のインストール済みスキルを題材にパイプライン設計の考え方を対話形式で学ぶ教育スキル

pipeline-composer

選んだスキルを並べて依存関係・受け渡し情報を PIPELINE.md として出力