Skills
エージェント向けにパッケージ化された専門スキルと手順を 97,222 件掲載。コマンド 1 行でインストールできます。
デザイン・UI
ある業界の主要サイトを対象に、ブランド、UX、サイトデザインを観察可能なサイト横断パターンとして監査し、新規構築で満たすべき、または上回るべき体験水準を明らかにします。ユーザーが競合デザインの状況を評価したい、業界の慣例を把握したい、カテゴリのデザインや UX の基準を特定したい、または構築前に体験基準を定めたい場合に使用します。競合体験監査、UX 監査、サイトデザイン監査、ブランド監査、デザイン慣例、サイトの優れている点、業界慣例、ストアフロントのパターン、マーチャンダイジングのパターン、レイアウト密度、主要タスク、デザイン基準、カテゴリ慣例、小売とマーケティングの表現の違い、業界の動向などがトリガーになります。競合監査で SEO やアクセシビリティなどの技術的な指標は把握したものの、ブランド、UX、デザイン慣例が特定されておらず、その基準がないと後続の構築が業界の慣例から外れて見える場合も対象です。
DOMのリフローなしで、JavaScript/TypeScriptの複数行テキストを高速かつ正確に測定・レイアウトする包括的なライブラリ。段落の高さや行数の計算、手動の行レイアウト（フロート画像に沿ったテキストの回り込み）、DOM、Canvas、SVGでのリッチテキスト（絵文字、CJK、RTL）のレンダリングに使用します。npm install、コア API（prepare/layout、prepareWithSegments/layoutWithLines）、オプション（whiteSpace、wordBreak、letterSpacing）を扱います。トリガー：pretext、テキスト測定、テキストレイアウト、段落の高さ、行レイアウト、テキストのリフロー、Canvasのテキスト測定、DOMのリフロー。
ライブラリ（joyride/intro.js/driver.js）を使わずに、カスタムのアプリ内プロダクトツアー（スポットライト式オンボーディングオーバーレイ）を追加します。CSS セレクターで指定した各要素の周囲にスポットライトの穴を開けた暗いレイヤーを描画し、ラベル付きツールチップを付け、最も広い空きスペースに「タップして閉じる」ピルを配置します。モバイル／デスクトップに対応し、スクロールをロックし、getBoundingClientRect で測定し、どこをクリックしても閉じます。「ツアーガイドを追加」「オンボーディングツアー」「アプリ内ガイド」「スポットライトツアー」「プロダクトツアー」「ウォークスルー」「bonbon 風ツアー」を希望する場合、または /tour-guide を呼び出す場合に使用します。React/Next.js + Tailwind に適しています。各ルートで独自の停止地点リスト（spots）を定義し、要素には安定した data-tour 属性を付けます。
モジュール式の文字サイズスケール、フォントの選定と読み込み、階層、行の高さと長さ、可変サイズを含むタイポグラフィシステムを構築・修復し、実際のコンポーネントに適用するトークン（Tailwind fontSize 設定または CSS 変数）として提供します。「テキストの見た目がおかしい」「フォントに一貫性がない」「見出しが目立たない」「フォントを選んで」「読みにくい」「文字サイズが多すぎる」と言われた場合や、監査で文字サイズの乱立が見つかった場合に使用します。製品の情報密度（高密度アプリ、マーケティング、編集コンテンツ）に応じてスケール比を選び、コントラストと行長を検証し、タイポグラフィトークンと既存の不統一なサイズからの移行マップを作成します。
1つのURLから既存サイトを3つの視点で包括的に監査。デザイン（課題と具体的な改善機会）、SEO／技術、LLM／AI検索での可視性をCore Web Vitalsと合わせ、スコア付きの証拠に基づくレポートにまとめる。ユーザーが「audit this site」「site audit」「design audit」「SEO audit」「why is my site underperforming」「LLM visibility」「how does my site look to AI」と依頼する場合や、`$stardust audit`（Claude Codeでは`/stardust:audit`）<url>を実行する場合に使用。
React と Next.js のベストプラクティス完全ガイドです。パフォーマンス最適化、コンポーネントアーキテクチャ、shadcn/ui パターン、Motion アニメーション、最新の React 19+ パターンを扱います。React/Next.js コードの作成、レビュー、リファクタリングに使用します。React コンポーネント、Next.js ページ、データ取得、UI コンポーネント、アニメーション、コード品質の改善に関するタスクで起動します。対象はクライアント側の React/Next です。Node/Express/API バックエンドには backend-patterns を、横断的な TS/JS 標準には coding-standards を使用してください。
洗練されたshieldcnのREADMEバッジ、バッジグループ、チャート、ヘッダー、スポンサーグリッド、READMEのヒーローセクション全体を作成します。shadcn/ui風のバッジ、Shields.ioの代替、npm/GitHub/CI/ステータスバッジ、ダウンロードチャート、READMEヘッダーバナー、コントリビューター／スポンサー画像、README Studioのガイダンスを求める場合に使用します。「バッジを追加」「shieldsを追加」「README badges」「npm badge」「GitHub stars badge」「CI badge」「download chart」「README header」「README banner」「contributors grid」「sponsors grid」「build a README」「README Studio」「shieldcn」や、プロジェクトのREADMEを見栄えよくしたいという依頼がトリガーです。
モバイルゲームをデスクトップ向けに拡張するための専門的なパターンです。マウス／キーボード操作、解像度とグラフィック品質の向上、拡張した UI レイアウト、設定メニュー、ウィンドウ管理、プラットフォーム固有の機能を扱います。デスクトップ版への移植やクロスプラットフォームリリースに使用します。トリガーキーワード：mouse_controls、keyboard_shortcuts、resolution_scaling、graphics_settings、fullscreen_toggle、window_modes、Steam_integration、desktop_optimization。
プロフェッショナルな UI デザインシステム。すべての HTML 出力のビジュアル品質を管理します。HTML ページ、ダッシュボード、ランディングページ、ポートフォリオ、Web アプリケーションの構築時は、必ず project-builder と併用してください。project-builder はエンジニアリングのワークフローを担当し、このスキルはカラーパレット、タイポグラフィ、レイアウト、アニメーションなどのビジュアルデザインの決定を担当します。生成されるすべての UI をプロフェッショナルでモダンかつ独自性のあるものにし、ありきたりな AI 生成物にならないようにします。
ユーザーのブリーフ、既存の動画企画、ストーリーボード、キャラクターデザイン、プロジェクトの背景をもとに、映画ポスターのコンセプトと最終画像を作成します。動画プロジェクト向けの映画ポスター、キービジュアル、キャンペーンポスター、ティーザーポスター、タイトルポスター、プロモーションビジュアルの生成をユーザーが求めた場合に使用します。必要に応じて複数のクリエイティブ案を先に提案し、比率の指定がなければ 3:4 を標準とします。タイポグラフィ、タイトルの見せ方、画像、ジャンル、舞台、物語の雰囲気に一貫性を持たせ、視覚的に独創的な表現に仕上げます。
2人協力ゲームのメニューやオープニングアニメーションを制作するユーザー向けです。ユーザーは2人のプレイヤー名、ゲームタイトル、目指すビジュアルスタイル、任意のキャラクター参照画像を提供します。Skill はキャラクターの識別要素を固定し、配色、ボタン、アイコン、タイポグラフィを調和させた固定メニューフレームワークから確認用画像を生成します。承認された結果を基に、最終動画用のキャラクター、UI コピー、イベントのタイミング指示を再構成します。2人のキャラクター、プレイヤーカード、メニュー操作の動きを盛り込んだ協力ゲームのイントロを出力します。ゲームのコンセプト、キャラクター主導のメニュー、ソーシャルコンテンツに最適です。プレイ可能なゲーム開発、複雑な複数ページ UI、ブランドロゴの厳密な再現、キャラクターを含まない汎用タイトルシーケンスには適しません。
アクセシビリティ調査員の見解でも、法律上の助言でもありません。ヘブライ語のRTLアプリ向けに、WCAG 2.0 AAにイスラエル独自の変更を加えたIS 5568規格に従って、イスラエルのウェブアクセシビリティに準拠させます。イスラエルのアクセシビリティ法、「negishot」（アクセシビリティ）、IS 5568、「teken negishot」（アクセシビリティ規格）、「nachim」（障害）、ヘブライ語スクリーンリーダー対応、RTLのARIAパターン、イスラエルのウェブサイトのアクセシビリティ監査について尋ねられた場合に使用します。障害者平等権利法に基づく法的義務、適用除外、執行と罰則、アクセシビリティコーディネーターの役割、ヘブライ語スクリーンリーダーとの互換性（NVDA、JAWS、VoiceOver）、ネイティブモバイルアプリ、RTL固有のARIAパターンを扱います。イスラエルの文脈を伴わない一般的なWCAGの案内には使用しないでください（標準的なa11yリソースを使用）。セルフホスト型アクセシビリティ設定ウィジェットの作成にも使用しないでください（wcag-accessibility-widgetを使用）。
タッチポイント、感情、摩擦、基盤システムを含むエンドツーエンドのユーザー体験を可視化するカスタマージャーニーマップとサービスブループリントを作成します。カスタマージャーニーのマッピング、サービスブループリントの作成、体験全体の摩擦の特定、ユーザー体験に関するチーム間の認識合わせ、タッチポイントや課題の可視化を求められた場合に使用します。カスタマージャーニー、ジャーニーマップ、サービスブループリント、ユーザージャーニー、エクスペリエンスマップ、タッチポイント分析、摩擦マップ、ジャーニー監査、エンドツーエンド体験、カスタマーエクスペリエンスマップなどが起動語です。チーム内に部門ごとのユーザー像はあるものの、実際の体験を共有するマップがない場合にも使用します。
制約ロジック、リアルタイム価格設定、検証、保存・共有の仕組みを備えた、自由に選べる製品コンフィギュレーター（Tesla 風、カスタム価格設定、プランビルダー）を設計します。選択肢が無限にある場合（意思決定の停滞）、既製バンドルのみの場合（実質的なカスタマイズができない）、ガイド付き設定（スマートなデフォルト、有意義な制約、柔軟な変更手段）という各パターンについて、率直に評価します。コンフィギュレーターの設計、自由選択式の構築、カスタム設定、プランビルダー、製品カスタマイズ、設定ツールに関するタスクで起動します。また、ユーザーが設定途中で離脱する場合、コンバージョンが低い場合、初めてコンフィギュレーターの要件を定める場合にも起動します。
同一デザインでの移行——現在のデザインをほぼピクセル単位で維持しながら、サイトを AEM Edge Delivery（または任意のクリーンなフロントエンド）に移行します。主要ページを（ページタイプごとに1つのアーキタイプで）クリーンな HTML/CSS として再作成し（DOM のコピーは不可）、測定可能なソース忠実度ゲート（構造、視覚、ブレークポイントごとの結合ピクセル差分）でライブサイトと照合します。その後、サイト全体への展開のため migrate/deploy/rollout に引き継ぎます（prepare-migration の準備カスケードを包含するため、両者を連続して実行しないでください）。許可されるデザイン変更は、明示的な不整合レジスターに記載されたもののみです。ユーザーが「現在のデザインを維持してこのサイトを移行」「同一デザインでの移行」「AEM へピクセルパーフェクトに再プラットフォーム化」「デザインを維持してプラットフォームを変更」と言った場合に使用します。再デザインには使用しません。再デザインには stardust のコアパイプライン（direct/prototype）または uplift を使用します。
1080×1080 の正方形 3 枚で構成するソーシャルメディアのカルーセルです。映画のようなブランドに沿った 3 つのパネルに、シリーズをつなぐ見出し（「onwards.」→「to the next one.」→「looking ahead.」）を配置します。各カードにはブランドマーク、番号／総数、キャプション、「loop」の操作要素があります。「カルーセル投稿」「ソーシャルカルーセル」「Instagram カルーセル」「LinkedIn シリーズ」「X スレッドカード」「三连发」を依頼された場合に使用します。
ko-design-mdカタログ（getdesign.kr）に掲載された韓国ブランドのDESIGN.md（色、タイポグラフィ、間隔、角丸、コンポーネント、注意事項）を、現在のプロジェクトで構築中のUIに適用します。カタログ掲載の韓国サービスのスタイルでUIを構築または再デザインしたいとユーザーが希望した場合に使用します。例：「토스 디자인으로 만들어줘」「당근 스타일로 이 화면 다시 꾸며줘」「getdesign 카탈로그에서 배민 디자인 가져와서 적용」「KRDS 톤으로 폼 잡아줘」「make this look like Toss」。ネットワーク経由であらゆるリポジトリに対応します。カタログ項目の追加や編集（別の`design-md` producer skillの役割）、UIの再デザインを伴わないDESIGN.md形式の説明、ブランドのトーンだけを借りたクイズや試験ページの作成には使用しないでください。
UI コードが Web Interface Guidelines に準拠しているかレビューします。「UI をレビューして」「アクセシビリティを確認して」「デザインを監査して」「UX をレビューして」「サイトがベストプラクティスに沿っているか確認して」と依頼された場合に使用します。ビジュアルデザインとインタラクションパターンに重点を置きます。パフォーマンス監査（core-web-vitals を使用）、SEO（seo を使用）、包括的なサイト監査（web-quality-audit を使用）には使用しないでください。
iPhone Duo と OS 27 に対応して更新された Apple Human Interface Guidelines リファレンス。iOS、iPadOS、macOS、tvOS、visionOS、watchOS 向けに、信頼できるプラットフォーム固有の設計ルール、コンポーネント仕様、正確な寸法、インタラクションパターンを提供します。Apple プラットフォームの UI の設計、レビュー、監査、修正や、特定の HIG コンポーネント、サイズ、システムの動作、フレームワーク（HealthKit、SiriKit、ARKit など）、プラットフォームの規約について尋ねられた場合に使用します。Apple プラットフォームが明示されていなくても、ユーザーがデジタルインターフェースを設計しており、確立された設計原則が役立つ場合にも使用します。既存の iOS アプリを iPhone Duo に適応させるガイド付き /duo ワークフローと、独立したレビュー付きのオプトイン強制モードを含みます。
クラシックなイースターの季節オーバーレイを適用します。パステル調の Theme/StyleBox 注入、紙吹雪・きらめき VFX、弾力のある演出、mesh surface_override のペイント、カーソル・音声の切り替え、プレイヤーが無効化できる期間限定の有効化ゲートを含みます。共有 .mesh/.tres アセットを変更せずに、ホリデースキン、4 月のイベント、イースターエッグ探しの演出を提供する際に使用します。キーワード：pastel、seasonal Theme、StyleBox、confetti、Easter egg、surface_override、TRANS_ELASTIC、Disable Seasonal Themes、activation gate。
Google Fonts のタイポグラフィシステム生成ツールです。Tailwind Typography のリズム概念に沿って、単一フォント（厳密モード）やフォントの組み合わせ（コントラストモード）を提案し、完全なタイポグラフィスケールを作成します。CSS カスタムプロパティ、Tailwind 設定、埋め込みリンクを生成します。「フォントを選ぶ」「フォントの組み合わせ」「タイポグラフィシステム」「文字サイズスケール」「Google Font」「見出し用フォント」「本文用フォント」「ウェブフォント」「サイトに使うフォント」「タイポグラフィスケール」「フォント提案」「どのフォント」「フォントのおすすめ」「セリフ体かサンセリフ体か」で起動します。
ユーザーがあらゆるマーケティングページ（ホームページ、ランディングページ、料金ページ、機能ページ、ブログ記事など）のコンバージョンを最適化・改善・向上させたいときに使用します。ユーザーが「CRO」「コンバージョン率の最適化」「このページはコンバージョンしていない」「コンバージョンを改善して」「なぜこのページが機能しないのか」と言及した場合にも使用します。サインアップ／登録フローについては signup-flow-cro を、サインアップ後のアクティベーションについては onboarding-cro を、登録以外のフォームについては form-cro を、ポップアップ／モーダルについては popup-cro を参照してください。
AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。