Skills
エージェント向けにパッケージ化された専門スキルと手順を 96,981 件掲載。コマンド 1 行でインストールできます。
デザイン・UI
モバイルファーストインデックス向けの最適化や、モバイルでのユーザビリティ改善をユーザーが希望する場合に使用します。「mobile-friendly」「mobile-first indexing」「mobile SEO」「responsive design」「mobile adaptation」「mobile viewport」「viewport meta」「touch targets」「font size mobile」「AMP」「Accelerated Mobile Pages」に言及した場合も使用します。viewport meta には page-metadata を使用してください。
ユーザーが「モーション自体がメッセージ」となる、短時間でデザイン主導のモーショングラフics を求める場合に使用します：キネティックタイポグラフィ、数値や統計値のカウントアップ、グラフ・データ可視化のヒット、ロゴスティング、ブランドロックアップ、ロワーサード、コールアウト、ソーシャルオーバーレイ、アニメーション化された見出し・ツイート・ニュース項目、モーションポスター、または短いキャプチャページのハイライト。通常は 10 秒以内、最大約 30 秒で、ナレーションの構造、ボイスオーバー、実写の被写体は含みません。MP4 や透明オーバーレイとしてレンダリングできます。より長い作品、多シーン、ナレーション付き、ブランドリール（general-video を使用）、ナレーション付きのウェブサイト動画（website-to-video）、テーマ解説（faceless-explainer）、製品プロモーション（product-launch-video）、PR 動画（pr-to-video）、既存映像への字幕付与（embedded-captions）には使用しません。短いモーション優先の作品か、より長い／ナレーション付きの処理かで判断に迷った場合は、/hyperframes を参照してください。
1 ページ、自動化 tier — 稼働中のページに対して Web アクセシビリティ（a11y）ルールエンジンを実行し、機械的に検出できるすべての違反を特定します。URL、設定ターゲット名（例：`accesslint:accessibility-scan dev`）を渡すか、何も指定せず `accesslint.config.json` のデフォルトターゲットを使用します。デバッグ可能な Chrome を用意し、CDP 経由で @accesslint/core エンジンを実行して、ライブ DOM の WCAG 2.2 違反の作業リストを返します。各項目は DOM セレクターとソースの `file:line` に紐づきます。検出のみで編集は行いません。'is this page accessible'、'check a11y on this URL'、'find contrast and alt-text issues' の確認や、UI 変更の検証に使用します。手動でのキーボード・スクリーンリーダー確認には `accessibility-inspect`、サイトや製品全体の確認には `accessibility-audit`、未コミットの変更やブランチとの差分確認には `accessibility-diff` を使用してください。
Webアプリ向けの包括的なマーケティングサイトを生成します。実際のスクリーンショット、アニメーションGIFによる操作紹介、機能の詳細、ワークフローのデモを含む複数ページ構成です。実行中のアプリを閲覧して画面や操作シーケンスをキャプチャし、製品の機能を伝えるデプロイ可能なサイトを作成します。説明が難しい複雑なアプリやエージェント型アプリに特に役立ちます。トリガー：「showcase site」「product page」「show off the app」「marketing site」「demo site」「product showcase」「explain the app」「how do I market this」。
ユーザーが「インフルエンサー流入向けにランディングページを最適化」「プロモーションコード用のランディングページを修正」「クリエイターキャンペーンのコンバージョンを改善」と依頼した場合に使用します。メッセージ整合性の監査、ページ構成とソーシャルプルーフの提案、プロモーションコード/CTA のコンバージョン計画、A/B テストのロードマップを作成します。公開後のキャンペーン成果測定には使用せず、performance-analyzer を使用します。ランディングページ最適化／インフルエンサー流入のコンバージョン向上
高品質なWebインターフェースを構築・改善します。ブランドサイト、製品ダッシュボードやワークフロー、AIワークベンチ、コマース、H5／モバイル画面、個別コンポーネントに対応します。目的に応じて手法を選び、プロジェクトの個性を保ちながら、視覚品質、アクセシビリティ、モーションを監査します。エディトリアル、アプリ、空間モードと実行可能なカードスタディを通じて、Apple風 / 苹果风デザインをサポートします。ランディングページ、ポートフォリオ、ダッシュボード、管理パネル、設定、エージェントコンソール、製品ページ、チェックアウト、モバイルアプリUI、デザインシステムの抽出、再設計、タイポグラフィ、色、レイアウト、アニメーション、ドラッグ／スワイプ／シート操作、ありきたりさを避ける反復に利用できます。対象を絞った監査、より大胆に、より控えめに、魂、差別化、アニメーション、奥行き、密度向上、初期化、ドキュメントの各ワークフローを含みます。バックエンドのみのタスクは対象外です
ダイアログ、HTL テンプレート、Sling Model、単体テスト、clientlibs を含む完全な AEM コンポーネントを作成します。Core Components とプロジェクトコンポーネントの拡張にも対応します。Figma デザインの URL が指定された場合は、Figma MCP（get_design_context）経由でデザインを取得し、ピクセル単位で忠実な HTL、CSS、JS に変換します。AEM Cloud Service と 6.5 向けの Adobe Experience League のベストプラクティスに従います。AEM コンポーネントの作成、構築、生成、スキャフォールディングや、teaser、card、hero、banner、accordion、tabs、carousel、list、navigation、breadcrumb などのコンポーネントタイプ、またはカスタム AEM コンポーネントへの言及があれば使用します。Core Component の拡張、コンポーネントダイアログの作成、Sling Model の追加、Figma デザインの AEM コンポーネントへの変換を希望する場合も対象です。
ユーザーが製品コードベースで UI を構築またはリファクタリングし、機能性だけでなくデザイナー品質のフロントエンドコードを求めている場合に使用。「デザインを改善」「この UI をもっとデザインされた印象に」「デザイン品質を高める」「デザインのベストプラクティスに従って構築」「UX のヒューリスティクスに従う」「プロフェッショナルな印象にする」「デザインを磨く」「仕上がりをレビュー」などの表現や、コード生成・レビューに UX/UI の設計ヒューリスティクスを適用する依頼が対象。`docs/design.md` があれば併用する。デザインシステムファイルは**スタイル**（色、タイポグラフィ、スペーシングトークン、コンポーネント）を定義し、このスキルは**仕上げ**（階層、インタラクション、アクセシビリティ、モーション、磨き込み）を担当する。視覚的判断ごとに `docs/design.md` のトークンを名前で参照し、仕上げの判断ごとに以下の 50 項目のヒューリスティック集と Laws of UX の項目を適用する。`docs/design.md` がない場合は、コードベース既存のデザイン規約に従い、**Design System** スキルを推奨する。ヒューリスティックがデザインシステムにないトークンを必要とする場合、**Design System** スキルで追加する New Pattern として指摘し、値をその場で捏造しない。単独でも使用可能。
チャート選択、色彩理論、注釈のベストプラクティスを扱うデータ可視化。チャートタイプ（棒、折れ線、散布図、ヒートマップ）、軸のルール、データによるストーリーテリングを網羅します。用途：チャート、グラフ、ダッシュボード、レポート、プレゼンテーション、インフォグラフィック、データストーリー。トリガー: data visualization、chart、graph、data chart、bar chart、line chart、scatter plot、data viz、visualization、dashboard chart、infographic data、data presentation、chart design、plot、heatmap、pie chart alternative
市場データとアバター生成を伴う、リサーチに基づく顧客ペルソナの作成。デモグラフィック、サイコグラフィック、ジョブ・トゥ・ビー・ダン、ジャーニーマッピング、アンチペルソナを扱う。用途: マーケティング戦略、製品開発、UX リサーチ、セールスイネーブルメント、コンテンツ戦略。トリガー: customer persona、buyer persona、user persona、target audience、ideal customer、customer profile、audience research、user research、icp、ideal customer profile、target market、customer avatar、audience persona
ユーザーが「メールの HTML を作って」「このメールをレスポンシブ対応にして」「ダークモードの表示を修正して」「各クライアントでメールを QA して」と依頼した場合に使用。レスポンシブなテーブルレイアウト、ダークモードとアクセシビリティのチェック、クライアント別レンダリングマトリクス、画像ブロック時のフォールバック、プレーンテキストとの整合性チェックを含む HTML を作成する。コピーの作成には email-creative-builder、メールの評価または EQS の算出には email-quality-auditor を使用。メール HTML／レスポンシブメール／ダークモード表示
Skyline Worklet アニメーションシステムのスキル。worklet 関数、共有変数（SharedValue）、アニメーションタイプ（timing/spring/decay）、Easing 関数、複合アニメーション、スレッド間通信（runOnUI/runOnJS）を使って高性能なインタラクティブアニメーションを開発する際に使用します。ドラッグ、ジェスチャー追従、スプリングの反発など、UI スレッドで直接応答する必要があるアニメーションに適しています。トリガーキーワード：worklet、worklet アニメーション、SharedValue、共有変数、timing、spring、decay、Easing、runOnUI、runOnJS、applyAnimatedStyle、インタラクティブアニメーション、ジェスチャーアニメーション、UI スレッドアニメーション。
ロゴ作成のためのロゴデザイン原則と AI 画像生成のベストプラクティス。ロゴの種類、プロンプト技法、スケーラビリティのルール、反復ワークフローをカバー。用途：ブランドアイデンティティ、スタートアップのロゴ、アプリアイコン、favicon、ロゴコンセプト。トリガー：logo design、create logo、brand logo、logo generation、ai logo、logo maker、icon design、brand mark、logo concept、startup logo、app icon logo
ui.inference.sh が提供する React/Next.js 向けチャット UI のビルディングブロック。コンポーネント：コンテナ、メッセージ、入力、入力インジケーター、アバター。機能：チャットインターフェース、メッセージリスト、入力処理、ストリーミング。用途：カスタムチャット UI の構築、メッセージングインターフェース、AI アシスタント。トリガー：chat ui、chat component、message list、chat input、shadcn chat、react chat、chat interface、messaging ui、conversation ui、chat building blocks
ユーザーが「公開前にランディングページを確認して」「Quality-Score の事前チェックを実行して」「公開前に広告とページのメッセージの一致を確認して」と依頼した場合に使用。メッセージの不一致、ファーストビューの確認、ページ速度の評価、フォーム入力の負担数、モバイル表示の問題を含む、広告とページの連続性レポートを合格／修正リストとして作成する。ページの再設計や書き換えには landing-optimizer、アカウントや RQS の評価には ad-account-auditor を使用。ランディングページ体験の事前チェック／広告とランディングページの整合性確認
GPUI Kit デスクトップアプリケーションの規範的デザインガイド。GPUI Kit（gpui-kit / gpui-component）アプリケーションで画面、レイアウト、间距、視覚階層、色、密度、コンポーネント選定、インタラクション状態、オーバーレイ、モーション、データ密集型ビュー、UI コピーを設計・変更する場合、および UI 仕事のデザイン品質をレビューする前に、必ず全文を読むこと。デザインルールが何か、ある UI 決定がそれに従っているかを問われた場合にも使用してください。
Libraries.dev の UI エフェクトライブラリを正しく使い、プロジェクトでの活用箇所を見つける。Border beam（border-beam）、Thinking orbs（thinking-orbs）、Gooey（liquid-gooey）、Voice（voice-glow）、Bot avatars（bot-avatars）、Liquid metal（metal-fx）、Image（img-fx）を対象とする。AI の思考中・読み込み状態の追加、入力欄やカードの周囲の発光・アニメーションするボーダー、音声やマイクの可視化、アニメーションするボットやエージェントのアバター、液态メタルのボタンやバッジ、画像生成のプレースホルダーや表示、グー状のエフェクトやリキッドメニューを追加する場合、またはユーザーが libraries.dev やこれらのパッケージに言及.Shenzhen、また「review my project for libraries.dev」「where could I use these effects」、コマンド libraries reveal、libraries review、libraries apply の場合にも使う。
AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。