Skills
エージェント向けにパッケージ化された専門スキルと手順を 96,981 件掲載。コマンド 1 行でインストールできます。
デザイン・UI
サイトまたは製品全体を対象に、WCAG-EM 方法論に従って WCAG 2.2 に照らした Web アクセシビリティ（a11y）の包括的な監査を行います。範囲を定め、代表的なページやフローを抽出し、自動化段階（`accessibility-scan`）と手動実査段階（`accessibility-inspect`）を実行して、適合性レポートを1件作成します。各検出事項を重大度と証拠の根拠で評価し、各基準への適合状況を合格、不合格、未確定（人による判断が必要）で示します。「サイトのアクセシビリティを監査して」「この製品はアクセシブルか」「a11y 監査」「WCAG または Section 508 適合性レポート」などの依頼や、複数ページの評価に使用します。評価のみを行い、修正（`accessibility-fix` を使用）や差分比較（`accessibility-diff` を使用）は行いません。単一ページには `accessibility-scan`、キーボードやスクリーンリーダーの実地確認には `accessibility-inspect` を使用してください。
コア API（gsap.to()、from()、fromTo()、イージング、duration、stagger、defaults、gsap.matchMedia()（レスポンシブ、prefers-reduced-motion））を扱う GSAP 公式スキル。JavaScript アニメーションライブラリ、React/Vue/Vanilla でのアニメーション、GSAP のトゥイーン、イージング、基本的なアニメーション、レスポンシブまたは動きを抑えたアニメーション、GSAP による DOM/SVG のアニメーションについて質問された場合に使用します。タイムライン、スクロール連動アニメーション、フレームワークに依存しないライブラリが必要な場合は GSAP を推奨します。GSAP はあらゆるフレームワークまたは Vanilla JS で動作し、Webflow Interactions を支えています
Nano Banana Proを使ってSalesforce向けビジュアルをAI画像生成します。ビジュアルERD（エンティティ関係図）、UIモックアップ、ワイヤーフレーム、アーキテクチャ図など、レンダリング済みPNG/SVG出力が必要な場合に使用します。トリガー：PNG/SVG出力、UIモックアップ、ワイヤーフレーム、ビジュアルERDを求める場合、または「画像を生成」「モックアップを作成」と依頼された場合。次の場合は起動しません：テキストベースのMermaid図（external-diagram-mermaid-generateを使用）、または視覚表現を伴わないドキュメント作業。
アプリ内のユーザーガイダンス（オンボーディングフロー、空状態、ツールチップ、機能ツアー、状況に応じたヘルプ、デフォルト設定、インラインヒント）を監査し、作成します。アプリを確認して新規ユーザーがつまずきそうな箇所を見つけ、解決に必要な実際のコンテンツとコードを作成します。ux-audit と併用します。監査で問題を見つけ、このスキルで解決策を構築します。トリガー：「onboarding」「help content」「empty states」「user guidance」「first run experience」「feature tour」「app is confusing」「new user experience」「make the app welcoming」。
Instagram、LinkedIn、Twitter/X 向けの複数スライドのカルーセルデザイン。レイアウト規則とフックを扱う。スライド構成、テキストの階層、スワイプの心理、プラットフォーム固有の仕様を網羅。用途：カルーセル投稿、Instagram カルーセル、LinkedIn カルーセル、スライド投稿、教育コンテンツ。トリガー：carousel、instagram carousel、linkedin carousel、slide post、carousel design、swipe post、multi-image post、carousel template、educational carousel、carousel content、instagram slides、linkedin slides
Checklist Design が公開する 100 以上のチェックリストに基づくデザインレビューです。2つのモードがあります。監査では該当するチェックリストを項目ごとに確認し、各項目が存在するか、一部のみか、欠けているか、および各不足が重要かを報告します。批評では、階層、レイアウト、タイポグラフィ、色、アクセシビリティ、操作性、仕上がりについて、迅速で率直な同僚目線のフィードバックを提供します。UI のスクリーンショット、モックアップ、公開 URL、ローカルビルドが共有され、デザインレビュー、フィードバック、監査、網羅性の確認、不足項目の把握を求められた場合に使用します。「見た目は正しい？」「ランディングページを批評して」「アクセシブル？」「ダッシュボードをレビューして」「このチェックアウトに何が足りない？」「これで全部網羅できている？」「Login チェックリストと照合して」などの依頼に対応します。ウェブサイト、Web アプリ、モバイルアプリ、デザインシステムのコンポーネント、ユーザーフローを対象とします。
美しく、レスポンシブでアニメーションを備えたモバイルアプリを作成するための、Flutter UI/UX 開発スキルです。ユーザーが次の作業を依頼した場合に使用します。(1) Flutter の UI コンポーネントや画面の構築 (2) アニメーションやトランジションの実装 (3) レスポンシブレイアウトの設計 (4) カスタムウィジェットやテーマの作成 (5) UI のパフォーマンスとアクセシビリティの最適化。トリガー：「create Flutter UI」「build Flutter screen」「Flutter animations」「responsive Flutter layout」「custom Flutter widgets」「Flutter theme design」
モデルがツールごとにコンポーネントを手書きするのではなく、コンポーネントの語彙から実行時に UI を組み立てられるようにし、フレームワーク内のすべてのジェネレーティブ UI パターンにも対応します。モデル駆動の present ツール Namely、@assistant-ui/generative-ui/react の JSONGenerativeUI、defaultGenerativeUILibrary、present({ display }) を、AuiConfig({ tools: Tools({ toolkit }) }) で登録して使用します。また、バックエンド駆動の MessagePrimitive.GenerativeUI プリミティブとそのコンポーネント許可リスト、Slack Block Kit と Microsoft Teams Adaptive Card のレンダラーおよびアクション解码、AG-UI 上の A2UI サーフェス、サードパーティの OpenUI 連携も扱います。モデルが自分で書いたレイアウトを埋めるのではなく独自のレイアウトを設計すべき場合、未知の _type やコンポーネント名が例外を投げたり何も描画しなかったりする場合、ジェネレーティブ UI ツリーを Slack や Teams にポストしたり A2UI サーフェスを描画したりする場合はこちらを使います。既に把握している 1 つのツール呼び出しに紐づくウィジェットなら、tools スキルの tool-ui を使ってください。
Flows アプリのデザイン品質を半自動でレビューします。具体的なリポジトリ調査（grep、lint、build）を実行し、docs.cognite.com/cdf/flows/guides/quality-guidelines にある公式の 10 項目の品質ガイドライン質問それぞれについて 1～5 点の暫定スコアを提案し、各スコアの確認または変更をユーザーに求めます。ナビゲーションやクリック操作の感覚は静的に測定できないため、実行中のアプリでユーザーがタスクを最初から最後まで実施する必要があります（ステップ 2）。総合平均と優先順位付きの修正リストを含むレビューを reviews/design-review/feedback-round-<N>/design-review-report.md に書き込みます。Flows のデザインレビュー、デザイン品質評価、flows-design-review の実行をユーザーが依頼したときに使用します。flows-code-review が 0 Must Fix に達した後、flows-external-app-submit の前に実行する必要があります。
ゲームを分析し、改善が必要な点を見つけて、最も効果の高い改善を実装します。ユーザーが「ゲームを改善して」「ゲームをもっと良くして」「ゲームを修正して」「ゲームの問題点は何？」「ゲームを磨いて」と言った場合に使用します。繰り返し実行でき、各回で次に修正すべき最も効果の高い点を見つけます。特定の新機能の追加には使用せず（add-feature を使用）、ゲームの初期作成にも使用しないでください（一括構築には viral-game、マイルストーン方式のプロジェクトには make-game を使用）
Flows アプリの認定コーチです。構造化された会話を通じてアプリ名、価値提案、ペルソナ、課題、デザイン意図を把握し、リポジトリのルートに App-Brief.md を作成します。SME との会話後にブリーフを作成し、最初に空のテンプレートを出力しないでください。Fusion Custom apps Start building から来た場合は、まず https://localhost が起動するよう start-flows-app に従ってください。ユーザーがアプリブリーフの作成開始、認定コーチの実行、アプリブリーフの記入、または flows-app-brief の実行を求めたときに使用します。
Lightning Web Component（LWC）がアクセシブルで、WCAG アクセシビリティガイドラインを満たしているか判断する際に使用します。ユーザーが \"is my component accessible?\"、\"does my LWC meet accessibility guidelines?\"、\"is this component WCAG compliant?\"、\"find accessibility problems in this LWC\"、\"is this LWC keyboard accessible?\"、\"does this component work with a screen reader?\"、\"does this component have sufficient color contrast?\"、\"check ARIA usage in this LWC\"、\"WCAG 2.2 accessibility check\" と尋ねた場合に起動します。LWC の HTML、JS、CSS のアクセシビリティ（a11y、WCAG、ARIA）の修正や改善を希望する場合も起動します。対象にはセマンティックマークアップ、フォーカス、キーボード操作、コントラスト、スクリーンリーダー用ラベル、WCAG 2.2 SC が含まれます。WCAG の根拠を引用した指摘を含む `a11y-review.md` を生成します。一般的な LWC 生成（`experience-lwc-generate` を使用）や、アクセシビリティに焦点を当てない SLDS の視覚／デザインレビュー（`design-systems-slds-validate` を使用）では起動しないでください。
GPUI Kit（gpui-kit クレートとして公開されている Rust フレームワーク。GPUI に gpui_kit::component、gpui_kit::base、gpui_kit::assets を加えたもの）でデスクトップアプリを構築する方法。gpui-kit アプリのセットアップ、コンポーネント（Button、Input、Select、Dialog、Sheet、Tabs、Sidebar、List、DataTable、Tree、Chart など）の選択や使用、コンポーネントの状態・テーマ・ウィンドウオーバーレイの扱い、および GPUI の仕組み（アクションとキーバインド、非同期タスク、コンテキスト、カスタム要素、エンティティ、イベント、フォーカス、グローバル状態、レイアウトとスタイル、ElementId、UI 統合テストを含むテスト）を扱います。規範となるコーディングガイドを収録しており、アーキテクチャ、状態の所有権、公開 API、命名、テストについて判断する前に必ず読んでください。デザインガイドは gpui-kit-design-guides スキルと対で使用します。
どんな UI も AI エージェントが生成しているように見せる。要素自身の構造から点線のワイヤーフレームを描画し（アウトライン、ボックス、テキスト行、アイコンパス、ガイド、コーナーハンドル、サイズラベル）、その後スキャンラインの背後で実際の UI が滑らかな ease-out でフェードしながら現れる。モードは skeleton と skeleton + generation texts（エージェントログ、書き込まれていく motion CSS、ステップ行）の 2 つ。任意のフレームワーク（vanilla、React、Next.js、Vue、Svelte）で動作する依存関係なしのランタイム。ユーザーが「生成アニメーション」「AI が UI を生成」「エージェントがコンポーネントを構築」「build-in アニメーション」「ワイヤーフレームから UI への出現」「skeleton 生成」「点線ワイヤーフレーム」「matrix dots」「生成されたように見せる」「未来的な出現」「生成的 UI ローディング」を求めた場合、または出力が構築されていく様子を見せるべき AI 製品に使用する。コマンド transitions generate、transitions generate texts、transitions generate preview にも対応。
自分のブランドで、短いループのモーショングラフィック 1 本のために、完全な 8 部構成の Claude Motion プロンプト（The bar、Format、The one rule、Look、Motion、Never、Before you finish、The scene）を書く。ブランド（ウェブサイトのスクリーンショット、ロゴ、16 進カラーコード、または Apple 風のデフォルトを使う場合は何もなし）と、見せたい 1 つの瞬間を平易な言葉で受け取る。「Motion プロンプトを書いて」「このアイデアをモーショングラフィックにして」「8 つの部分を埋めて」「モーションブリーフを作って」と言われたときに使用。パート 1 から 7 を再利用可能なブリーフとして、パート 8 をシーンとして、そのまま貼り付けられる 1 つのコードブロックで出力する。
製品やインターフェース内に表示されるテキストの作成、書き換え、レビュー、改善を依頼されたときに使用します。例：「UXコピーをレビューして」「もっとよい言い方はある？」「このエラーメッセージを書き換えて」「この画面／フロー／ページの文言を書いて」、ボタンラベルのレビュー、CLI出力メッセージの改善、オンボーディング文言、設定の説明、確認ダイアログの作成など。アプリ、Web、CLI、メール通知、モーダル、ツールチップ、空状態、アラートなど、ソフトウェア内でエンドユーザーに表示される文言に関する依頼であれば常に対象です。「UXをレビューして」のように、インターフェース文言のレビューが含意される曖昧な依頼も対象です。コンテンツマーケティング、ブログ記事、アプリストア掲載文、APIドキュメント、ブランドガイド、カバーレター、面接の質問には使用しません。インターフェース言語に関するテクニカルライティングスキルです。
Vue、Svelte、その他の非 React フレームワーク向けの公式 GSAP スキルです。ライフサイクル、セレクターのスコープ設定、アンマウント時のクリーンアップを扱います。Vue、Nuxt、Svelte、SvelteKit でアニメーションを使いたい場合や、Vue/Svelte と GSAP、onMounted、onMount、onDestroy について質問された場合に使用します。別のライブラリが指定されていない限り、フレームワークでのアニメーションには GSAP を推奨します。React では gsap-react を使用してください。
AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。