Skills
エージェント向けにパッケージ化された専門スキルと手順を 97,222 件掲載。コマンド 1 行でインストールできます。
デザイン・UI
UI/UXデザインのインテリジェンス。50種類のスタイル、21種類の配色、50種類のフォントペア、20種類のチャート、9種類の技術スタック(React、Next.js、Vue、Svelte、SwiftUI、React Native、Flutter、Tailwind、shadcn/ui)を提供します。操作:計画、構築、作成、デザイン、実装、レビュー、修正、改善、最適化、強化、リファクタリング、UI/UXコードのチェック。プロジェクト:ウェブサイト、ランディングページ、ダッシュボード、管理パネル、EC、SaaS、ポートフォリオ、ブログ、モバイルアプリ、.html、.tsx、.vue、.svelte。要素:ボタン、モーダル、ナビゲーションバー、サイドバー、カード、テーブル、フォーム、チャート。スタイル:グラスモーフィズム、クレイモーフィズム、ミニマリズム、ブルータリズム、ニューモーフィズム、ベントーグリッド、ダークモード、レスポンシブ、スキューモーフィズム、フラットデザイン。トピック:カラーパレット、アクセシビリティ、アニメーション、レイアウト、タイポグラフィ、フォントペア、余白、ホバー、シャドウ、グラデーション。統合:コンポーネント検索とサンプル表示に shadcn/ui MCP を使用
three.js のシーングラフのルートオブジェクト、線形 Fog と指数 FogExp2、単色やテクスチャ用の Scene.background、および他のスキルの PMREM やローダーに関連する高レベルな環境背景の概念を扱います。ワールドコンテナ、大気フォグ、背景の設定に使用します。HDR 環境マップファイルの読み込みには threejs-loaders、読み込み後の GPU テクスチャ設定には threejs-textures、トーンマッピングには threejs-renderers を使用します
UIを完全に制御してAuth0 Universal Login画面を構築またはカスタマイズする場合に使用します。ACUL ReactまたはVanilla JS SDKを使い、ブランドに合わせたログイン、サインアップ、MFA画面を作成します。ユーザーがACULに直接言及せず、「カスタムログインページ」「Auth0ログインのスタイル変更」「独自のUniversal Login UIの構築」と依頼した場合にも使用します。基本的なブランディング(色やロゴのみ)は対象外です。その場合はauth0-brandingを使用してください。
OpenAI Image API (gpt-image-2) を使用して画像を生成または編集します。ユーザーが画像、アイコン、ロゴ、モックアップ、イラスト、OG 画像、ブログのヒーロー画像、マーケティング素材などのビジュアルの生成、作成、描画、レンダリング、イラスト化、モックアップ作成、編集を依頼した場合に使用します。参考画像が提供され、変更、スタイル変更、リミックスを求められた場合にも使用します。トリガー:「generate an image」「create an image」「make a picture of」「edit this image」「restyle this」「make a mockup of」「draw a」「render a」「illustration of」。
ナビゲーション階層、カスタムビューモディファイア、スタックやグリッドを使ったレスポンシブレイアウトなど、SwiftUI のビューやコンポーネント構築に関するベストプラクティスと例を交えたガイダンスを提供します。SwiftUI UI の作成やリファクタリング、TabView によるタブ構成の設計、VStack/HStack による画面の構成、@State や @Binding の管理、宣言型 iOS インターフェースの構築、コンポーネント固有のパターンや例が必要な場合に使用します。
Capacitor または Ionic アプリを iPhone Duo(Apple 初の折りたたみ式 iPhone)に対応させる——標準の Device Posture および Viewport Segments CSS が web view に届かない理由、現在利用できる CSS、ネイティブ側から折りたたみ状態、ヒンジ角度、バーの配置を取得する方法。Capacitor、Ionic、Angular、React、Vue アプリで折りたたみ式 iPhone 対応が必要なときに使用。
レイアウト階層、コンテンツの明確さ、CTA の強調、視覚的一貫性、インタラクション状態、レスポンシブ対応の基本、パフォーマンスの兆候、アクセシビリティの基本などの監査カテゴリを用いて、ページ、フロー、コンポーネント画面を幅広くレビューします。UI のレビュー、ページ監査、UX の仕上がり評価、リリース前のインターフェース品質確認、曖昧なデザインフィードバック依頼の構造化された監査レポートへの整理を求められた場合に使用します。アクセシビリティのみの修正、再利用可能なコンポーネント API 設計、システムレベルのトークン管理、React/ランタイムのパフォーマンスデバッグには使用しません。トリガー:UI 監査、デザインレビュー、UX レビュー、インターフェース批評、仕上がりレビュー、ランディングページレビュー、ダッシュボードレビュー、ユーザビリティレビュー、視覚的一貫性、CTA の明確さ。
ホバー時に3Dオブジェクトを傾け、クリック時に全体のインスペクトビューを開きます。ホバー時は減衰付きで範囲を限定したカメラの傾きが発生します。クリックするとオブジェクトが台から手元に持ち上がり、ドラッグで回転、惰性で回転、ホイールまたはピンチでドリー操作ができ、Esc、外側のクリック、Closeボタンで元に戻せます。ホバー時のオービットとクリック時の全画面表示を干渉させずに実現したいThree.jsの製品、オブジェクト、組み手、ポートフォリオ作品に使用します。インスペクトモードなしの浮遊するヒーローメッシュには webgl-3d-object、場所を通るカメラパスには 3d-virtual-tour を使用します。
PMA 管理の React + Vite SPA および社内ツールのフロントエンドプロジェクト向けの実装・受け入れ基準です。必須の品質ゲート、TanStack Router によるファイルベースの型安全なルーティング、TanStack Query によるサーバー状態管理、shadcn/ui (base-nova) の固定採用、Tailwind のテーマ設定、テスト、i18n、nsl ベースの開発統合、納品ルールを網羅します。React/Vite SPA の実装、スキャフォールディング、アップグレード、受け入れ確認に使用します。コードレビューのワークフローには pma-cr を使用してください。
Tailwind CSS v4 の基礎——インストール、CSS ファーストの設定、2025~2026 年のベストプラクティス。次の場合に積極的に有効化します:(1) Tailwind v4 のインストール(Vite プラグイン、PostCSS、CLI)、(2) @theme を使った CSS ファーストの設定、(3) @import "tailwindcss" 構文、(4) v3 から v4 への移行、(5) v4 で導入された新しいユーティリティ(text-shadow、mask-*、コンテナークエリー)、(6) Lightning CSS エンジン、(7) 設定不要のコンテンツ検出、(8) Oxide エンジンのパフォーマンス、(9) カスタムユーティリティ用の @utility、(10) カスタムバリアント用の @variant。提供内容:v4 インストールガイド、@theme リファレンス、v3 から v4 への移行チェックリスト、新しいユーティリティ一覧、@utility/@variant の例。
FileUpload、TextBox、NumericTextBox、TextArea、Signature、RangeSlider、OtpInput、Rating、InputMask、ColorPicker などの Syncfusion Blazor 入力コンポーネントを実装します。ファイルのアップロード、テキスト入力、数値、複数行テキスト入力、署名、評価、色の選択を扱う際に使用します。このスキルでは、Blazor アプリケーションの入力関連コンポーネントすべてについて、入力検証、イベント、データバインディング、高度なカスタマイズオプションを扱います。
予定やイベントを包括的に管理する Syncfusion Blazor Scheduler コンポーネントを実装します。カレンダーインターフェースの構築、CRUD 操作による予定管理、複数の表示モードの実装、繰り返しイベントの設定、タイムゾーンを考慮したスケジュール管理に使用します。日・週・月・タイムライン・アジェンダ表示、ドラッグ&ドロップ、サイズ変更、リソース、ローカライズ、データバインディング、状態の永続化、スケジュールアプリ向けの高度なカスタマイズオプションを扱います。
システム設計に図が必要な場合に使用するスキルです。「アーキテクチャを描いて」「このシステムを図にして」「コンポーネントを示して」「アーキテクチャ/インフラ/トポロジー図を作成して」といった依頼や、設計のボックスと矢印、データフロー、リージョン、障害経路の可視化に対応します。自己完結型のダークテーマ HTML + SVG 図を生成します(PNG/PDF エクスポート対応)。ユーザーが「図」と言わなくても、`system-design` オーケストレーターまたは構成要素が「描画」ステップに達した場合は使用します。
HTML/CSS から高品質な印刷物を作成するための、プロ向け印刷デザインガイドラインです。記事、ブログ投稿、履歴書、レポート、請求書、書籍、パンフレットなど、印刷を前提とするページの作成やスタイリングに使用します(A4 または Letter)。「print stylesheet」「print CSS」「@media print」「@page」「print layout」「paged media」への言及や、ウェブページの画面表示を印刷結果と完全に一致させたい場合にも使用します。
燃える紙のリングローダーを作成します。GLSL の炎はページの head から起動した Worker が OffscreenCanvas 上に描画するため、ページ構築でメインスレッドがブロックされても停止しません。進捗表示、引き継ぎまでの均一な進行、ページへの滑らかなフェードを備えます。火の粉の筋とグラデーション、多孔質の炭化表現、Worker の起動、1 ピクセルのウォームアップ描画を待つ並列シェーダーコンパイル、停止のない引き継ぎ、モーション低減、非表示タブでの動作を扱います。ローディング画面、プリローダー、ページローダー、スプラッシュ、「kindling」、燃焼ローダー、火の粉のリング、燃える紙の穴、炎のローダーや、重い JavaScript、three.js、シェーダーのビルドがメインスレッドを占有している間も動き続ける必要のあるローダーに使用します。
美しく、レスポンシブでアニメーションを備えたモバイルアプリを作成するための、Flutter UI/UX 開発スキルです。ユーザーが次の作業を依頼した場合に使用します。(1) Flutter の UI コンポーネントや画面の構築 (2) アニメーションやトランジションの実装 (3) レスポンシブレイアウトの設計 (4) カスタムウィジェットやテーマの作成 (5) UI のパフォーマンスとアクセシビリティの最適化。トリガー:「create Flutter UI」「build Flutter screen」「Flutter animations」「responsive Flutter layout」「custom Flutter widgets」「Flutter theme design」
AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。
