Skills
エージェント向けにパッケージ化された専門スキルと手順を 97,222 件掲載。コマンド 1 行でインストールできます。
デザイン・UI
Syncfusion Windows Forms GridBagLayout コントロールを使用して、行、列、間隔、配置をカスタマイズできる柔軟な仮想グリッドに子コントロールを配置する方法。ユーザーが GridBagLayout で複雑なレイアウトを作成する、コントロールを動的に配置する、グリッドの位置を構成する、コントロールのスパンを設定する、または Windows Forms アプリケーション内でコントロールの配置とサイズを管理する必要がある場合は常にこのスキルを使用します。
Windows Forms で Syncfusion MainFrameBarManager のメニューおよびツールバーシステムを実装するための包括的なガイド。メニュー、ツールバー、コマンドバー、メニュー構造を作成する際に使用します。階層的なメニューモデル、BarItem の種類、インタラクティブな機能、キーボードサポート、MDI 統合、状態の永続化を扱い、ショートカット、ニーモニック、ツールチップ、カスタマイズ可能なツールバーを備えたプロフェッショナルなメニュー駆動型アプリケーションを構築します。
Windows Forms アプリケーションのコンテキストメニュー用に Syncfusion PopupMenu コントロールを実装するためのガイド。右クリックメニュー、多階層のメニュー構造、キーボードショートカットを作成する際に使用します。BarItems による PopupMenu の実装、PopupMenusManager の統合、Bar Manager との関連付けを扱い、プロフェッショナルなコンテキストメニューシステムを構築します。
Windows Forms アプリケーションで Office スタイルのリボンインターフェイスを作成するためのガイド。タブ、グループ、ボタン、バックステージビュー、クイックアクセスツールバー、簡易レイアウトを備えたリボンコントロールを構築する際に使用します。Office 2007/2010/2013/2016 スタイルのリボンメニュー、リボンのカスタマイズ、バックステージの実装、QAT の構成、WinForms アプリケーションにおけるモダンな UI パターンを扱います。
Tailwind CSS v4、shadcn/ui、Vite、React 向けの本番環境で検証済みのセットアップです。Tailwind v4 を使った React プロジェクトの初期化、shadcn/ui のセットアップ、ダークモードの実装、CSS 変数の問題のデバッグ、テーマ切り替えの修正、Tailwind v3 からの移行、色やテーマの問題への対応に使用します。@theme inline パターン、CSS 変数アーキテクチャ、ThemeProvider によるダークモード、コンポーネント構成、vite.config の設定、v4 のよくある注意点、本番環境で検証済みのパターンを扱います。
1 つまたは複数のウェブページ/アプリ UI スクリーンショットを、単体ページとして、あるいは既存フロントエンドを改修して、高忠実度かつレスポンシブな実装に変換する。ビューポートの正確な一致、タイポグラフィ/アイコンの監査、明示的な余白と配色の一致、ブラウザでのスクリーンショット比較、明らかな不一致が残らなくなるまでの反復的な調整を優先する。アセットが不足している場合は、提供されたファイルを使用し、利用可能な場合は image_gen で不足しているラスターアセットを直接生成し（複数の関連アセットでは抽出可能なアセットシートの形が望ましい）、それ以外の場合はプレースホルダーと、残りの各アセットにつき 1 つの独立した生成プロンプトを含む 1 回でコピー&ペーストできるコードブロックを使用する。
Web とモバイル向けの UI/UX デザインインテリジェンス。50+ のスタイル、161 のカラーパレット、57 のフォントペアリング、161 の製品タイプ、99 の UX ガイドライン、13 のスタック（React、Next.js、Vue、Svelte、SwiftUI、React Native、Flutter、Tailwind、shadcn/ui、HTML/CSS）にわたる 25 のチャートタイプを含む。アクション：UI/UX コードの計画、構築、作成、設計、実装、レビュー、修正、改善、最適化、強化、リファクタリング、チェック。プロジェクト：ウェブサイト、ランディングページ、ダッシュボード、管理パネル、E コマース、SaaS、ポートフォリオ、ブログ、モバイルアプリ。要素：ボタン、モーダル、ナビバー、サイドバー、カード、テーブル、フォーム、チャート。スタイル：グラスモーフィズム、クレイモーフィズム、ミニマリズム、ブルータリズム、ニューモーフィズム、ベントーグリッド、ダークモード、レスポンシブ、スキューモーフィズム、フラットデザイン。トピック：カラーシステム、アクセシビリティ、アニメーション、レイアウト、タイポグラフィ、フォントペアリング、余白、インタラクション状態、シャドウ、グラデーション。連携：コンポーネント検索とサンプル用の shadcn/ui MCP。
ローカル SPA（/br が生成したアプリ、または任意の web アプリ）向けの閉ループの視覚セルフチェック WORKFLOW：各ルートを headless で撮影 → BASELINE のピクセル差分（意図しない変更を検出）→ 機械検証可能な不変条件（デザイン適合性）→ agent がルーブリックに沿って全画像を読む → FINDINGS.md → 修正 → 再撮影 → 機械と目の両方がクリーンなときのみ合格。テーマ/UI/リブランドの変更時、MCP 拡張が localhost を撮影できないとき、または frame の UI ゲートが必要なときに使う。トリガー：「qa thị giác」「visual qa」「route-shots」「各ルートのスクリーンショット」「インターフェースを確認」「baseline diff」「UI にリグレッションはないか」「headless での UI テスト」「/visual-qa」。
認知アクセシビリティのためのナビゲーションと情報アーキテクチャを設計する。ナビゲーション、サイトマップ、ページ階層、パンくずリスト、検索、複数ステップのフロー、またはユーザーがコンテンツを見つけ、自分の位置を把握する必要があるあらゆる構造を設計・レビューする場合に使用する。トリガー：users get lost、navigation、wayfinding、information architecture、breadcrumbs、findability、site map、confusing structure、where am I。
SHIPPED 済みで検証済みの @wix/sdk コードを接続して Wix Headless サイトを素早く構築する。レシピから統合を自作するのではない。各 Wix ビジネスバーティカルには、型付きでフレームワーク非依存の React コア（プレーンな DTO を返すデータレイヤー、hooks、headless コンポーネント）と、Astro オーバーレイ（オーナーが編集可能な SEO をあらかじめ組み込んだ SSR ページ）、ビルド時の REST シードスクリプトが同梱される。エージェントは Wix CLI で足場を作り、同梱コードをデプロイし、バックエンドにシードデータを投入し、同梱の hooks 上でプレゼンテーションレイヤー（商品カード/グリッド、PDP、ホーム、テーマ）を自ら設計し、Wix ホスティングへリリースする。Wix 管理の Astro（環境認証、既定）でも、公開 OAuth クライアント ID 経由の任意の React ベースプロジェクト（Vite、非 Astro）でも動作する。バーティカル：stores/storefront（商品、カテゴリ、バリエーション、カート、ホスト型チェックアウト）、bookings（サービス、予約/クラスの時間枠、スタッフ、予約フォーム、チェックアウトまたは店頭）、rentals（時間単位または日単位で部屋、車両、機材を貸し出す：リソース、顧客が選ぶ期間、価格付き見積もり、チェックアウト）、blog（記事、カテゴリ/タグ、リッチコンテンツ）、cms（構造化コンテンツコレクション）、forms（スキーマ駆動の訪問者フォーム：レンダリング、検証、送信）、events（一覧、RSVP、チケット販売）、members（ログイン、制限付きページ、アカウント）、portfolio（プロジェクトコレクション、メディアギャラリー）、pricing-plans（プラングリッド、ホスト型購入）、restaurants（メニュー、オンライン注文、テーブル予約）、faq（カテゴリ別の質問と回答、検索、質問ごとのリンク）、donations（キャンペーンページ、目標進捗、ホスト型チェックアウト経由の単発および継続寄付）。トリガー：ストア/ブログ/予約/レンタル/イベント/レストラン/ポートフォリオ/FAQ/寄付サイトを素早く構築したい、予約を素早く受けたい、部屋/車/機材を headless で貸し出したい、チケットや会員プランを headless で販売したい、寄付を headless で集めたい、wix headless fast、既製の SDK コードで Wix ビジネスアプリを接続したい。
Dung khi can viet brief de XAY landing page moi hoac trang ban hang moi — cau truc section, copy tung khoi, yeu cau ky thuat, tracking va timeline giao dev. Kich hoat khi user nhac 'brief landing page', 'lam trang ban hang', 'can trang dich', 'thue dev lam landing', 'landing page can gi', 'viet noi dung cho trang'. Khong dung cho — trang DA CHAY ma khong ra don thi dung skill 68-cro-audit-trang; email HTML thi dung skill 49-html-email-template; danh sach asset cho ca campaign thi dung skill 41-campaign-asset-list.
アクセシビリティについて、何をテストするか、どのようにテストするか、誰がテストするかを計画する。テスト手法を定義するとき、QA を計画するとき、自動テストと手動テストを整備するとき、またはプロジェクトに必要なアクセシビリティテストのレベルを判断するときに使用する。トリガー：accessibility testing、how to test、test plan、automated testing、manual testing、screen reader testing、user testing、accessibility QA、what to test、testing strategy。
`@angular/material` と Material 3（M3）テーマシステムを使う Angular プロジェクト向けに、Angular Material のコードとガイダンスを生成する。インストール、`mat.theme()` とプリビルドパレットによる Sass ベースのテーマ設定、密度とタイポグラフィのカスタマイズ、全カテゴリのコンポーネント利用（フォームコントロール、ボタン、オーバーレイ、レイアウト、データ表示、ナビゲーション）、`@angular/cdk` のプリミティブ（Overlay、Portal、Drag-Drop、Virtual Scroll、A11y）、`mat-form-field` 経由の ReactiveForms / Signal Forms 統合、アクセシビリティ、M2 → M3 移行を扱う。ユーザーが Angular Material、`@angular/material`、`mat-*` コンポーネント、M3 / Material 3、デザイントークンに言及したとき、または Angular プロジェクトの `package.json` に `@angular/material` が含まれる場合に使用する。Angular の基礎については `angular-developer` と組み合わせる。
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 を補完する：コードを生成するのではなく、既存のコードがデザインと同期しているかを検証する。
スクリーンリーダーと認知アクセシビリティに適した見出し階層とコンテンツ構造を設計する。ページ、記事、ダッシュボード、フォーム、その他コンテンツの多いインターフェースを構成する場合に使用する。トリガー：headings、heading hierarchy、h1 h2 h3、content structure、page structure、screen reader navigation、document outline、semantic structure、heading levels。
情報密度を調整してさまざまな認知的なニーズや好みに合わせられるインターフェースを設計する。ダッシュボード、データテーブル、フィード、受信トレイ、設定パネル、その他コンテンツ量が変動するインターフェースを設計する場合に使用する。トリガー：information density、too dense、too sparse、compact view、comfortable view、spacing、whitespace、data density、content density、crowded、breathing room。
AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。