「KMRVID Claude Skills」は、こもりまさあきによる動画解説サイト「kmrvid.com」で販売されているオリジナルのClaude Code 向けカスタムスキル集です。
各スキルはホームディレクトリ直下の ~/.claude/skills/ に配置することで /スキル名 コマンドとしてマシン内のどこからでも呼び出せます。作業環境のドキュメントルート直下 .claude/skills/ にコピーすればディレクトリ内のみで利用可能です。優先度は ローカル＞グローバル なので、同名スキルが両方にある場合はローカルのものが呼び出されます。
下記のスキルは、Figma MCPを使ったコードの生成やデータ連携、他の各講座内で取りあげる技術スタックを前提としており、基本的には「Vite」で構成されたフロントエンドプロジェクト向けです。スタイリングは、AIとの親和性の高さ、修正のしやすさを考慮し、Tailwind CSS v4 を想定しています。「click-to-fix」など一部のスキルはそれ以外の環境でも動作するようになっていますが、基本的には Vite + Tailwind v4 のプロジェクトでの利用を想定しています。
Claude のモデルは必ずしも上位モデルが下位モデルより優れているとは限りません。モックアップスキルなどでも一般的なサイトであれば「Sonnet」で十分に実装可能です。上位モデルは複雑なUIやデザインの意図を理解するのに有利ですが、必須ではありません。
注意事項
- クロスプラットフォーム（OS）について MacおよびWindowsでの動作を考慮して作成していますが、環境依存のエラーが発生するケースがあります。特にWindows環境では、PowerShell、コマンドプロンプト、WSL（Windows Subsystem for Linux）など実行環境が多岐にわたるため、一部の処理が失敗することがあります。その場合は、AI（Claude）に「このエラーを解決し、現在の環境でスキルが動くように修正して」と直接伝えて対応させてください。
- 環境設定・MCPサーバー名の差異について Claude Code や Claude Desktop のインストール手順、および設定内容によっては、スキルが内部で呼び出す機能（MCPサーバーや外部ツール連携など）の名称が異なる場合があります。極力汎用的な記述を心がけていますが、正常に呼び出せない場合は、AIに設定ファイルの確認やスキルの修正依頼を行ってください。
- Claude Code 自体のアップデートについて Claude Code は開発スピードが非常に早く、頻繁にアップデートが行われます。そのため、バージョンによって挙動が変わる可能性や、解説動画内のUI仕様と異なる場合がありますのでご理解ください。
- 他のAIエージェントへの転用について Claude Code 以外のエージェント（CodexやCursorなど）で本スキルを活用したい場合は、Claude固有の仕様（ツール名やスキル呼び出し構文など）をご自身の環境に合わせて適宜書き換えてご使用ください。
- Node.jsのバージョンについて スキルの実行環境のNode.jsのバージョンもご確認ください。Vite 8の最低動作環境は Ver. 20.xもしくは22.x以上となっております。技術スタックの組み合わせによっては最低22.x以上を要求しますので、スキルが動かない・環境が動作しない場合はNode.jsのバージョンアップをお願いしたします。
Figma デザインを起点にコードを生成したい場合は Figma 系、コードからモックアップを組み上げたい場合は セットアップ系 + モックアップ作成系 を中心に使います。
| スキル | 概要 |
|---|---|
setup-astro |
Astro v6 + 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再生成まで自動実行する統合パイプライン |
| スキル | 概要 |
|---|---|
create-mockup |
Figma なしで UI をゼロから構築 |
create-multi-mockup |
複数レイアウトパターンを一括生成して比較 |
mobile-polish |
既存モックアップにモバイル対応・ナビゲーションを追加 |
create-design-md |
Google design.md 仕様の DESIGN.md をプロジェクトルートに生成 |
export-design-md |
DESIGN.md をビジュアル HTML / Astro ページに変換 |
| スキル | 概要 |
|---|---|
figma-audit |
フレームの AI 実装精度を 4 観点で検査してレポート出力 |
figma-component-audit |
コンポーネント構造・バリアントを 5 観点で監査 |
figma-weather |
実装品質を天気形式（☀️〜🌀）でスコアリング（figma-audit と中身は同じ） |
figma-node-check |
use_figma 実行前に読み込む必須チェックルール |
figma-workflow |
Figma → 実装 → レビュー → 最適化をサブエージェントで逐次実行 |
figma-pipeline |
figma-weather → セットアップ → 変数同期 → 実装まで一気通貫 |
figma-to-tailwind |
Figma Variables を Tailwind @theme トークンとして書き出し |
tailwind-to-figma |
Tailwind @theme トークンを Figma Variables として書き出し |
code-to-figma |
実装済みコードを Figma に書き出し（キャプチャ〜コンポーネント生成まで4段階） |