Skills
エージェント向けにパッケージ化された専門スキルと手順を 97,501 件掲載。コマンド 1 行でインストールできます。
デザイン・UI
Penpot ファイルから DESIGN.md デザインドキュメントファイルを抽出する：design-md 形式のポータブルな markdown 仕様（カラー/タイポグラフィ/角丸/スペーシング/コンポーネントのトークンマップを含む YAML frontmatter と、Overview、Colors、Typography、Layout、Shapes、Components、Do's & Don'ts、Iteration Guide、Known Gaps の文章セクション）。ファイルの実際のトークン、ライブラリアセット、サンプリングしたコンポーネントスタイルに基づくもので、決して創作しない。キャンバスに対しては読み取り専用で、ローカルの markdown ファイルを 1 つ書き出す。トリガー：'generate DESIGN.md'、'create a design.md'、'document the design system as markdown'、'export design guidelines'、'extract design documentation'、'design system spec file'、'make a style guide file from this design'。
slides-grab（NomaDamas、MIT）を使ってエージェントとともに美しい HTML/CSS プレゼンデッキを生成・視覚的に編集・エクスポートする — オープンソースの Claude Design 代替であり、Claude Code / Codex におけるスライド用の最良のハーネス + エディター + リンター。ルーティング優先の単一スキルで、Plan（エージェントがアウトラインを作成）、Design（各スライドは自己完結した slide-XX.html）、Edit（純粋な JS のブラウザエディターで、任意の領域に bbox をドラッグしてその領域だけをエージェントに書き換えさせる、またはテキスト/サイズ/太字を手動調整）、Export（capture-or-print PDF、スライドごとの PNG（Instagram 1:1 card-news を含む）、さらに実験的/不安定な PPTX と Figma にインポート可能な PPTX）をカバーする。インストール経路（npm パッケージ + npx skills add、または clone）、デッキのワークスペース（--slides-dir、マルチデッキ decks/<name>/）、35 種類の同梱デザインスタイルのいずれか、対応するアセットフロー（ローカルの ./assets/<file> のみ — 画像は god-tibo-imagen/codex/nano-banana、動画取得は yt-dlp、tldraw .tldr→SVG）を選択し、エクスポート前に slides-grab validate で検証する。
味を最優先し、AI っぽさを排したワークフローで、あらゆる Web またはアプリのインターフェースを設計・改善し、その結果をプロジェクトの DESIGN_SYSTEM.md に記録して、以降のすべてのページで視覚的な一貫性を保つ。汎用：ランディング/マーケティングページ、ダッシュボード/管理画面、プロダクト/アプリ UI、EC/ストア、コンテンツ/編集/ドキュメント、モバイル/ネイティブアプリ、リデザイン、デザインシステムのみのタスクのいずれかにブリーフを適切なルールへ振り分ける。エンジンは Web ファースト（CSS/tokens/Tailwind）。iOS/Android ではそのエンジンの上にプラットフォームの慣習に関するガイダンスを重ね、深いプラットフォームコンポーネントの作業は HIG/Material に委ねる。ユーザーがいずれかのインターフェースの設計、構築、リデザイン、監査、磨き込みを求めたときに使用する。特にブランド名、カラーパレット、ムード/スタイル、フォント、アニメーション、カードスタイル、画像ソース、フレームワーク、プラットフォーム（Web / iOS / Android）に言及した場合に適する。トリガー：「ランディングページを設計して」「ダッシュボードを作って」「モバイルアプリを設計して」「ストア / 商品ページ / チェックアウトを作って」「ドキュメントやブログサイトを設計して」「これをリデザインして」「UI を高級感のある見た目にして」「デザインシステムを作って」「UX を監査して」「デザインを整理して」「デザインの参考 / インスピレーションを探して」「もっと速くして」「パフォーマンス / Core Web Vitals を改善して」。
ライブのウェブページをローカルの Next.js + Tailwind CSS プロジェクトにクローンし、迅速なプロトタイピングを行う。ユーザーが URL やスクリーンショットを共有し、そのページをローカルで複製、再設計、または反復したいときはいつでもこの skill を使用する — 「clone this site」「make a prototype based on this page」「recreate this UI」「build something that looks like this」と言う場合でも、単にリンクを貼ってコード化を依頼する場合でも同様。ユーザーが新しいページを追加したい、既存のページを変更したい、または以前にこの skill で作成したプロトタイププロジェクトを拡張したい場合にも発動する。ユーザーが「I want to build a page like X」と言い、参考リンクや画像を添えるだけの場合でも、この skill は適用される。
1 枚または複数の画像を PSD レイヤーファイルに整理する作成・変換 skill です。ユーザーが image2psd、画像から PSD への変換、複数画像の PSD への結合、ポスター/デザインの複数レイヤーへの分割、白背景の透明化、色クラスタリングによるレイヤー分割、Codex/AI 生成画像の要素画像への分割と PSD への再合成、または layered PSD や Photoshop/Photopea で編集できるレイヤー化されたラスターファイルの出力を必要とする場合に、この skill を使用してください。Codex で使用する場合、デフォルトで imagegen skill と組み合わせます。まず Codex の視覚/画像生成能力で要素を理解・補完・再構築し、次に本 skill のスクリプトで PSD を生成します。
CI + Gistパイプラインを通じて、コードトークンとページ構造をFigmaに同期。依頼が「Figma同期パイプラインのセットアップ」「コードをFigmaに同期」「デザイントークンをFigmaにエクスポート」「ページウォーカーの更新」「tokens-sync-to-figmaプラグインの接続」の場合、パスに `figma-sync.config.json`、`figma-export.json`、`scripts/tokens-to-figma/`、`.github/workflows/figma-sync.yml` が含まれる場合、またはfigma-syncのGistやCIの状態を確認する場合に使用。変数の作成やノードの編集（`figma-use`を使用）など、エージェントによる単発のFigma書き込みや、画面の生成（`figma-generate-design`を使用）には使用しない。
Figma COMPONENT_SET をコード生成のためのステートマシンとして分析する — バリアント軸（状態/サイズなど）を抽出し、状態バリアントを CSS 疑似クラス（hover→:hover、focus→:focus-visible、disabled→:disabled、error→[aria-invalid]）にマッピングし、バリアントごとの視覚的差分（各状態で変化する部分のみ）を計算する。Figma のバリアントセットからインタラクティブなコンポーネントを生成する場合に使用 — トリガー：'analyze this component set'、'turn these variants into CSS states'、'generate a button/input/checkbox from Figma variants'、'what changes between the hover and default state'、'map Figma variants to component props'、'extract the state machine for this component'。バインドされた変数を token 名に解決する。ネイティブ MCP の get_design_context/get_metadata ではカバーされない。これらはバリアント軸→CSS ステートマシンを提供しない。
既存のフロントエンドインターフェース（ローカルのソースコード、または URL で指定された公開中のウェブサイト）のユーザビリティを評価し改善する。ユーザーが既存のフロントエンドコードまたは公開中のウェブサイトの URL を持ち、なぜユーザーが使いにくいと感じているのかを理解したい、ユーザビリティの問題を見つけたい、もっと使いやすくしたいと考えているときはいつでもこのスキルを使用する。"review my UI"、"audit my interface"、"check accessibility"、"evaluate my design"、"improve the UX"、"audit this website"、"review https://example.com" のような直接的な依頼でトリガーするほか、"users keep abandoning this form"、"something feels off about this page"、"we're getting complaints about the checkout flow"、"conversion dropped after the redesign"、"people say it's confusing"、"make this less painful to use" のような間接的な症状の説明でもトリガーする。フロントエンドのコンポーネント、ページ、URL があり、問題がバグやパフォーマンスの問題ではなく、ユーザビリティ、ユーザーの混乱、不十分なインタラクションデザインのように聞こえる場合は、このスキルを使用する。新しいインターフェースをゼロから構築する場合、パフォーマンス最適化、バックエンドのロジックには使用しない。
FUI web モジュールを開発、構造化、レビュー、または変更する場合にこの skill を使用します。メタデータ駆動型アーキテクチャ（index.vue の <fui-app> 設定ブロック）、必須のグリッドレイアウトシステム、アクションプロトコル、環境を意識したワークフロールールに関する厳格なガイドラインを提供します。エディタとチャットの両方のコンテキストで正規のモジュール構造を適用します。ワークスペースにアクセスできるエディタまたは拡張機能のコンテキストでは、実際のモジュールファイルを扱います。ワークスペースにアクセスできないチャットまたは agent-chat のコンテキストでは、貼り付けられた成果物を基に作業し、同時にレスポンス内で同じモジュール構造を仮想化します。
Hostinger Headlessの構築フローを統括します。ドメイン名を指定した1つのプロンプトから、ユーザーのHostingerアカウント上に実際のウェブサイトを構築してデプロイします。段階の流れと状態の取り決めを管理し、接続、状態確認、調整、プロビジョニング、コンテンツモデル、デザイン、フロントエンド、検証、デプロイ、完了の順に各段階を進めます。トリガー：<domain>のヘッドレスサイトを構築、サイトを作って、ウェブサイトを作成、Hostingerにデプロイ、Hostingerでホスト、このプロジェクトをHostingerに接続。
プロジェクトに marko-ui の components.json がある場合、または marko-ui コンポーネント（Zag.js を基盤とする Marko 6 向けの shadcn スタイルのコンポーネント）のインストール、使用、編集、デバッグを行う場合に使用 —— コンポーネントの検索、API の確認、marko-ui CLI での追加、レンダリングはされるが挙動がおかしいコンポーネントの修正、新規プロジェクトでの marko-ui のセットアップ。一般的な Marko 6 の構文（marko6 を参照）やルーティング（marko-run を参照）には向かない。
(NS) 際立ったプロダクション UI — レイアウト、タイポグラフィ、モーション、磨き込み。AI っぽい美学を避ける。ページ、コンポーネント、ダッシュボード、KPI/分析ビュー、チャート、フォーム、デザインブリーフの作業、または UI/UX の改善を行うときに使用 — たとえ "design" と言われなくても。存在する場合は docs/context/design-brief.md を読み込む。バックエンドのみ、要件の記述、完全な SDD(ns-spec-driven)には使用しない。
Penpot のデザインを実装コード（ソースコンポーネントまたは Storybook ストーリー）と照合してレビューし、構造化された DRIFT レポートを出力する。エンジニアがビルドがデザインと一致しているかを確認する必要があるときに使用する：選択範囲から HTML/CSS を抽出し、その tokens/構造/状態をコードコンポーネントにマッピングし、差分をとり、双方に欠けているものを重大度と整合案とともに列挙する。コードソースが提供されない場合は、デザインシステムの token チェックに適切に縮退する。トリガー：'design to code review'、'does my code match the design'、'design code parity'、'compare Penpot to my component'、'check this against Storybook'、'extract HTML/CSS from this selection'、'find design drift'、'design implementation diff'。
UX の対応が必要な CawPlan チケットを検索したり、あるプロダクトの UX メンバーのデザイン完了状況を要約します：あるバージョンの UX 保留、UX デザインが未対応の高優先度チケット、あるチームの UX 保留キュー、または指定した期間内にそのプロダクトのデザイナーが UX Ready にしたチケット。使用場面：あるバージョンで UX のフォローアップ/レビュー/仕様が必要なチケット、UX が必要だがまだデザインがない高優先度チケット、チケットに UX が提供されていないチーム、またはプロダクトの UX メンバーの UX/デザイン完了サマリーをユーザーが求めたとき。使用しない場面：チケットの作成・更新、チケットの UX ステータス設定、一般的なチケット検索、リリース追跡（バージョンのリリース健全性には `cawplan-plan-track` を使用）。
プロフェッショナルで ATS に最適化された CV と履歴書を、洗練された HTML ファイルとして生成します。ユーザーが CV、履歴書、職務経歴書、求職応募書類の作成、執筆、構築、更新、改善を求めたときはいつでもこの skill を使用します——"make me a resume" や "help with my CV" と言っただけの場合でも同様です。ユーザーが経歴情報や職務履歴を提供したとき、または応募用に経歴を整形するよう求めたときにもトリガーします。この skill は、視覚的に見栄えがよく目を引く HTML を、ATS 対応と同時に生成します——両方の長所を兼ね備えています。
Figma で完全なデザイントークンシステムを 1 つのアトミックな手順で立ち上げる — 変数コレクション、そのモード（例：Light/Dark）、およびモードごとの値を持つすべての変数をまとめて作成する。トークンシステムをゼロから始める場合に使用する。トリガーは「Figma でデザイントークンを設定する」「ライトモードとダークモードを備えたトークンコレクションを作成する」「変数をスキャフォールドする」「Figma テーマをブートストラップする」。あらゆる Figma プランで動作する。既存システムへの増分編集には figma-manage-variables を、コードのトークンファイルからの同期には figma-import-tokens を使用する。
Focus.AI のブランドガイドラインをドキュメント、プレゼンテーション、Web サイト、その他の素材に適用します。2 つのサブブランド——Focus.AI Client（サービス、提案、クライアントワーク）と Focus.AI Labs（研究、実験、公開コンテンツ）——をサポートします。ブランド素材の作成、ビジュアルアイデンティティの適用、Focus.AI スタイルに従う必要のあるコンテンツの生成時に使用します。"focus.ai style"、"focus brand"、"labs style"、またはブランド化された Focus.AI 素材のリクエストでトリガーします。
コード内で既存の画像を加工する：CSS フィルター、ブレンドモード、デュオトーン、マスクと clip-path、テキストの可読性を高めるオーバーレイ、コラージュ、SVG フィルター、レスポンシブ配信（picture/srcset/sizes、AVIF/WebP）。ページ上で写真のスタイル設定や配信を行う場合に使用する。新しい画像を生成するには image-generation を使用する。トリガーフレーズ：「image effect」「photo filter」「image overlay」「duotone」「image mask」「parallax background」「clip-path」「blend mode」「image grid」「responsive image」「css filter」
データ、プロセス、比較、タイムラインを共有可能なグラフィックとして説明する単体のインフォグラフィックを、HTML/CSS/SVG（数値が正確である必要がある場合のデフォルト）または Gemini 3.1 Flash の画像生成（イラスト的でテキストの少ないもの）で作成する。カラーコーディング、統計の強調、SVG チャート、レイアウトテンプレートを扱う。1 枚もののビジュアル解説に使用。インタラクティブなアプリのダッシュボードには dashboard-design を、フィードの統計投稿には social-media-graphic を使用。トリガーフレーズ：「create an infographic」「design a chart」「data visualization」「process flow」「comparison infographic」「timeline design」「stats graphic」「infographic design」「visualize data」。
LLM の出力をプレーンテキストから HTML、Marp スライド、インタラクティブなダッシュボードなどの構造化されたレンダリング形式にアップグレードします。ユーザーがより整形された出力を求めるとき、ノートをプレゼンテーションに変換したいとき、LLM から HTML 出力を得たいとき、ドキュメントからスライドを作りたいとき、または "make this prettier"、"render this"、"output as HTML"、"make slides from this"、"structured output"、"Marp"、"better format" と言ったときに、このスキルを使用します。Karpathy の 19k いいね相当の HTML 出力投稿に基づいています。
uihtml コンポーネントを介して、HTML/JavaScript インターフェースと MATLAB の計算バックエンドを組み合わせたインタラクティブな Web アプリを構築する。HTML ベースの MATLAB アプリ、JavaScript と MATLAB のインターフェース、MATLAB を使った Web UI、インタラクティブな MATLAB GUI の作成時、またはユーザーが uihtml、HTML、JavaScript、Web アプリ、Web インターフェースに言及した場合に使用する。
ユーザーが登録後のオンボーディング、ユーザーアクティベーション、初回利用体験、価値実現までの時間を最適化したい場合に使用します。「onboarding flow」「activation rate」「user activation」「first-run experience」「empty states」「onboarding checklist」「aha moment」「new user experience」「users aren't activating」「nobody completes setup」「low activation rate」「users sign up but don't use the product」「time to value」「first session experience」といった言及がある場合にも使用します。ユーザーが登録しても定着しない場合はいつでも使用してください。登録フローの最適化については signup-flow-cro、継続的なメールシーケンスについては email-sequence を参照してください。
ユーザーがあらゆるマーケティングページ（ホームページ、ランディングページ、料金ページ、機能ページ、ブログ記事など）のコンバージョンを最適化・改善・向上させたいときに使用します。ユーザーが「CRO」「コンバージョン率の最適化」「このページはコンバージョンしていない」「コンバージョンを改善して」「なぜこのページが機能しないのか」と言及した場合にも使用します。サインアップ／登録フローについては signup-flow-cro を、サインアップ後のアクティベーションについては onboarding-cro を、登録以外のフォームについては form-cro を、ポップアップ／モーダルについては popup-cro を参照してください。
Penpot デザインを WCAG 2.1/2.2 AA（任意で AAA）に照らして監査し、構造化された深刻度レポートを作成します：色のコントラスト、タッチ/ターゲットサイズ、代替テキスト、見出し階層、キーボード/フォーカス順序。修正案を提示しますが、自動適用はしません。brief-to-screen および brief-to-deck ループの Evaluator も務めます（scope:deck = スライドのコントラストルール）。トリガー：「check accessibility」「accessibility audit」「WCAG check」「contrast audit」「a11y review」「check color contrast」「is this accessible」。
画面、フロー、コンポーネントに対するオーケストレーションされた包括的な UX レビュー。コンテキストを一度確立し、常に関連する観点（ユーザビリティ、マイクロコピー、ダークパターン）を自動実行し、コンテキスト依存の観点（アクセシビリティ、美しさ、IA、モバイル、視覚的基盤）を提示し、優先順位付けされた1つのレポートを返す。ユーザーが完全なデザインレビュー、「UI/画面/フローをレビューして」、「この UX は良いか」、「このデザインを監査して」、または一般的なデザインフィードバックを求めたときにトリガーする——ただし特定の観点を1つ名指しした場合は除く。
自社チャネル向けのバナーグラフィック：ウェブサイトの hero/セクションバナー画像、メールヘッダー画像、イベント・カンファレンスのバナー、サイドバーの自社プロモ、お知らせバーを、Gemini 3.1 Flash の画像生成（デフォルト）または HTML/CSS で作成する。標準サイズ、Gemini の比率とクロッピング、CTA の配置、レスポンシブなアートディレクション、メールの制約を扱う。有料ディスプレイ/IAB 広告には ad-creative-design を、コードで実装するファーストビューのセクションには hero-section を、完全なメールテンプレートには email-design を使用。トリガーフレーズ：「design a banner」「create a website banner」「hero banner image」「email header」「event banner」「promotional banner」「web banner」「sidebar banner」「announcement bar」「Eventbrite banner」。
視覚デザインの意思決定を認知心理学の原理——知覚、注意、記憶、ゲシュタルトのグループ化、視覚エンコーディングの階層——に基づかせ、特定のデザインがなぜ機能するかを説明する。インターフェース、データ可視化、教育コンテンツ、プレゼンテーションを扱う。ユーザーが cognitive load、visual hierarchy、working memory、preattentive processing、Gestalt principles、encoding hierarchy、cognitive design pyramid に言及したときに呼び出す。デザイン評価には `design-evaluation-audit` を使用する。誤謬の防止には `cognitive-fallacies-guard` を使用する。データストーリーテリングには `visual-storytelling-design` を使用する。
REST API を介して Figma ファイルのコメントを読み取り、投稿し、返信し、削除する——コメントを特定のノードにピン留めし、返信をスレッド化することも含む。ユーザーが Figma コメントをプログラムで扱いたいときに使用する——トリガー：「get Figma comments」「read comments on this file」「post a comment in Figma」「leave a comment on this node」「reply to a Figma comment」「pin a comment to this element」「delete a Figma comment」「notify designers of drift」「add a review note in Figma」。コメントは Plugin API / use_figma / ネイティブ Figma MCP では到達できないため、Figma REST API と個人アクセストークンを使用する。
Figma コンポーネントの完全な Markdown ドキュメントを生成する — 構造/レイヤーツリー、デザイントークン（色、間隔、タイポグラフィ）、状態/バリアントのマトリクス、アクセシビリティノート、コンテンツガイドライン、オプションのコードパリティ + YAML frontmatter。ユーザーがコンポーネントまたはコンポーネントセットのドキュメントページやハンドオフ仕様を求めたときに使用する。トリガー：'このコンポーネントを文書化する'、'コンポーネントのドキュメント/仕様を生成する'、'Button のドキュメントページを作成する'、'構造とバリアントを書き出す'、'Figma からのコンポーネントハンドオフドキュメント'、'このコンポーネントを Markdown ドキュメントに変換する'。ノードツリー、バインドされた変数/トークン、デザイナー注釈を読み取り、エージェントが Markdown を組み立てる。Figma Desktop アプリ（Plugin API）が必要。
axe-core（Deque）を JSDOM 上で実行し、生成/作成された HTML のアクセシビリティ違反をスキャンする — 構造的・意味論的ルール：ARIA 属性とロール、アクセシブルな名前、alt テキスト、フォームラベル、見出しの順序、ランドマーク、セマンティック HTML、tabindex、重複 ID、lang 属性、および約 50 の追加ルール。Figma からコードへのワークフローのコード側で使用する：トリガー 'この HTML のアクセシビリティをスキャンする'、'自分のコンポーネントで axe を実行する'、'生成されたコードの a11y をチェックする'、'axe-core スキャン'、'マークアップのアクセシビリティ lint'、'コードの WCAG チェック'、'この HTML はアクセシブルか'。これはスタンドアロンの Node スクリプトであり、Figma 接続は不要。視覚的ルール（color-contrast、focus-visible、link-in-text-block、target-size）は JSDOM にレイアウトがないため無効 — デザイン側の視覚的な a11y には figma-lint-design を使用する。両者を合わせるとデザインとコードの完全なカバレッジが得られる。
Web ページからデザイントークンを収集し、完全な DESIGN.md デザイン仕様ドキュメント + Tailwind CSS テーマファイルを生成する。ユーザーが URL を提示して「テーマを抽出」「デザイン仕様を生成」「デザインシステムをエクスポート」「このサイトのデザイントークンを抽出」「テーマを作って」「このページのデザインスタイルを分析」と依頼した場合に使用。出力には DESIGN.md（getdesign.md / DESIGN.md の 9 段式標準）と globals.css（Tailwind CSS v4）が含まれ、各 token カテゴリに推奨／許可／禁止の 3 段階の仕様があり、プロジェクトのルートディレクトリに置けば AI コーディングツールでそのまま利用できる。
Material 3 を用いた Flutter テーマ設定のベストプラクティス。ThemeData を色、タイポグラフィ、コンポーネントスタイル、スペーシングの唯一の信頼できる情報源として扱います。ThemeData、ColorScheme、TextTheme、コンポーネントテーマ、スペーシングシステム、ライト/ダークモード対応の作成、変更、レビュー時に使用し、また widget コードが独自のスタイリングを持つ場合にも使用します：ハードコードされた Color、インライン TextStyle、生の padding や gap の数値、複数の widget インスタンスで繰り返される同じ decoration、build 内の brightness/ダークモード条件分岐など。「review this widget」「cut the duplication」「stop repeating this」「tidy this up」としか言われていない場合でも同様です。
sdlc-dev の製品要件 Spec フローで R3（プロトタイプ生成）を実行する必要がある場合に使用し、requirements/prd.md に基づいて requirements/prototype.md（タスクフロー+ページ構造+ASCII ワイヤーフレーム+AC マッピング+ウォークスルースクリプト）を生成する。コンテキスト不足/PRD 不足のまま生成を続けること、検証チェックリストの代わりに Open Questions を使うこと、非 ASCII 方式によってプロトタイプが追跡不能・レビュー不能になることを避ける。
AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。