Skills
エージェント向けにパッケージ化された専門スキルと手順を 97,222 件掲載。コマンド 1 行でインストールできます。
デザイン・UI
Scroll-Driven Animations API、View Transitions、@property ルール、視覚効果、マイクロインタラクションのパターンを含む CSS ネイティブのアニメーション技法。次のような質問で使用する：CSS アニメーション、スクロール駆動アニメーション、CSS スクロールタイムライン、ビュートランジション、ページトランジション、@property、CSS 変数のアニメーション、clip-path アニメーション、backdrop-filter、mix-blend-mode、CSS マスク、CSS のみのアニメーション、JavaScript なしのアニメーション、マイクロインタラクション、ホバー効果、アコーディオンアニメーション、または GSAP が不要・不要とされる場合。CSS と GSAP の判断ガイドを含む。重要：reduced-motion パターンにはこのスキルと併せて常に elite-accessibility を読み込むこと。
テーマ、文、物体、ムード、記事のアイデア、写真を、静かな日本/韓国風ジン風の編集ポスター — 縦長の経年紙、大きなネガティブスペース、小さな画像アンカー、実験的なタイポグラフィ、1 つの高彩度アクセント、印刷/スキャンのかすれ — にまとめ、画像を生成する。ジン風ポスター、ミニマルな編集ポスター、紙テクスチャのポスター、riso/xerox/letterpress ポスター、エッセイやニュースレターのカバーアート、あるいは「あの静かな日本風ジンのスタイル」のポスターを求められたときに使用する。
Revenue-Centric Design（RCD）——SaaS やスタートアップ製品のコンバージョン、リテンション、マネタイズを実現するための証拠に基づく原則。ユーザーがランディングページや CRO（「ページがコンバージョンしない」）、オンボーディング/アクティベーション（「登録しても定着しない」）、チャーン/リテンション（「顧客が解約し続ける」）、価格設定/マネタイズ（「どう価格を付けるべきか」）、チェックアウト/フォーム（「ドロップダウンがコンバージョンを殺す」「注釈付きチェックアウト」）、ダッシュボード/データ可視化（「認知負荷」「KPI ショートリスト」）、ポジショニング/ICP/ゴートゥーマーケット、機能スコープ、A/B テストの厳密性、AI 時代の差別化に取り組むとき、またはある設計判断の背後にある行動科学の仕組みを尋ねるときに使用。また、別のスキルがコンバージョン/リテンション/価格設定/チェックアウトの施策の背景にある原則や証拠を必要とするときにも使用。ギャンブル、ベッティング、カジノ製品には決して適用しない。
Razor Tag Helpers を使用して ASP.NET Core アプリケーションに Syncfusion Block Editor コントロールを実装する。Syncfusion Block Editor、EJ2 BlockEditor、ASP.NET Core のブロックベースのコンテンツ編集、または <ejs-blockeditor> 構文と共同編集機能、リアルタイムのマルチユーザー編集、Yjs 統合、ユーザープレゼンスとリモートカーソル、ドキュメントのバージョン履歴を扱う場合にこの skill を使用する。ブロック管理、ネストされたコンテンツ構造、ドラッグアンドドロップ機能、コンテンツのサニタイズ、インストール、tag helper のセットアップ、ブロックの種類、コンテンツ操作、イベント、メニュー、リッチなブロックベースのドキュメントエディターを作成するための高度な機能を扱う。
UGUI と UI Toolkit による Unity UI 開発。次の場合に積極的に起動する：(1) Unity のユーザーインターフェースの構築、(2) UGUI（Canvas、RectTransform、アンカー）、(3) UI Toolkit（USS、UXML、VisualElement）、(4) EventSystem と入力処理、(5) 一般的な UI コンポーネント（ボタン、スクロールビュー、ドロップダウン）、(6) インベントリ UI、HUD、体力バー、メニューシステム、(7) TextMeshPro のセットアップとリッチテキスト、(8) レスポンシブ UI（アンカー、レイアウトグループ）、(9) 実行時 UI 生成、(10) ゲーム内 UI 用のワールドスペース Canvas。提供：UGUI と UI Toolkit の比較、RectTransform パターン、USS/UXML の例、レイアウトグループのレシピ、TextMeshPro テンプレート。
チェックアウト、カート、決済、予約のフロー —「購入する準備ができた」から「注文確定」までの経路 — を設計または批評する。コンバージョンを守る中核（ゲストチェックアウト、透明な費用サマリー、インライン検証、処理中のフィードバック、確認）を適用し、文脈依存のレバー（氏名フィールド、支払い方法の数、単一ステップか複数ステップか、予約日付ピッカー、プロモコードの目立ちやすさ）をトレードオフとともに条件付きで扱う。チェックアウトページ、ショッピングカート、支払いフォーム、カード入力画面、プロモ／割引コード、予約フローを設計・レビューする場合、またはチェックアウト・カートの離脱率を改善する必要がある場合にトリガーする。
チャート、グラフ、視覚分析を必要とするダッシュボード、レポート、データ駆動型インターフェースを構築する。データの特性と分析目的に基づいて適切な可視化を選択するための体系的なフレームワークを提供する。目的別に整理された 24 種類以上の可視化タイプ（トレンド、比較、分布、関係、フロー、階層、地理空間）、アクセシビリティパターン（WCAG 2.1 AA 準拠）、色覚多様性に配慮したパレット、パフォーマンス最適化戦略を含む。可視化の作成、チャートタイプの選択、データのグラフィカルな表示、データインターフェースの設計時に使用する。
iOS、iPadOS、macOS、watchOS、visionOS、tvOS で UI を設計・レビューするための Apple Human Interface Guidelines (HIG) リファレンス。Apple プラットフォームでネイティブに感じられるよう画面、ナビゲーション構造、インタラクションをどう設計すべきか、そのデザインが Apple のガイドラインに従っているか、SwiftUI/UIKit でどのシステムコントロールを使うか、色・フォント・余白・アニメーションをどう設定するか、アプリアイコンの設計や SF Symbol の選び方、Liquid Glass の使い方、アクセシビリティのための設計方法をユーザーが尋ねるときに使用——ユーザーが「HIG」や「Apple design guidelines」と言わない場合も含む。
MCP ツールを使って Penpot でプロフェッショナルな UI/UX デザインを作成するための総合ガイド。次の場合に使用します：（1）Web、モバイル、デスクトップアプリ向けの新しい UI/UX デザインの作成、（2）コンポーネントとトークンを使ったデザインシステムの構築、（3）ダッシュボード、フォーム、ナビゲーション、ランディングページのデザイン、（4）アクセシビリティ標準とベストプラクティスの適用、（5）プラットフォームガイドライン（iOS、Android、Material Design）への準拠、（6）既存の Penpot デザインのユーザビリティレビューや改善。トリガー：「design a UI」「create interface」「build layout」「design dashboard」「create form」「design landing page」「make it accessible」「design system」「component library」。
画面録画から UI アニメーションをリバースエンジニアリングする。ffmpeg でフレームを抽出し、OpenCV でフレームごとに動きを追跡し、イージングとスプリングのカーブをフィッティングし、振り付け（先行、遅延、オーバーストレッチ）を注釈付けし、CSS、Motion/Framer Motion、SwiftUI、React Native、または UIKit のコードと引き継ぎ用モーション仕様を出力する。ユーザーが UI アニメーションの画面録画や動画を共有・アップロードした場合、または「reverse engineer this animation」「recreate this animation」「match this easing」「extract the animation curve」「figure out the spring from this video」「copy this transition from a video」「how does this animation work」「reproduce this motion」などを求めた場合に使用する。新しいモーションをゼロから設計する場合やモーションコードをレビューする場合は、代わりに ui-animation を使用する。
Spencer の UI ハウススタイル。明確に要求されない限り、このスキルを呼び出さないこと。Spencer がフロントエンド、ページ、画面、コンポーネント、ダッシュボード、アプリシェル、モーダル、フォーム、テーブル、その他あらゆる種類のウェブビジュアルを求めたときは常に使用——"build a UI for X"、"throw together a screen"、"make a dashboard"、"I need a quick app" といった表現を含む。このマシン上でまったく新しい React プロジェクトをゼロから始めるときにも使用。一般的な "frontend-design" スキルより優先される：Spencer はデフォルトの光沢のある AI 美学を好まず、デューデリジェンスやセキュリティレビューのアプリのような、引き締まった、ニュートラルで、高密度な、システムフォントの UI を求める。Spencer が明らかに異なるスタックの既存リポジトリを編集している場合（例：shadcn が既に接続済みの Next.js）、そのリポジトリの規約に従いつつも、このスキルの Spencer のタイポグラフィ、密度、トーンの好みを適用すること。
オーケストレーションされた、ゼロから構築する UX ワークフロー。コンテキストを一度確立し、その後ジェネレーティブ・ラダーを順番に組み立てる——基盤（色、タイポグラフィ、スペーシング）→ コンポーネント → 画面 → フロー——各スキルを関連性でゲーティングしながら適用し、結果を design-review に引き渡す。ユーザーが新しいプロダクト/アプリ/UI をゼロから始めるとき、「アプリを設計してほしい」、「デザインシステムと画面を構築して」、「新製品を始める」、または複数の成果物を伴うあらゆるデザインビルドのときにトリガーする——ただし、特定の画面やコンポーネントだけを求めた場合はトリガーしない（そのスキルを直接トリガーさせる）。
Flutter アプリの画面を磨き上げる——視覚的階層、タイポグラフィ、色とコントラスト、余白、セクションの明瞭さ。まず参照画面を読み込んでアプリ既存のデザイントーンを固定し、`android-emulator` スキルで Android エミュレータ上の実行中アプリを操作し（スクリーンショット、タップ、スワイプ）、的を絞った widget と `ThemeData` の編集を行い、独立した評価者サブエージェントを起動してデザイン品質、独自性、作り込み、機能性を採点する。ユーザーが Flutter 画面の視覚デザインを改善、磨き上げ、洗練、批評、監査、引き締めたいときは常にこのスキルを使う——"polish" と言わない場合でも（例: "make this look better"、"fix the layout on settings"、"tighten up the home screen"、"this screen feels off"、"review the UI"、"design pass"、"make it less generic"、"feels too Material default"）。Flutter 以外の UI、機能開発、ルーティング/機能の変更には使用しない。
ユーザーがアートスタイル、ビジュアル言語、スタイルガイド、キャラクターデザイン、環境アート、UI アートディレクション、アセットパイプライン、リファレンスボード、カラーパレット、シェイプ言語について尋ねたときに呼び出す。トリガー: "art style"、"visual"、"style guide"、"character design"、"environment art"、"asset pipeline"、"color palette"、"shape language"。UI/UX レイアウト（game-ux-designer を使用）やクリエイティブビジョン（game-creative-director を使用）には呼び出さない。AlterLab GameForge コレクションの一部。
レイアウトのルール、ヒーローセクションのデザイン、CTA の心理学を用いてランディングページのコンバージョンを最適化します。ファーストビューの構成、ソーシャルプルーフの配置、モバイルデザイン、F 型の読み進め方を扱います。用途：スタートアップのランディングページ、製品ページ、SaaS マーケティング、コンバージョン最適化。起動語句：ランディングページ、ヒーローセクション、ファーストビュー、コンバージョン最適化、ランディングページデザイン、CTA ボタン、ヒーロー画像、ランディングページのレイアウト、SaaS ランディングページ、製品ページデザイン、コンバージョン率、ランディングページのベストプラクティス
Lottie ベクターアニメーションの評価、書き出し、パッケージング、統合、キャプチャ、検証、受け渡しに関する本番向けガイダンス。Bodymovin/Lottie JSON、dotLottie アーカイブ、レンダラーとプレイヤーの互換性、フォントとグリフ、画像アセット、マーカーとセグメント、決定論的な動画キャプチャ、レスポンシブサイズ、最適化、アクセシビリティ、クロスプラットフォーム QA に使用。一般的な After Effects のアニメーション制作や実写／動画の納品には使用しない。
Remotion モーショングラフィック動画のクリエイティブディレクションとデザインインテリジェンス。エージェントが（1）スクリプトや SRT をショットごとのビジュアルデザイン文書に変換する必要がある場合、（2）各シーンについて編集意図を伴うモーショングラフィックを構想する場合、（3）Remotion コードを書く前にユーザーの承認を得るためのデザインブリーフを作成する場合に使用する。スクリプトから Remotion 動画コードを生成する前には常に使用する。
Elements registry から公式のテックブランドロゴをインストールする。ユーザーがテック企業（Clerk、Vercel、GitHub など）、AI プロバイダー（OpenAI、Anthropic、Claude）、ソーシャルプラットフォーム、またはあらゆるブランド素材のロゴを必要とするときに使用する。「logo」「brand」「[company] のアイコン」「[company] logo を追加」、プレースホルダーロゴの検出、またはランディングページ、認証 UI、統合事例の構築時に発動する。
稼働中の Web アプリが設計仕様に一致するかを DOM に対する決定論的な CSS チェックで検証し、さらに Nova Act で Gherkin シナリオを実行してユーザーフローを検証する。設計上の主張をルールに変換し、verify_* MCP ツールで実行する。フローは act() と act_get() で実行する。注釈付きスクリーンショットとフローごとの詳細を含む、視覚とフローを統合したレポートを生成する。稼働中のサイトに対して、視覚スタイル、コンポーネントのルール、アクセシビリティ、プロジェクトの規約、プラットフォームのパターン、エンドツーエンドのユーザージャーニーを確認するときに使用。
製品がエラーをどう予防し、表面化し、回復するかを設計または批評する — 入力/バリデーションエラー、システムやネットワークの障害、AI/予測の失敗、破壊的な操作、404/行き止まりページ。予防を最優先し（ほとんどのエラーは設計で回避できる）、常に成り立つ中核原則（中断せずに検証する、回復可能なメッセージを書く、セーフティネットを用意する、決して行き止まりにしない）を適用し、文脈依存のレバー（確認か取り消しか、バリデーションのタイミング、ユーモア、縮退、透明性とセキュリティ）をトレードオフとともに制御する。ユーザーがエラー状態、エラーメッセージ、フォームバリデーション、404/エラーページ、取り消し/確認フロー、障害処理、グレースフルデグラデーションの設計やレビューを求めたときにトリガーする。
AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。