Skills
エージェント向けにパッケージ化された専門スキルと手順を 97,501 件掲載。コマンド 1 行でインストールできます。
デザイン・UI
SGDSアプリケーション向けのページレイアウトパターンを網羅したカタログです。ページレイアウト、コンテンツ配置、サイドパネル、分割ビュー、サイドバーレイアウト、パンくずレイアウト、ビューポート高レイアウトについてユーザーから質問があった場合は、たとえ「ページをどう配置すればいい？」「2カラムレイアウトが必要」とだけ言われた場合でも使用します。Full Widthレイアウト（sgds-containerを使用する一般公開ページ）とWith Sidebarレイアウト（sgds-container-sidebarを使用するダッシュボード／内部ツール）を扱います。トリガー：layout、aside、split view、sidebar layout、two-column、three-column、content arrangement、page structure with aside
ブラウザ上でシネマティックなモーショングラフィックス（プロモ動画、オープナー、イントロ、バンパー、キネティックタイポグラフィ、16:9 または 9:16 のエクスプレイナー動画）を HTML + CSS + GSAP（必要に応じて Three.js）で構築する。成果物はプレゼンのスライドではなく、本物の動画のように動く。ユーザーが「プロモ動画」「オープナー」「アニメーションのイントロ」「モーショングラフィック」「バンパー」「キネティックタイポグラフィ」「シネマティックなテキストアニメーション」「エクスプレイナー」「解説動画」（ビジュアルジャーナリズム、教育カートゥーン、コラージュ）を求めたり、プロモ・解説動画の参考資料を示して Web 版の制作を希望したりするたびに使用する。たとえ「モーショングラフィック」という言葉を明示しなくても使用する。Web アニメーションが「PPT／プレゼンのようだ」という不満があり、よりシネマティックにしたい場合、Web アニメーションを MP4 動画ファイルにレンダリングしたい場合、または bridge/MCP Higgsfield 経由で After Effects 内に直接カートゥーン／アニメーションのエクスプレイナーを構築したい場合にも使用する。
Opencals のホステッド API と @opencals/storefront-sdk を使い、公式オープンソース Next.js テンプレート（サロン、理髪店、クリニック、パデル／スカッシュクラブ、高級車レンタル、語学学校、ヴィラレンタル、リフォーマーピラティススタジオ）を基に、本番環境向け予約サイトを構築、カスタマイズ、デプロイします。予約・アポイントメント・スケジュール管理サイトや Opencals ストアフロントを求める場合、事業アイデアと参考情報を提示して予約サイトの構築を依頼する場合、または「予約サイトを作って」と依頼する場合に使用します。テンプレートの選択、プロジェクトの足場作り、サービス・空き状況・チェックアウトの接続、リブランディング、Vercel へのデプロイを扱います。template-noir による日単位の複数日レンタル（車、機材）、template-bali-villas によるチェックイン／チェックアウト時刻が固定された宿泊（ヴィラ、キャビン、客室）、template-fluently によるグループ授業、レベル、教師、オンラインレッスンを備えた学校、template-reformer による複数スタジオのクラス時間割、残りベッド数、満席クラスを扱うフィットネススタジオにも対応します。正確な API/SDK 呼び出し形式には、関連スキルの `opencals-storefront-api` を使用してください。
ベンダー非依存のタイトルデザインとキネティックタイポグラフィのディレクション。動画、アニメーション、広告、解説動画、ソーシャルフック、ブランドフィルム、歌詞／テキスト動画、タイトルカード、メインタイトル、ローワーサード、デザインとしての字幕など、モーション主導の文字全般を対象とする。エージェントがアニメーション文字のタイポグラフィ階層、可読性、タイミング、出現／保持／退出、モーションの意味論、改行、セーフエリア、ローカライズ、ブランド制約、アクセシビリティ、点滅／モーションの安全性、制作仕様を計画、プロンプト化、実装、引き継ぎ、反復、または QA する必要がある場合に使用する。
楽しくシャープなアイソメトリック・ステッカー（フラットな塗り、太い黒の輪郭、押し出し形状の側面）を描き、After Effects 品質のキーフレームプリセット集でアニメーション化します。lottie-web とまったく同じ方式で再生するため、動きは流れるようなキャラクターアニメーションになり、不自然な揺れは加わりません。任意のパレット（名前付きの 6 セット。デフォルトは Riso。2 色のブランドカラー、単色、色相シフト、カスタムスロットにも対応）と 4 方向を指定できます。任意の Web アプリのキャンバス上でリアルタイム再生できるアイコンモジュールを生成し（キットには React コンポーネントが付属）、ループするアルファ動画（webm、HEVC mp4）とポスター画像にエクスポートします。"/fun-isometric"、「アニメーションステッカーアイコン」、「楽しいアイソメトリックアイコン」、「Lottie 風アイコン」、「動きのあるオンボーディング用イラスト」、または遊び心のあるアニメーションアイコン、空状態のアート、機能紹介用ステッカーの依頼に使います。
GitHub ダークパープルのグラデーションデッキ — GitHub-dark #0d1117 + パープルブルーの radial 環境光 + 60px グリッド mask、中央揃えレイアウト、パープルの pill ラベル、3色グラデーションのタイトル（#a855f7→#60a5fa→#34d399）、GitHub 風コード palette、パープルの左ボーダー付きハイライトブロック。開発者向けワークフロー / MCP / Agent / dev tool のチュートリアルに適し、GitHub Blog / Linear Changelog に似ています。
「録画を見たいが、どれを見ればよいかわからない」というユーザーを、見る価値のあるセッションの短い高精度リストへ導きます。視聴するセッションやリプレイを尋ねる場合、興味深い／役立つ録画を探したい場合、セッションリプレイのどこから始めればよいかわからない場合、または具体的なフィルターを指定せずに、目標（登録、価格設定、オンボーディング、チェックアウト、機能、レイジクリック、エラー、モバイル、特定の人物）に関するセッションを見たい場合に使用します。`query-session-recordings-list` を使って曖昧な意図を絞り込んだ RecordingsQuery に変換し、有力候補にディープリンクを付けて `investigating-replay` に引き継ぎます。ユーザーがすでに録画／セッション ID を持っている場合（investigating-replay を使用）、または既知のエラーに関するリプレイを求めている場合（finding-replay-for-issue を使用）は使わないでください。
Gemini 3.1 Flash の画像生成や HTML/CSS/SVG コードによる単発ビジュアル向けのコアグラフィックデザインスキル。構図、色彩理論、タイポグラフィ、プロンプト作成、正確なサイズでのクロッピング、出力検証、テキストオーバーレイのフォールバック、高度な CSS テクニックを扱う。特定のフォーマットに当てはまらない汎用またはカスタムサイズのグラフィックに使用する。プラットフォーム別フォーマットには姉妹スキル（social-media-graphic、poster-design、thumbnail-design、ad-creative-design、banner-design、product-mockup、infographic）を推奨。トリガーフレーズ："design a graphic"、"create a visual"、"make a graphic"、"design an image"、"create artwork"、"generate a graphic"、"visual design"。
ダークターミナルの honest-review デッキ——#0a0c10 の黒背景 + 56px のサイバーグリッド + CRT ビネット + スキャンライン、ウィンドウの信号機風 chrome、`$ prompt` のコマンドライン見出し、ミントグリーン #7ed3a4 の大見出し、JetBrains Mono、塗りなしの棒グラフ、点滅カーソル、琥珀／緑／赤の3段階タグ、ダークコードブロック。CLI / agent / 開発ツールのレビュー向け（trace、diff、benchmark を含む）。
インターフェースを洗練させるためのデザインエンジニアリング原則です。UIコンポーネントの構築、フロントエンドコードのレビュー、アニメーション、ホバー状態、シャドウ、ボーダー、タイポグラフィ、マイクロインタラクション、表示・終了アニメーションなど、あらゆるビジュアル調整に使用します。UIの磨き込み、デザインの詳細、「もっと良い感じに」「何か違和感がある」、段階的なアニメーション、角丸、視覚的な位置合わせ、フォントスムージング、等幅数字、画像の輪郭、ボックスシャドウなどで使用します。
Ant Design（antd）を使ってエンタープライズ向け React UI を構築します。Button、Form、Table、Select、Modal、Message など60以上のコンポーネント、デザイントークン、TypeScript サポート、ConfigProvider によるテーマ設定を含みます。ユーザーが Ant Design で React アプリを作成する場合、入力検証付きフォームやデータテーブルを構築する場合、または Ant Design のテーマをカスタマイズする場合に使用します。
あらゆる出力形式（HTML/React アーティファクト、インライン SVG、matplotlib/plotly/d3/Recharts、PNG）で、チャート、グラフ、プロット、ダッシュボード、データビジュアライゼーションを作成する前に必ず使用します。チャートコードの最初の行を書く、色を選ぶ、統計タイル／KPI 行を作成する、ダッシュボードをレイアウトする前に読みます。デザインシステムに依存しない手法として、形式のヒューリスティック、実行可能なバリデーター付きのカラー式、マーク仕様、インタラクションルールを解説します。デフォルトのパレットは references/palette.md にあります。
Flutter のデザインシステムを tokens→theme→modifiers→shapes の構造にし、2 層のトークン（測定値で命名するプリミティブと、役割で命名するセマンティックスロット）を ThemeExtension 経由で公開し、assert を行う of(context) で読み取ります。ColorScheme.fromSeed は使わず、ライトとダークの ColorScheme を手動で定義します。すべての生の color/hex/Colors./Curves./Duration/BorderRadius/fontSize を lib/theme/ 内に置き、no-raw-values gate で検査します。視差効果を抑える設定ではアニメーションをゼロにし、初回描画前に永続化されたテーマを復元し、フォントを同梱します（google_fonts/dynamic_color は使用しません）。各状態の意味を補足する色は最後に導出し、色だけを唯一のシグナルにしません。ThemeData/ThemeExtension/ColorScheme の作成・編集、デザイントークンの追加・改名、テーマ注入やテーマモードの永続化、fromSeed/dynamic_color/google_fonts/FontVariation の使用、theme/ または DesignSystem/ フォルダーの構成、色・角丸・時間・フォントを描画する widget のレビュー時に使用します。
デザインシステムの多地点点検を実行する——10 のステーション（カバレッジ、ベストプラクティス、アクセシビリティ、共有言語、テスト、オーケストレーション、ガバナンス、フィードバック、機械可読ドキュメント、エージェントアクセス）でデザインシステムを評価し、優先順位付きの作業指示を含む赤/黄/緑の点検レポートを生成する。ユーザーがデザインシステムの点検、評価、監査、ヘルスチェックを求めたり、点検や特定のステーションの実行を求めたり、「なぜ私のデザインシステムのチェックエンジンランプが点灯しているのか？」と尋ねたりしたときに使用する。
柔らかなマカロンカラーのスローライフデッキ。クリーム色の #fef8f1 背景、3つのソフトグロウ blob、Playfair の斜体セリフ体ディスプレイタイトルとサンセリフ本文、28px の角丸マカロンカード（ピーチ／ミント／スカイ／パープル／レモン／ローズ）、Playfair の斜体による 01-04 の番号、SVG ドーナツチャート、chip+page のトップバーを採用。ライフスタイル／自己成長／スローライフ／感情を扱うコンテンツに適し、「雑誌、手作り、テック感控えめ」な雰囲気です。
AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。