Skills
エージェント向けにパッケージ化された専門スキルと手順を 97,501 件掲載。コマンド 1 行でインストールできます。
デザイン・UI
タスクがウェブページに動画や音声を追加、埋め込み、変更するときは常に使用する。プレイヤーがまだ選ばれていない段階でもよい: HTML の `video` または `audio` 要素、プレイヤーコンポーネント、ポッドキャストプレイヤー、ヒーロー動画や背景動画、ライブ配信。React コンポーネントまたは HTML カスタム要素で、カスタマイズ可能でアクセシブルな Video.js 10 プレイヤーを React/Next.js、Vue/Nuxt、Svelte/SvelteKit、Astro、CDN ページ向けに構築する。カスタム UI とスキン、キャプション、HLS、DASH、DRM、キャスティング、分析、ホスト型メディアを扱う。Video.js 8 への移行や Plyr、Media Chrome、Mux Player、Vidstack、react-player との比較にも使用する。まずインストール済みパッケージのバージョンに合わせたインストール手順とドキュメントから始め、次に videojs.org を参照する。
横スワイプ式のウェブスライドを単一の HTML ファイルとして生成します。WebGL 背景、プレゼンタービュー、同期された観客画面、発表者ノート、セクションカバー、大きな数字を使ったデータスライド、画像グリッドに対応します。ビジュアルシステムは「電子雑誌 × 電子インク」（セリフ体、流動的な背景、暖色系）と「スイス・インターナショナル」（サンセリフ体、グリッド、高彩度のアクセントカラー）の 2 種類です。スライド画像とプラットフォーム用カバーも生成します。出力は HTML で、.pptx ではありません。スキルのテキストは中国語が中心です。
shadcn-svelte、Bits UI、または shadcn-svelte MCP を使って SvelteKit のページや再利用可能なコンポーネントを構築、再設計、改善、リファクタリングするときに使用します。ランディングページ、ダッシュボード、マーケティングサイト、アプリシェル、フォーム、ナビバー、テーブル、ダイアログ、チャート、サイドバー、認証画面、ブロック、レスポンシブレイアウト、テーマ設定、アイコン選定、コンポーネントや CLI のインストールに関する質問、アイデアや粗いモックアップを洗練された Svelte UI に仕上げる依頼が対象です。コンポーネント API を捏造しないでください。
エンタープライズ SaaS フロントエンド — Tailwind v4、shadcn/ui、Next.js App Router または Vite SPA、アクセシビリティ、レスポンシブデザイン、コンポーネントパターン。React コンポーネント、Next.js ページ、フロントエンド UI、Tailwind、shadcn、アクセシビリティ、a11y、レスポンシブデザイン、フォーム検証、サーバーコンポーネント、クライアントコンポーネント、デザインシステム、ダークモード、SaaS UI、ダッシュボード、料金ページ、エンタープライズ UI、データテーブル、ランディングページ、Vite、React Router、SPA、シングルページアプリに使用します。
QC 済みで実際のタイムスタンプを持つ字幕素材から、一貫した本番用字幕をレンダリング、プレビュー、検証し、映像に焼き込みます。AI 動画制作、洗版動画制作、IndexTTS2 の解説動画、実用的な長尺動画、トーク映像の編集、Kimi 風のダークな角丸字幕、暖色系ホワイトの半透明字幕、字幕のスタイリングやオーバーレイ、字幕サイズ・位置・影・ずれ・4K スケーリングの修正に使用します。最終的な単語単位のタイムスタンプがまだない場合は、必ず ra-audio-to-subtitles と併用してください。
すべての画面で、通常でない状態を適切に処理します。AsyncValue または sealed view state に対する単一の switch で読み込み・空・エラー・コンテンツを処理し、isLoading+error+data の3つの bool は使いません。ちらつくスピナーではなく、結果の形に沿った遅延表示のスケルトンを使います。更新中も古いコンテンツを画面に残します。「まだ何もない」と「このフィルターに一致するものがない」を区別し、それぞれに操作を用意します。エラー文には型付き Failure コードを使い（e.toString() は使わず）、provider を無効化する再試行を用意します。インライン、スナックバー、バナー、ダイアログの順に表示方法を選び、今すぐ解決すべき判断がある場合に限ってモーダルを使います。確認ダイアログよりソフト削除と Undo を優先します。showDialog の null による閉じ方を独立した結果として扱い、await の前に ScaffoldMessenger を取得し、視覚のみの変更も通知します。読み込み・空・エラー・オフラインの UI の作成、AsyncValue.when、showDialog、showModalBottomSheet、showSnackBar、showMaterialBanner の呼び出し、確認・Undo・再試行の追加時に使用します
デザイナーの役割。deck.md を読み込み、CSSデザインシステム、JSスライドエンジン、各スライドのコンテンツを含む単一のHTMLプレゼンテーションファイルを生成します。ビジュアルリファレンス（URL、スクリーンショット、デザイン仕様）を受け取り、同型マッピングに役立つデザイン要素を抽出します。ユーザーが「スライドをデザイン」「デッキを生成」「スライドを作成」「ビジュアルスタイル」「このスタイルを参考に」「このデザインのように」「デザイン」「スライドを生成」と言った場合や、アウトラインを実際のスライドにしたい場合に使用します。
プロダクト向けのデザインシステム採用計画を作成する — 独自 UI を解体し、すべてのカスタムパターンをデザインシステムの代替に対応付け、工数を見積もり、優先順位付けされた段階的な構築スケジュールを返す。ユーザーが既存プロダクトでデザインシステムを採用・移行・全面的に取り入れたいとき、「これを私たちのデザインシステムに移すには何が必要か？」と尋ねるとき、カスタム CSS をシステムコンポーネントに置き換えたいとき、採用/移行計画や見積もりを求めるときに使用する。ds-inspection と product-inspection のコンパニオン — これらの検査は警告サインを見つけ、本スキルは改修見積もりと構築スケジュールを生み出す。
参考画像や簡単な説明を、編集可能なハーフトーン紙コラージュ仕様に変換します。デフォルトでは Codex 組み込みの image_gen でブランドに一貫性のある静止画と透過レイヤーを生成し、ローカルの FFmpeg または HyperFrames で、空の背景から一つずつ組み上げる決定論的なモーション動画を作成します。ハーフトーンコラージュ、紙コラージュ、切り絵コラージュ、エディトリアルコラージュ、雑誌コラージュ、レトロ印刷コラージュ、コラージュのモーションやアニメーション、切り絵アニメーション、紙片の組み立て、レイヤーごとの組み立て、ゼロからの構築、要素が飛び込んで組み上がる表現、ストップモーションコラージュ、ストップモーションアニメーション、Arcads スタイル、参考画像やスタイルの分析、ビジュアル表現のリバースエンジニアリング、このスタイルや類似のものの制作、コラージュ静止画の生成、画像のアニメーション化、要素の組み立て、コラージュ広告や解説動画の制作に関する依頼で使用します。英語のトリガー表現には editorial collage、halftone collage、paper collage、paper-cut motion、stop-motion graphic、assemble from empty、build-on motion、analyze this、break this down、reverse-engineer this look、generate the stills、animate this、make these move などがあります。Arcads、Nano Banana、Seedance、Kling はデフォルトでは呼び出しません。ユーザーが明示的に求め、対応するコネクターが利用可能な場合に限り、外部生成経路を使用します。
Kuikly Compose DSL フレームワークの開発アシスタント。Kuikly Compose DSL 構文を使ったクロスプラットフォーム UI 開発を支援し、Compose コンポーネント、Modifier、アニメーション、ジェスチャー、状態管理、ナビゲーション、ViewModel などの API の正しい使い方と完全なコード例を提供します。Kuikly Compose のページ開発、コンポーネントの使用、レイアウト実装、アニメーション、状態管理、ナビゲーションルーティングで、Kuikly Compose コードを書く際に使用します。従来の Kuikly DSL（attr/event 構文）を使う場合は、kuikly-ui-framework skill を使用してください。
lucide-rails gem を通じて Rails アプリケーションで Lucide アイコンを使用するための専門的なガイダンス。アイコンの追加、アイコン名の選択、SVG アイコンのスタイリング、アイコンのアクセシビリティ対応、アイコンベースの UI パターン（ボタン、ナビ、バッジ、空の状態）の構築に使用します。トリガー："lucide"、"icon"、"lucide-rails"、"SVG icon"、"icon library"、"lucide_icon"、"feather icon"、"inline SVG"、"add an icon"、"icon button"、"icon name"。
Markdown の長文を小紅書向けの 3:4（1080×1440）画像セットに変換する Agent スキルです。5 種類のデザインスキン（E 雅刊・デフォルト / A 暖杏奶咖 / B 雾松青 / C 黛墨描金 / D 夜读鎏金）と、複数のページレイアウトを備えた女性向けテーマ 3 種（F 粉色王国 / G 乙游夜境 / H 吉卜力）を収録しています。Agent が記事を読み、ページ分割して HTML を入力し、Playwright レンダラーが各画像をキャプチャして PNG で書き出します。「長文を画像に」「小紅書向けの長い画像」「この記事を小紅書向けの画像やカードに」「記事を画像に」「デザイン案に合わせて組版」「3:4 の画像セットに変換」といった依頼や、「女性向け／ガーリー／ピンク／乙女ゲーム風／ジブリ風」のレイアウトを希望する場合、または記事を提供して小紅書への投稿に言及した場合に使用します。
デバイスやプラットフォームの判定ではなく、利用可能な制約／サイズに応じたレイアウト調整を徹底します。狭い範囲での再ビルドには LayoutBuilder + MediaQuery.sizeOf/paddingOf/viewInsetsOf（.of は使用しない）を使用します。ブレークポイントの基準には Material 3 のウィンドウサイズクラス（compact <600、medium 600-840、expanded 840-1200、large >1200）を使います。幅に応じてナビゲーション形式を選択します（NavigationBar → NavigationRail → NavigationDrawer）。リストと詳細画面は単一ペイン／2 ペインに切り替え、ConstrainedBox で読みやすい最大幅を設定し、固定幅より Flexible/Expanded/FractionallySizedBox を優先します。SafeArea、ディスプレイの切り欠き、キーボードのインセットを考慮し、画面の向きは固定しません。MediaQuery.displayFeatures で折りたたみ端末／ヒンジを考慮し、各サイズのゴールデンマトリクスで検証します。レスポンシブまたはアダプティブ UI、タブレット／デスクトップ／折りたたみ端末対応、マスター詳細または 2 ペイン画面、NavigationRail と BottomNav のシェル、ブレークポイント、LayoutBuilder、MediaQuery によるサイズ調整、SafeArea／切り欠き、大きな幅でのオーバーフロー修正に使用します。
モダン CSS（Tailwind 不使用）を用いた Rails アプリケーションの CSS アーキテクチャに関する専門ガイダンス。スタイルシートの記述、CSS ファイルの整理、ダークモードの実装、デザイントークンの定義、CSS カスタムプロパティの使用、コンポーネントスタイルの作成、CSS レイヤー（@layer）の使用、light-dark() 関数の使用、カラースキームの設定、保守性を考慮した CSS の構成時に使用。デザイントークン、セマンティックなカラーシステム、コンポーネントスコープのスタイル、ユーティリティクラス、レスポンシブパターン、ファイル構成を扱う。
チャート選択、色彩理論、注釈のベストプラクティスを扱うデータ可視化。チャートタイプ（棒、折れ線、散布図、ヒートマップ）、軸のルール、データによるストーリーテリングを網羅します。用途：チャート、グラフ、ダッシュボード、レポート、プレゼンテーション、インフォグラフィック、データストーリー。トリガー: 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
このスキルは、レンダリングされた UI のビジュアルクラフト監査を実行し、Useful、Usable、Reliable、Coherent、Well-Crafted にわたる証拠に基づく Craft Report を作成するために使用します。スクリーンショット（.png、.jpg、.jpeg、.webp、.gif）、Figma フレーム、レンダリングされたプロトタイプ、ライブ URL に対するクラフト監査、ビジュアル批評、デザイン比較、体感品質レビュー、ビジュアルクラフト準備状況チェックに呼び出してください。ソースコードレビュー、SLDS 準拠（design-systems-slds-validate を使用）、アクセシビリティ準拠（experience-accessibility-validate を使用）には使用しないでください。
CSS の作成、リファクタリング、レビューの際は常に、エージェントと人が一貫して記述できるよう、この明確なルールを適用します。Modern Web Guidance スキルを補完し、アーキテクチャ、レイアウト、タイポグラフィ、色、モーションについて同スキルで選択が委ねられている点を定めます。「このプロジェクトの基本スタイルを設定して」「このコンポーネントにスタイルを適用して」「レスポンシブにして」「ダークモードを追加して」「スタイルの適用範囲を限定して」「流動的な文字サイズのスケール」「スタイルをモダン CSS にリファクタリングして」などの依頼や、ページまたはコンポーネントの構築依頼に使用します。ユーザーが「CSS」と明言していない場合も、あらゆる CSS タスクで使用します
Three.js、GSAP ScrollTrigger、React Three Fiber、Framer Motion、Babylon.js、A-Frame、PixiJS、Locomotive Scroll、Barba.js、React Spring、Magic UI、AOS、Anime.js、Lottie、Rive、Spline、およびBlenderからWebへのパイプラインを網羅する、モーションとクリエイティブコーディングのスキルパッケージ。利用可能な中でも幅広いモーション／クリエイティブスイートの1つです。
AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。