Skills
エージェント向けにパッケージ化された専門スキルと手順を 96,770 件掲載。コマンド 1 行でインストールできます。
デザイン・UI
最新のドキュメントを使って Tailwind Variants のクラスシステムを構築、レビュー、デバッグ、移行、または計画する。tailwind-variants、tv、createTV、cn、cnMerge、cx、VariantProps、slots、compoundVariants、compoundSlots、defaultVariants、extend による合成、twMergeConfig、/lite ビルド、クラスの上書き、TypeScript props、Tailwind CSS v4 との組み合わせ、および v0/v1/v2/v3.x から v3.3.1 へのアップグレードに使用。
TheSys C1 Generative UI API（@thesysai/genui-sdk と @crayonai/react-ui）を扱う。プレーンテキストの LLM 出力ではなく、フォーム、チャート、テーブルなどのインタラクティブなコンポーネントをストリーミングする React アプリ向け。Vite + React、Next.js、Cloudflare Workers の統合と、OpenAI、Anthropic Claude、Workers AI をバックエンドにした構成、さらに C1Component と ThemeProvider、Zod スキーマによるツール呼び出し、テーマ設定、スレッド管理と永続化、本番デプロイを扱う。会話型 UI、AI アシスタントやコパイロット、AI 生成ダッシュボード、動的フォームを構築する場合、または空のエージェント応答、ストリーミングとレスポンス変換の失敗、無視されるシステムプロンプト、テーマが適用されない、SDK/API のバージョン不一致、CORS の失敗、レート制限によるクラッシュをデバッグする場合に使用する。
thumb-first モバイルスイートの技術検証レイヤー——モバイル Web アプリと PWA（iOS Safari、Android Chrome）における客観的なプラットフォーム欠陥を見つけて修正する。viewport/100vh のバグ、safe-area インセット、タッチターゲットとタップ遅延、service worker、web push、PWA manifest、Core Web Vitals を網羅し、意見ではなくファイル/行単位の欠陥と修正を示す。ターゲット認識型：Web/PWA は完全にカバーし、ネイティブアプリ（React Native、Expo、SwiftUI、Flutter）ではターゲットを検出し、ネイティブスキルがインストールされていれば引き継ぎ、なければネイティブプラットフォームの監査は行わないと明言する。モバイル Web/PWA の技術監査、safe-area/ノッチ問題、100vh オーバーフロー、service worker/オフライン、インストール/manifest、モバイルパフォーマンスに使用する。通常は /thumb-first の包括エントリ経由で実行され（設計パスも実行する）、技術チェックのみの場合は直接呼び出す。
ui.inference.sh が提供する React/Next.js 向けツールライフサイクル UI コンポーネント。ツール呼び出しを表示：保留中、進行中、承認必要、結果。機能：ツールステータス、進捗インジケーター、承認フロー、結果表示。用途：エージェントのツール呼び出しの表示、ヒューマン・イン・ザ・ループの承認、ツール出力。トリガー：tool ui、tool calls、tool status、tool approval、tool results、agent tools、mcp tools ui、function calling ui、tool lifecycle、tool pending
ui.inference.sh が提供する React/Next.js 向けツールライフサイクル UI コンポーネント。ツール呼び出しを表示：保留中、進行中、承認必要、結果。機能：ツールステータス、進捗インジケーター、承認フロー、結果表示。用途：エージェントのツール呼び出しの表示、ヒューマン・イン・ザ・ループの承認、ツール出力。トリガー：tool ui、tool calls、tool status、tool approval、tool results、agent tools、mcp tools ui、function calling ui、tool lifecycle、tool pending
フロントエンドのデザインと実装向けの Codex UI アンチスロップワークフロー。Codex がユーザーインターフェースを構築、レビュー、修正、スタイリング、再設計、改善するときに自動で使用します。ランディングページ、ダッシュボード、アプリ UI、管理パネル、エディター、チェックアウトと料金設定のフロー、ドキュメント、モバイル UI、ビジュアル QA、スクリーンショット、DESIGN.md デザインシステムのほか、ユーザーが ai-slop、anti-slop、visual contract、make it look better、less generic と言う場合や、$ui-anti-slop-codex / ui-anti-slop-codex を呼び出す場合に使用します。
ウェブアプリケーションのユーザージャーニー、画面フロー、インタラクションの流れをマッピングします。ユーザーの画面遷移の計画、複数ステップのワークフロー定義、ユーザージャーニーのマッピング、ナビゲーション構造の設計、インタラクションフローの検討に使用します。オンボーディングフロー、チェックアウト、CRUD ワークフロー、設定管理、エラー復旧経路など、複数画面にわたるユーザー体験も対象です。「ユーザーフロー」「画面フロー」「ジャーニーマップ」「インタラクションデザイン」「ワークフロー」という語が出た場合もトリガーされます
確立されたUX原則に照らしてUIのデザインと実装を評価します。ユーザーがUXヒューリスティック評価、ユーザビリティレビュー、UX批評、またはベストプラクティスに基づくデザイン分析を求めたときに使用します。「UXを評価して」「ヒューリスティック評価」「UXレビュー」「ユーザビリティの批評」「UXのベストプラクティスに沿っているか」「UX上の問題は何か」「このデザインを批評して」「このフローをレビューして」といった依頼や、スクリーンショットまたはHTMLファイルへのUXフィードバック依頼が対象です。「システム状態の可視性」、Fittsの法則、Hickの法則、認知負荷、Nielsenのヒューリスティクス、UXの法則など、特定の原則に言及した場合も使用します。
紅包カバー（WeChat のお年玉カバー）デザインスキル。WeChat 紅包カバー開放プラットフォームの仕様に準拠したカバーデザイン画像を生成する。カバー画像、カバーアクセサリー、バブルアクセサリー、カバーストーリー素材を含む。このスキルは、ユーザーがゼロから WeChat 紅包カバープラットフォーム基準に適合する完全な素材セットを設計し、すべての素材がプラットフォームの審査を円滑に通過し、プロフェッショナルでおめでたいビジュアル効果を実現するのを支援する。
ui.inference.sh による React/Next.js 向けの JSON ベースの宣言的 UI ウィジェット。構造化されたエージェント応答からリッチでインタラクティブな UI をレンダリング。機能：フォーム、ボタン、カード、レイアウト、入力、セレクト、チェックボックス。用途：エージェントが生成する UI、動的フォーム、データ表示、インタラクティブなカード。トリガー：widgets、declarative ui、json ui、widget renderer、agent widgets、dynamic ui、form widgets、card widgets、shadcn widgets、structured output ui
段階的なUX生成。フェーズ1では白黒のワイヤーフレーム案を5つ（堅実な案1つ＋探索的な案4つ）即座に生成し、フェーズ2では5つのTaskエージェントを並列実行して、各案のClean版とPolished版のカラー案をレンダリングします。ワイヤーフレームのみ、またはワイヤーフレームとビジュアルの両方に対応します。引数がある場合は最適化の意図を抽出します。デザインのコンテキストを継続的に保持します。ユーザーが「wireframe」「prototype」「UX options」「layout exploration」と言った場合に使用します。
ドキュメントサイト、フロントエンドサイト、または monorepo 内の複数サイト向けに favicon.svg を補完または作り直す。ユーザーが favicon、ブラウザのタブアイコン、Iconify、Lucide スタイル、VitePress/VuePress ドキュメントサイト、public/favicon.svg、head link icon、アイコンが醜い/ぐちゃぐちゃ/背景ブロック不要に言及した場合は必ず使用する。特に複数の VitePress サイト向けにローカル SVG favicon を一括で設計し、head を明示的に設定するのに適する。
ui.inference.sh の React/Next.js 向けバッテリー同梱のエージェントコンポーネント。ランタイム、ツール、ストリーミング、承認、ウィジェットを 1 つのコンポーネントに内蔵。機能：ドロップインのエージェント、human-in-the-loop、クライアント側ツール、フォーム入力。用途：AI チャットインターフェース、Agentic UI、SaaS コパイロット、アシスタントの構築。トリガー：agent component、agent ui、chat agent、shadcn agent、react agent、agentic ui、ai assistant ui、copilot ui、inference ui、human in the loop。
ユーザーが Bootstrap のフォーム、Bootstrap のフォームコントロール、Bootstrap の入力フィールド、Bootstrap の select、Bootstrap のチェックボックス、Bootstrap のラジオボタン、Bootstrap のスイッチ、Bootstrap の範囲入力、Bootstrap の input group、Bootstrap のフローティングラベル、Bootstrap のフォーム検証、Bootstrap のフォームレイアウト、Bootstrap のトグルボタンについて質問する場合、Bootstrap でフォームを作成する方法、Bootstrap でのフォームのスタイル設定と検証について支援が必要な場合、フォームを作成したい、フォーム検証を追加したい、フォーム入力をスタイリングしたい、インラインフォームを作りたい、入力にフローティングラベルを追加したい、ログインフォームを作成したい、登録フォームを構築したい、ユーザー入力を検証したい場合に、このスキルを使用します。
ユーザーが Bootstrap ユーティリティ、Bootstrap の余白ユーティリティ、Bootstrap のマージンユーティリティ、Bootstrap のパディングユーティリティ、Bootstrap の表示ユーティリティ、Bootstrap の flex ユーティリティ、Bootstrap のテキストユーティリティ、Bootstrap の色ユーティリティ、Bootstrap の背景ユーティリティ、Bootstrap のボーダーユーティリティ、Bootstrap のシャドウユーティリティ、Bootstrap のサイズユーティリティ、Bootstrap の位置ユーティリティ、Bootstrap の可視性ユーティリティ、Bootstrap のオーバーフローユーティリティ、Bootstrap の不透明度ユーティリティ、Bootstrap のフロートユーティリティ、Bootstrap の垂直方向の配置ユーティリティ、Bootstrap のリンクユーティリティについて質問する場合、または Bootstrap のユーティリティクラスについて支援が必要な場合に、このスキルを使用します。
プロダクトエンジニアが Earth Design System（EDS、`@adaptavant/eds-core`）を使って UI を構築、移行、拡張したいときにこの skill を使用する。トリガーには「build with EDS」「use EDS」「EDS component」「migrate to EDS」「convert to EDS」への言及、`@adaptavant/eds-core`/`@adaptavant/eds-icons` への参照、「add a form/page/modal using EDS」のようなリクエストが含まれる。明確なリクエストから EDS 準拠の動作する JSX を即座に構築する共同執筆者／相棒として機能し、その過程で EDS のガードレールを徹底する。EDS ライブラリ自体のバグ修正（`/bug-fix-workflow` を使用）や PR 説明の作成（`pull-request-author` を使用）にはこの skill を使用しない。
市場データとアバター生成を伴う、リサーチに基づく顧客ペルソナの作成。デモグラフィック、サイコグラフィック、ジョブ・トゥ・ビー・ダン、ジャーニーマッピング、アンチペルソナを扱う。用途: マーケティング戦略、製品開発、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
EChartsテーマ、チャートテンプレート、D2図テンプレート、CSS/HTMLでデータを拡張した図のパターンを備えた、データ可視化、ダッシュボード設計、図解のエキスパートです。ユーザーがチャート、ダッシュボード、KPIカード、データテーブル、図、フローチャート、またはデータやシステム構造の視覚表現を作成するときは、「dataviz」と明言していなくても使用します。Recharts、ECharts、チャートコンポーネント、棒グラフ／折れ線グラフ／散布図、ダッシュボードのレイアウト、KPIカード、スパークライン、データストーリーテリング、指標の可視化、ヒートマップ、ツリーマップ、サンキーダイアグラム、データ用カラーパレット、軸ラベル、チャートタイトル、データインク比、フローチャート、プロセスフロー、アーキテクチャ図、シーケンス図、ERD、組織図、システム図、パイプラインの可視化、D2図、「データを見せて」「指標を可視化して」「図を描いて」「アーキテクチャを図示して」「流れを見せて」といった依頼に対応します。既存のチャートや図の品質、アクセシビリティ、デザイン改善をレビューするときにも使用します。チャートや図の作成または議論があれば、このスキルが適用されます。
レイアウトパターン、件名の公式、配信到達性のルールを備えたメールマーケティングのデザイン。ウェルカムシーケンス、プロモーションメール、トランザクションメールのテンプレート、モバイル最適化を扱います。用途：メールマーケティング、ニュースレターのデザイン、ドリップキャンペーン、メールテンプレート、トランザクションメール。トリガー：email design、email template、email marketing、newsletter design、email layout、email campaign、drip campaign、welcome email、promotional email、transactional email、email subject line、email header image、email banner。
AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。