Skills
エージェント向けにパッケージ化された専門スキルと手順を 97,501 件掲載。コマンド 1 行でインストールできます。
デザイン・UI
React 19 + Next.js 16（App Router）+ Tailwind CSS 4 向けの厳格なデザインおよび UX ルール。ナビゲーション、インタラクションデザイン、アクセシビリティ、ユーザーフィードバック、UX パターン、ビジュアルデザインを網羅します。このスタックでユーザー向け Web 機能を設計、構築、レビューする際に使用します。「設定ページを作成」「ダイアログを追加」「このフォームをデザイン」「アクセシビリティをレビュー」「ダークモードを修正」などの依頼や、Next.js App Router / React 19 / Tailwind UI タスクで起動します。出力が「しっくりこない」「アクセシビリティに問題がある」「ベストプラクティスに従っていない」と言われた場合も起動します。
パフォーマンス、アクセシビリティ、SSR、レイアウトを損なわず、通常の Web アプリ UI に組み込める、小さく常時表示される WebGL ビジュアル（アイデンティティアバター、環境光オーブ、ガラスや虹色のサーフェス、アニメーションテクスチャ）を構築します。シェーダー、GLSL、canvas を使った装飾要素を製品 UI に追加するとき、特にページやリスト内で何度も描画される場合に使用します。また、その要素のレビューや最適化、ハードウェアアクセラレーションのないマシンでぼやける、エイリアスが発生する、真っ黒になる、周囲の UI を覆うといった問題のデバッグにも使用します。
プロジェクトに動的なコンテンツ更新、ステータスメッセージ、アラート、通知、読み込みインジケーター、またはaria-live、role="status"、role="alert"、role="log"の使用が含まれる場合は、必ずこのスキルを読み込んでください。これらのルールを適用せずにライブリージョンのマークアップを追加・変更してはいけません。適切な通知レベルを優先し、重複した通知を避けてください。固定時間後に内容を消去して再挿入する回避策は絶対に使わないでください。動作が保証される規格はありません。
Claude Code 向けの Figma デザインブリッジ。figma-developer-mcp サーバー経由で Figma ファイルを閲覧し、アセットをダウンロードし、デザイントークンを抽出して、Tailwind、React、Vue、Svelte、React Native、Flutter、プレーン CSS のコードを生成します。プロジェクトに合った Figma Community のリソースも検索できます。Figma アクセストークンと figma-developer-mcp サーバーが必要です。
1 つの製品サーフェスに対して、それぞれ異なるクリック可能な HTML インタラクションプロトタイプを複数生成して Design Board にまとめ、実装前に選択/リミックスのフィードバックを収集する。複数の UI バージョン、インタラクションの代替案、段階的開示のオプション、またはスタイルは問題ないが階層/ワークフロー/インタラクションに違和感がある場合に使用する。静的なビジュアルスタイルの調整（design-style-picker を使用）、確定済みの CSS の微調整には使用しない。
localhost／ローカル開発サーバーのページを複数のビューポートでスクリーンショットし、ビジュアルリグレッションを比較します。「ローカルサイトをスクリーンショット」「localhost ページをキャプチャ」「ビジュアル差分」「スクリーンショットを比較」「レスポンシブのスクリーンショット」「ブレークポイントを確認」「ビジュアルリグレッション」の依頼や、名前付き .localhost URL の Portless アプリのキャプチャに使用します。公開 URL や e2e テストの作成には使用しません。
各スキルが体系化された手法に基づく UX/UI 監査スキル：ux-audit-rethink（IxDF UX 要素）、nielsen-heuristics-audit、wcag-accessibility-audit（POUR フレームワーク）、don-norman-principles-audit、cognitive-walkthrough、ui-design-review、information-architecture-audit。このパッケージには、カタログではインストールされない AI ガバナンスおよびセキュリティ監査スキルも含まれます。
shadcn/ui と Radix UI または Base UI、Tailwind CSS 4、React 19 を使用して、アクセシブルでカスタマイズ可能なコンポーネントライブラリを構築します。コンポーネントの所有権、oklch CSS テーマ設定、Field と Zod による型安全なフォーム、CLI ワークフロー、レジストリパターンを扱います。shadcn/ui コンポーネントの追加、テーマの構成、Zod によるフォーム構築、カスタムレジストリの作成、アクセシブルなコンポーネントバリアントの構成に使用します。shadcn CLI、ダークモード、コンポーネントバリアント、フォーム検証にも使用します。
Visual Studio のようなドッキングインターフェイスを実現する Syncfusion WPF DockingManager コントロールを実装します。MDI/TDI、フローティングウィンドウ、自動非表示パネルに対応します。WPF アプリでドッキングレイアウト、ウィンドウ管理システム、タブ付きドキュメントインターフェイス、IDE 風レイアウトを作成する際に使用します。ドックパネル、フローティングウィンドウ、自動非表示機能、状態の永続化、ウィンドウ管理を扱います。
Form + GlobalKey<FormState> と TextFormField を強制し、同期 validator はローカライズされた String? を返す（ハードコードされたリテラルは決して使わない）、AutovalidateMode.onUserInteraction、非同期の可用性チェックは同期 validator の外に出してデバウンス付きの Riverpod Notifier に移し、state を通じてエラーを表出、FocusNode/TextInputAction/onFieldSubmitted による移動、keyboardType/textCapitalization/autofillHints/TextInputFormatter、TextEditingController/FocusNode の必須の破棄、送信の有効化は有効性から導出（保存しない）、そしてスコープ付きの再ビルドによりキー入力がフォーム全体を再ビルドしないようにする。Form、TextFormField、FormField の構築、同期または非同期の検証の配線、FocusNode、フォーカス移動、autofocus、TextInputAction、onFieldSubmitted、onEditingComplete の管理、keyboardType、autofillHints、textCapitalization、InputFormatter の設定、TextEditingController/FocusNode の破棄、送信ボタンの有効化/無効化、送信時のキーボード回避の処理を行うときに使用。
参照画像なしで、正確な #FAF9F5 の背景、左揃えの大きなタイポグラフィ、柔軟なグリッド構成、新たに生成する右側の図を用いた5:2のエディトリアルなテクノロジーカバーを作成します。「RN封面」「编辑图解风格封面」「左文右图暖白封面」「无参考图生成同类封面」、またはチャコールの線と控えめなコーラルのアクセントを使った高品質なAI研究・エディトリアルカバーを依頼された場合に使用します。新しいカバーごとに右側のアートワークを透明背景で新規生成し、正確なテキストと柔軟なエディトリアルレイアウトを編集可能なSVGおよびPNGにまとめます。
コンテンツをタブに整理するための WPF TabControl（TabControlExt）コンポーネントを作成・管理します。タブインターフェースの実装、タブ選択の管理、閉じるボタンの設定、タブ操作（クリック、キーボードナビゲーション）の処理、タブの外観（向き、配置）のカスタマイズ、またはタブデータのバインドが必要な場合に使用します。XAML/C# によるタブ作成、タブ項目の管理、イベント処理、コンテキストメニュー、ドラッグ＆ドロップによる並べ替え、テーマ設定を扱います。
ユーザーがタッチ、タップ、クリック、ドラッグ、スワイプ、ジェスチャーで操作するインタラクティブな UI 要素（ボタン、リンク、ドラッグ＆ドロップ、スライダー、カルーセル、独自のタッチ操作など）がプロジェクトに含まれる場合は、このスキルを読み込みます。44×44 CSS ピクセル未満のタッチターゲットは決して作成しないでください。ポインターのキャンセルと、ジェスチャーに対する単一ポインターでの代替操作を必ず用意し、ポインターとキーボードの要件は相互補完的なため keyboard/SKILL.md と併せて読み込みます。
クリエイティブブリーフ、ブランドシステム、またはリファレンスセットを、画像・動画制作のための独自で移植可能なビジュアルディレクションシステムに変換する。アートディレクション、模倣を伴わないリファレンス分析、デザイントークン、配色とコントラスト、タイポグラフィ、構図、テクスチャと素材、ライティング、レンズとカメラ言語、モーション言語、カットをまたぐ連続性、アクセシビリティ、制作引き継ぎ、ビジュアルレビュー、修正に使用する。プロバイダー固有の API 構文やモデル固有のプロンプトレシピには使用しない。
Gemeente Amsterdam のすべての UI 作業で必須です。ページ、レイアウト、フォーム、ダッシュボード、ランディングページ、React/JSX/TSX コンポーネント、スタイリング、テーマ設定、フロントエンドプロジェクトのスキャフォールディングなど、あらゆるビジュアルインターフェースで使用します。@amsterdam/design-system-react、CSS tokens（--ams-*）、ams- プレフィックス付きの BEM CSS、4/8/12 カラムの Grid、Spacious モードと Compact モード、Tailwind CSS ブリッジパターンを扱います。Material UI、shadcn、Chakra、Ant Design などの汎用 UI ライブラリや、通常のカスタム HTML/CSS より優先してください。
既存のデザイン（Web ページ、HTML/React UI、スクリーンショット、生成画像、Figma フレーム）を再現可能な手順で批評する。取得（Playwright のスクリーンショット、画像は Read）、自動チェック（axe、スタイルインベントリ）の実行、加重ルーブリックによる採点、重大度順の修正案とコードの出力、その後の再検証を行う。デザインが生成された後、またはレビューを依頼されたときに使用する。トリガーフレーズ：「design critique」「review design」「improve design」「design audit」「design feedback」「evaluate UI」「design score」「accessibility audit」「visual review」「design assessment」。
CLI 経由で GIMP、Inkscape、ImageMagick、FFmpeg、ExifTool、OptiPNG、jpegoptim、pdftoppm を使って画像を作成・編集します。用途：サイズ変更、トリミング、合成、テキストの重ね合わせ、透かし、色補正、形式変換、WebP エクスポート、SVG 作成、SVG から PNG へのエクスポート、OG 画像、ソーシャルバナー、ロゴ編集、一括処理、可逆圧縮、メタデータの読み取り・削除、GIF 作成、アニメーション、PDF から画像への変換。トリガー：gimp、inkscape、imagemagick、画像のサイズ変更、画像のトリミング、画像変換、svg から png、画像にテキストを追加、透かし、合成、画像編集、バナー、ソーシャルカード、画像圧縮、メタデータ削除、gif、pdf から画像、webp。
ユーザーがフロントエンドインターフェースの設計、再設計、構成、批評、監査、仕上げ、明確化、要約、強化、最適化、調整、アニメーション化、色付け、抽出、その他の改善を望む場合に使用。ウェブサイト、ランディングページ、ダッシュボード、製品 UI、アプリシェル、コンポーネント、フォーム、設定、オンボーディング、空の状態を対象とする。UX レビュー、視覚的階層、情報アーキテクチャ、認知負荷、アクセシビリティ、パフォーマンス、レスポンシブ動作、テーマ、アンチパターン、タイポグラフィ、フォント、余白、レイアウト、配置、色、モーション、マイクロインタラクション、UX コピー、エラー状態、エッジケース、i18n、再利用可能なデザインシステムやトークンに対応。平凡なデザインをより大胆または魅力的にしたい場合、派手なデザインを控えめにしたい場合、ブラウザー上で UI 要素を反復的に調整する場合、技術的に際立つ高度な視覚効果を求める場合にも使用。バックエンドのみ、または UI 以外のタスクには使用しない。
マーケティングサイトのページ向けのベストプラクティス集で、ページ種別ごとに整理されている。キャンペーン用ランディングページ、製品ページ、プログラマティック SEO ツリー、編集コンテンツ。ランディングページ/マーケティングページを執筆・更新するとき、キャンペーン用ランディングページをアトリビューション識別子に接続するとき、サイト全体のナビ/フッターリンクを変更するとき、sitemap/robots/エージェント可読の面に触れるとき、または公開サイトのインデックス登録、到達可能性、コンバージョン設定を監査するときに使用する。
Remotion でクリーンでセンスの良いモーショングラフィックス動画（解説動画、製品プロモ、チュートリアル、ソーシャルリール）を制作する。ユーザーがモーショングラフィックス動画、アニメーション解説、プロモ/ローンチ動画、キネティックテキスト入りのリール/ショート、または参考動画のスタイルを模倣したいと依頼したときに使用する。リサーチ、スクリプト、ナレーションのタイミング、オリジナル楽曲と効果音、スタイルを固定したすぐ使える Remotion テンプレート、自動オーバーラップ QA、最終レンダリングまでをカバーする。
折りたたみ／展開可能なパネルレイアウト向けに Syncfusion WPF SfAccordion を実装します。WPF でアコーディオンコントロール、展開可能なパネル、折りたたみ式セクションナビゲーションを扱う場合に使用します。宣言的またはデータバインディングによる項目の設定、選択モード（One/OneOrMore/ZeroOrOne/ZeroOrMore）、プログラムによる選択、外観のカスタマイズ（AccentBrush、HeaderTemplate、ContentTemplate）、SfSkinManager によるテーマ設定を扱います。
AI チャットや会話型アシスタントのインターフェース向けに Syncfusion WPF SfAIAssistView を実装します。AI アシスタント UI、AI の応答を含むメッセージスレッドの構築や、WPF への OpenAI/SemanticKernel の統合に使用します。入力中インジケーター、候補、入力/応答ツールバー、応答停止機能、会話履歴、入力プレースホルダーテキスト、空状態テンプレート、Syncfusion.SfChat.Wpf を使用した PromptRequest イベントを扱います。
AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。