Skills
エージェント向けにパッケージ化された専門スキルと手順を 97,501 件掲載。コマンド 1 行でインストールできます。
デザイン・UI
単一の Figma コンポーネントまたはコンポーネントセット向けの詳細なアクセシビリティスコアカード — 状態の網羅性（default/hover/focus/disabled/error/active/loading）、フォーカスインジケーターの品質とコントラスト、色以外による状態の区別、ターゲットサイズ、アノテーションの網羅性、色覚シミュレーション（protanopia/deuteranopia/tritanopia）を、カテゴリ別の 0〜100 スコアと優先順位付きの推奨事項にまとめる。ユーザーが出荷前に 1 つのコンポーネントを検証したいときに使用：トリガーは 'audit this component'、'accessibility score for this button'、'is this component set accessible'、'check the states on this component'、'does my button have a focus state'、'color blind check'、'rate this component for a11y'、'component accessibility scorecard'。どの Figma プランでも動作する。ページ/フレーム全体を広くスキャンする場合は figma-lint-design、コード側（HTML）のチェックには figma-scan-code-accessibility を使用する。
Three.js でマテリアルの選択や設定、テクスチャの読み込み、PBR ワークフローの構築を行うときに使用する。テクスチャのカラースペースの誤り、material.dispose() の忘れ、変更後に material.needsUpdate を呼ばないといったよくある間違いを防ぐ。15 種類以上のすべてのマテリアルタイプ、PBR のメタルネス／ラフネス、MeshPhysicalMaterial、テクスチャマップ、カラースペースを扱う。キーワード：MeshStandardMaterial、MeshPhysicalMaterial、material、texture、PBR、metalness、roughness、normalMap、color space、SRGBColorSpace、blurry texture、pixelated、texture quality、filtering。
アクセシビリティのバグレポートを作成、レビュー、生成するときは常にこの skill を読み込む — 自動ツールの出力、手動テスト、ユーザー報告、障害のある人とのテストのいずれによる場合も。この skill の目的は、アクセシビリティの所見を正確に報告しやすくし、実在の人物とタスクに結び付け、開発者が不要なやり取りなしに再現、理解、修正できるようにすることである。WCAG の達成基準を引用する前に、必ず障壁とそのタスクへの影響を記述すること。いかなる状況でも、障害の診断を推測したり、自動ツールの出力を適合の結論として扱ったり、レポートに機密情報や個人データを露出したりしてはならない。
情報密度の高いインターフェース向けのデータダッシュボードと管理パネルのパターン：アプリシェルのレイアウト、KPI タイル、チャートの選択、データテーブル、ステータスバッジ、リアルタイムインジケーター、レスポンシブな挙動。ユーザーが「ダッシュボードを構築する」「管理パネルを作成する」「分析を設計する」「データビューを作る」「設定ページを構築する」「テーブルビューを作成する」「CRM を設計する」「社内ツールを構築する」、またはデータを多用するインターフェース作業を求めたときに使用します。汎用コンポーネントには ui-design、マーケティングの KPI/機能カードには card-design、テーマの詳細には dark-mode を使用します。
Playwright を使って任意のウェブページから構造化データを抽出します。スクリーンショット、デザイントークン、Markdown 形式のページテキスト、インタラクティブ要素マップ、ページ全体のデータパックに対応します。ユーザーがウェブページ全体または要素のスクリーンショット取得、CSS デザイントークンやテーマ情報の抽出、ページ内容の Markdown 変換、リンクやインタラクティブ要素の収集、完全なページ分析パッケージのエクスポートを希望する場合に使用します。Axure プロトタイプ以外のすべての URL が対象です。Axure URL には extract-axure-data を使用します。
Geist デザインシステムを使用して、Next.js アプリとして探索型のインタラクティブな学習体験を構築します。チュートリアル、探索可能な解説、インタラクティブなレッスン、コードサンドボックス、クイズなど、教育向け UI の作成に使用します。Learning Loop の教育法、23 種類以上の学習コンポーネントパターン、進捗トラッキング、間隔反復、Bret-Victor 風のインタラクティブな探索を扱い、Geist のダークファーストなミニマルデザインを採用しています。
React 向けのヘッドレスデータテーブル TanStack Table v8。列定義、ソート、フィルタリング（ファジー／ファセット）、TanStack Query によるサーバーサイドページネーション、無限スクロール、仮想化（TanStack Virtual）、列／行の固定、行の展開／グループ化、列幅の変更、再利用可能な Shadcn スタイルのコンポーネントを扱います。無限再レンダリング、React Compiler との非互換性、サーバーサイドの状態不一致など、記録された15種類のエラーを防ぎます。データテーブルの構築、パフォーマンスの修正、サーバーサイドページネーションの実装、フィルタリング／ソートの追加、テーブル状態の問題のデバッグに使用します。
プロジェクトにパーソナライズ機能、ユーザー設定コントロール、テーマ選択、フォントサイズ調整、モーションの切り替え、コントラスト設定、その他ユーザーが構成できるアクセシビリティ対応がある場合は常にこの skill を読み込む。ユーザーの明示的な同意なしに、ユーザーの OS レベルのアクセシビリティ設定を上書きまたは無視してはならない。必ずユーザー設定を永続化し、即座に適用し、prefers-reduced-motion、prefers-contrast などのメディアクエリを尊重すること。
Playwright（@playwright/test）、TypeScript、axe-core を使用した Web アプリケーションのアクセシビリティテストです。WCAG 2.2 AA チェック、キーボードとフォーカスのテスト、ARIA／セマンティック検証、アクセシブルネーム、フォームラベル、色のコントラスト、スクリーンリーダーのテストパターンの作成、実行、デバッグに使用します。キーワード：アクセシビリティ、WCAG、axe-core、キーボードナビゲーション、フォーカス管理、ARIA。
完全に編集可能な SVG としてアーキテクチャ図を生成する。クラウド図にはネイティブの AWS、Azure、GCP アイコンを、それ以外には手描き風の汎用アイコンを使用する。任意で、自己完結型の編集可能な draw.io mxGraph コンパニオンを提供する。決定的なレイアウトが、手動で配置した座標ではなくゾーンのネストと直交ルーティングを計算する。トリガー: "architecture diagram"、"infra diagram"、"system diagram"、"deployment diagram"、"topology diagram"、"draw architecture"、"AWS diagram"、"Azure diagram"、"GCP diagram"、"cloud infrastructure diagram"、"VPC diagram"、"draw my AWS setup"。ユーザーが、後から Figma、Illustrator、Inkscape、draw.io で編集できる静的なアーキテクチャ図を求める場合に使用する。アーキテクチャレビューには使用しない。architecture-reviewer を使用すること。
Lynx OpenUI レンダラー向けの有効な OpenUI Lang v0.5 関数記法プログラムを生成する。Codex が自然言語の UI リクエストを OpenUiRenderer 用の生の OpenUI DSL に変換する必要がある場合に使用する。静的モバイル UI、$state、Query/Mutation ツールフロー、Action プラン、ストリーミングに適した出力、catalog 制約付きの改訂を含む。JSX、HTML、CSS、A2UI JSON、または新しい ReactLynx コンポーネントの実装には使用しない。
既存の HTML ページ、ランディングページ、口頭説明用スクリプト、メモの草稿、結果表、または構造化された素材を、小紅書のカード形式の画像ノートに変換します。素材をもとにしたページごとのカード構成、カバー文案、カード内テキスト、またはデザイン用の小紅書画像投稿ブリーフを求められた場合に使用します。白紙から通常のノートを書く用途ではありません。特に 3:4 の小紅書カード向けで、画像中心のページと情報量の多いメモ形式のページを組み合わせ、一般的で簡素なカルーセル文案ではなく、明確な情報階層とスクリーンショットに適した文字密度を実現します。
Figma ノードの実際のスペックをコードスペック（コンポーネントがレンダリングする値）と比較し、0〜100 の一致スコア、差分のリスト、修正提案を取得する。デザインからコードへのドリフトを検出するために使用：トリガーは 'check design parity'、'does my code match the Figma'、'compare this component to the design'、'is my implementation faithful'、'find differences between design and code'、'verify the build matches Figma'、'design QA against code'、'parity score'。use_figma（どのプランでも可）でノードの視覚/タイポグラフィ/スペーシング/token/アクセシビリティのスペックを読み取り、提供された codeSpec と差分を取る。ネイティブの get_design_context を補完する：コードを生成するのではなく、既存のコードがデザインと同期しているかを検証する。
AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。