Skills
エージェント向けにパッケージ化された専門スキルと手順を 96,981 件掲載。コマンド 1 行でインストールできます。
デザイン・UI
React と Next.js のフロントエンドを監査し、ユーザー向けの欠陥をコードと描画される UI から検出する。対象は、状態の欠落、データ損失、二重送信、フォーカスとキーボードの問題、ロールバックの不備、古い非同期データ、アクセシビリティのマークアップ、レイアウトの耐性、パフォーマンス設定、タイポグラフィ、モーションの-parents，微細コピーなど。file:line 単位の指摘事項とリリース可否の判定を返す。「この PR の UX バグをレビューして」「このコンポーネントを監査して」「UI を確認して」「アクセシブルか」「このページをデザイン QA して」「リリースしていいか」と依頼されたときに使う。プロダクトの意思決定には product-design、Agent アプリには ax-audit、詳細なタイポグラフィやモーションには typography-audit または ui-animation、文字列-existence ではなく表現が対象の場合は copywriting を使う。
ユーザーが React 19 + Tailwind v4 のプロジェクトでチャット、エージェント、ツール呼び出し UI を構築または変更したいと求めたときに必ず使う。特にコードが `@/components/agent-elements/*` からインポートする場合、またはそのフォルダがディスク上にある場合。発動キーワード: 「agent chat」「tool call UI」「streaming chat」「plan approval」「AgentChat」「InputBar」「tool renderer」、Agent Elements への言及、shadcn を使って新しいエージェント画面を追加する依頼。ツール/計画/承認カードが不要なシンプルなチャット UI や、別のエージェント UI キットにコミット済みのプロジェクトには使わない
Syncfusion React AI AssistView コンポーネントを実装します。AI 搭載の対話型インターフェース、AssistView のセットアップ、会話フロー、音声入力・出力、ファイル添付、UI カスタマイズ、状態管理、思考連鎖推論の可視化、動的ツールを備えた生成 UI、AI テレメトリーと利用状況の追跡、プロンプトエディターのメンション、React アプリでの OpenAI や Azure AI などの AI サービス連携に使用します。
Syncfusion React Dashboard Layout コンポーネントを使って、レスポンシブでインタラクティブなダッシュボードレイアウトを構築します。ドラッグ可能なパネル、リサイズ可能なパネル、レスポンシブなグリッド、動的なパネル管理、状態の永続化を実装します。このスキルでは、複数列のレイアウト、フローティングパネルの配置、豊富なカスタマイズ、ドラッグ＆ドロップによるパネル再配置、React アプリケーションの状態管理を扱います。
実証されたデザイン原則に従い、美的に美しいインターフェースを作成する。UI/UX の構築、インスピレーションサイトのデザイン分析、ai-multimodal によるデザイン画像の生成、視覚的階層と色彩理論の実装、マイクロインタラクションの追加、デザインドキュメントの作成に使用する。chrome-devtools と ai-multimodal でインスピレーションのスクリーンショットを取得・分析するワークフロー、美学基準を満たすまでのデザイン画像の反復生成、BEAUTIFUL（美学原則）、RIGHT（機能性/アクセシビリティ）、SATISFYING（マイクロインタラクション）、PEAK（ストーリーテリング）の各段階を網羅する包括的なデザインシステムのガイダンスを含む。chrome-devtools、ai-multimodal、media-processing、ui-styling、web-frameworks の各スキルと連携する。
ローンチ動画、製品フィルム、モーションデザイン作品、UI モーションリール、Dribbble 風 UI アニメーション、アニメーション付きブランド／ロゴ演出など、カーソル、変形する UI、スプリング、ビートに同期した音楽や効果音を含み、HTML から MP4 にレンダリングするものを依頼された場合に使用します。Chan の完全なクリエイティブディレクション（単一の形状を途切れさせない、ぼかしによるコンテンツ切り替え、スプリング、実データ、ロゴの強い登場、創造性に制限なし）と、実証済みのビルド／レンダリングパイプライン（純粋な seek(t)、閉形式のスプリング、Playwright のサブフレーム、ffmpeg tmix、numpy のビートグリッド）を備えています。
Syncfusion React BlockEditor コンポーネントを実装し、ブロックベースのコンテンツ編集を行います。ブロックベースのリッチコンテンツ編集、ドキュメントの作成、CMS インターフェース、Markdown の代替手段、エディターの設定、ブロック構成、ツールバーやメニューのカスタマイズ、ドラッグ＆ドロップの挙動、書式オプション、API、アクセシビリティ、Yjs 統合によるリアルタイム共同編集、ユーザーのオンライン表示とリモートカーソル、React におけるドキュメントのバージョン履歴とスナップショットの管理にこのスキルを使用します。
階層データの表示のために Syncfusion React TreeView コンポーネントを実装します。ノード選択、ドラッグ＆ドロップでの並べ替え、インライン編集、カスタムテンプレートに対応します。組織図、ファイルシステム、ナビゲーションツREEなど、複数階層のインターフェースを構築_ha_this_use_purpose uring 場合に使用します。選択モード、チェックボックス、フィルタリング、ソート、キーボードナビゲーション、アクセシビリティ、ステートレステンプルによるパフォーマンス最適化を扱います。
React/TypeScript アプリケーションのフロントエンド開発ガイドライン。Suspense、遅延ロード、useSuspenseQuery、features ディレクトリによるファイル構成、MUI v7 のスタイル、TanStack Router、パフォーマンス最適化、TypeScript のベストプラクティスといったモダンなパターンを対象とする。コンポーネント、ページ、機能の作成、データの取得、スタイル設定、ルーティング、フロントエンドコードの作業で Empower する。
ヘブライ語のウェブアプリに右から左（RTL）レイアウトを実装します。RTL レイアウト、ヘブライ語のテキスト方向、双方向（bidi）テキスト、ヘブライ語の CSS、「right to left」、またはヘブライ語の Web UI の構築についてユーザーが問い合わせた場合に使用します。CSS 論理プロパティ、:dir() 疑似クラス、Tailwind RTL、React/Next.js の RTL 設定、アイコンの反転、ヘブライ語のタイポグラフィとフォント選択を扱います。ユーザーが明示的に共通 RTL パターンを求めない限り、アラビア語の RTL（類似しますがタイポグラフィは異なります）には使用しないでください。ネイティブモバイルの RTL（React Native I18nManager、SwiftUI、Android）も対象外です。
Apple Human Interface Guidelines のレイアウトおよびナビゲーションコンポーネントについてのガイド。ユーザーが「サイドバー」「スプリットビュー」「タブバー」「タブビュー」「スクロールビュー」「ウィンドウデザイン」「パネル」「リストビュー」「テーブルビュー」「カラムビュー」「アウトラインビュー」「ナビゲーション構造」「アプレイアウト」「ボックス」「 Ornament」について尋ねているとき、または Apple アプリ内でコンテンツを階層的に整理する方法を尋ねているときに使用します。「アプリはどう整理すればいい？」「どのナビゲーションパターンを使うべき？」「iPad でレイアウトが崩れる」「サイドバーの作り方」「タブとサイドバーのどちらを使うべき？」「画面サイズが変わるとアプリが適応しない」といった発言にも使用します。相互参照：レイアウト/スペーシングの原則は hig-foundations、プラットフォーム固有のナビゲーションは hig-platforms、マルチタスクとフルスクリーンは hig-patterns、コンテンツ表示は hig-components-content。
スクロールストーリーテリング、パララックスによる奥行き、テキストアニメーション、上質なスクロール効果を使い、没入感のあるシネマティックな 2.5D インタラクティブサイトを構築する。WebGL は不要。ランディングページ、製品サイト、ヒーローセクション、スクロールアニメーション、パララックス、スティックセクション、セクションの重ね合わせ、セクション間を漂う製品、clip-path による表示、左右から飛んでくるテキスト、スクロールで点灯する単語、カーテン降り、虹彩のオープン、カードスタック、ブリードタイポグラフィ、シネマティックかつ上質なサイトなど、あらゆる Web デザインタスクでこのスキルを使う。「生き生きした感じにして」「Apple 風アニメーション」「セクションが重なって見える」「製品がセクション間を floating」「没入感」「scrollytelling」などのフレーズや、スクロール駆動のビジュアル効果で発動する。8 カテゴリで 45 以上のテクニックをカバー。コーディング前に必ずアセットを調査・評価・計画する。あらゆる Web デザインタスクで積極的に使ってほしい。
Apple Human Interface Guidelines のインタラクションおよび UX パターン。ユーザーが「onboarding flow」「user onboarding」「app launch」「loading state」「drag and drop」「search pattern」「settings design」「notifications」「modality」「multitasking」「feedback pattern」「haptics」「undo redo」「file management」「data entry」「sharing」「collaboration」「full screen」「audio」「video」「haptic feedback」「ratings」「printing」「help」、あるいは Apple アプリの「account management」について尋ねたときにこのスキルを使用します。また、「how should onboarding work」「my app takes too long to load」「should I use a modal here」「how do I handle errors」「when should I ask for permissions」「how to show progress」「what's the right way to confirm a delete」という買い YepPurchaseにも使用します。相互参照：hig-foundations（基礎原則）、hig-platforms（プラットフォーム固有の事項）、hig-components-layout（ナビゲーション）、hig-components-content（データ表示）。
ユーザーがあらゆる製品や会社のブランドガイドラインを適用・文書化・徹底したいときに使用します。「ブランドガイドライン」「ブランドカラー」「タイポグラフィ」「ロゴの使用」「ブランドボイス」「ビジュアルアイデンティティ」「トーン・オブ・ボイス」「ブランド基準」「スタイルガイド」「ブランドの一貫性」「会社のデザイン基準」などという言及があった場合にも使用します。色彩システム、タイポグラフィ、ロゴのルール、画像のガイドライン、トーンマトリクスをあらゆるブランドを対象に扱います。Anthropic の公式アイデンティティも対象です。
フロントエンド UI を監査・書き換え、一般的な AI デザインパターン（「AI slop」）を取り除きます。紫のグラデーション、Inter、3 枚のカード上に中央配置されたヒーロー、手を加えていない shadcn などの第一段階の定番パターンと、クリーム色にテラコッタ、ほぼ黒に酸性グリーン、全大文字の等幅フォントのクローム、見出しの単語 1 つだけを強調、装飾的な 01/02/03 などの第二段階の「気の利いた AI」パターンが対象です。「UI の AI 臭さをなくす」「AI 生成らしさを減らす」「ページやコンポーネントの AI デザインの兆候を監査する」「Claude/Codex が生成したありきたりなフロントエンドを直す」と依頼された場合や、複数ページのサイトでデザインシステムを統一する場合に使用します。HTML/CSS、React/Tailwind/shadcn に対応します。検出のみのモードと、コードで確実に判断できる特徴を検出する依存関係不要のスキャナー（scripts/detect.mjs）を備えています。
AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。