収録スキル一覧
全36スキル。
実務のワークフローをまるごと自動化する
セットアップからモックアップ作成、Figma連携、Tailwindの整理、仕上げの品質チェックまで、Web制作の一連の工程をカテゴリごとに整理しました。使い方だけでなく作り方の解説も付いているため、自分の業務に合わせたカスタマイズや新規スキル開発の参考にもなります。
セットアップ系
新規プロジェクトを立ち上げる
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まで自動実行
モックアップ作成系
コードからUIを組み上げる
create-mockup / create-multi-mockupは、cognitive-ui-design（定番レイアウトからの脱却）やjapanese-web-guideline（日本語サイトの実装補正）と組み合わせることで、AIにありがちな凡庸な仕上がりを避けられます。
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系
Figmaと連携する（Tailwindベース）
Figmaのフレーム構造は、そのままコードの構造に反映されます。先にfigma-auditでAI実装精度を診断し、スコアが低い箇所をFigma側で直してから実装に進むと、修正が少なく済みます。
figma-audit
フレームのAI実装精度を4観点で検査してレポート出力。改善点を修正してAIレディなFigmaに
figma-component-audit
コンポーネント単位でのチェックはこちら。コンポーネント構造・バリアントを5観点で監査
figma-weather
実装品質を天気形式（☀️〜🌀）でスコアリング（figma-auditと中身は同じ）
figma-layer-rename
Figmaのフレーム/セクション全体を走査し、自動生成されたレイヤー名を意味のある名前にリネーム
figma-tokenize
Figmaのフレーム/セクション全体を走査し、直接指定された色・フォントサイズなどをトークン化して変数バインド
figma-node-check
use_figma実行前に読み込む必須チェックルール。「code-to-figma」の裏でも使われる最重要スキル
figma-workflow
Figma → 実装 → レビュー → 最適化をサブエージェントで逐次実行。作業環境が既にある場合に
figma-pipeline
figma-weather → セットアップ → 変数同期 → 実装まで一気通貫
figma-to-tailwind
Figma VariablesをTailwind CSS v4の @themeトークンとして書き出し
tailwind-to-figma
Tailwind CSS v4の @themeトークンを指定されたFigmaへ変数として書き出し
code-to-figma
実装済みコードをFigmaに書き出し（キャプチャ〜コンポーネント生成まで4段階）。自動でエクスポート設定も
Tailwind系
スタイリングを整える
css-to-tailwind
オリジナルのプレーンなCSS / Sass・SCSS のコードベースから Tailwind CSS v4 への初回移行を支援。
tailwind-review
コードレビュー・v3→v4移行・アクセシビリティ構造の検証・レポート提出後、自動修正の適用まで
tailwind-typescale
Tailwind標準の書体サイズを変更する。ベースサイズとスケール比率を選んで@themeに適用
仕上げ・改善系
実装時、実装後の品質を上げる
japanese-web-guideline
日本語Webサイト・ページの実装時に、AIが陥りやすいデフォルト設定を補正するガイドラインスキル
cognitive-ui-design
視線誘導トポロジーと認知バイアス対策で、定番レイアウト・無難な配色への安易な依存を崩すガイドライン
japanese-lp-seasoning
日本の商業LPで使われるフルブリード・カルーセル・スクロール連動アニメ等を、密度確認を挟んで選択・実装
click-to-fix
コードに不慣れな方でもブラウザ上をクリックして修正指示をそのまま実装。レスポンシブ対応
visual-polish
AIが自らスクリーンショットを撮りながら最大5回ループでコードを自律修正。作業監視エージェント付き
finish-me
既存モックアップに対して、最適化処理を対話形式で順番に実行する仕上げパイプライン
astro-doctor
Astroコードを最新仕様に照合しコンポーネント粒度を最適化
パイプライン設計支援系
自分のパイプラインを設計したいときに
pipeline-thinking
自分のインストール済みスキルを題材にパイプライン設計の考え方を対話形式で学ぶ教育スキル
pipeline-composer
選んだスキルを並べて依存関係・受け渡し情報を PIPELINE.md として出力
購入前に動作を試したい方向けに、軽量版スキル「create-mockup-lite」をGitHubにて無料公開しています。
「create-mockup-lite」「click-to-fix」の紹介と作業環境についてこちらのYouTubeで動画を用意しています。