Skills
エージェント向けにパッケージ化された専門スキルと手順を 97,501 件掲載。コマンド 1 行でインストールできます。
デザイン・UI
ソリューション段階の UX 計画スキル（任意；プロジェクトに UI がある場合に有効化）。2 つの計画ドキュメントを生成する：DESIGN.md（ビジュアルシステム — デザイントークン、カラーパレット、タイポグラフィ、スペーシング、コンポーネント仕様、WCAG 2.1 AA 契約）と EXPERIENCE.md（ユーザージャーニー、フロー図、画面状態、エラー／空／ローディングの処理）。ユーザーが「UX を設計して」「UX 計画ドキュメントを作成して」「デザインシステムを定義して」「ユーザーフローを図示して」「この機能の UX」「フローをワイヤーフレーム化して」「ユーザージャーニーは何か」「アクセシビリティ設計」「WCAG 準拠」「デザイントークン」「レスポンシブデザイン計画」「モバイルファーストデザイン」「DESIGN.md / EXPERIENCE.md を作成して」と言ったときに使用する。アーキテクチャが起草された後、ストーリーが作成される前に実行する。Create / Update / Validate の意図に対応する。
ウェブサイトの URL からブランドアイデンティティ — トーン、色、タイポグラフィ、イメージ、価値観、ターゲットオーディエンス — を抽出し、構造化された brand-profile.json にまとめる。このプロファイルは下流の skill（seo-content-writer、email-composer、frontend-design、pro-deck-builder、cross-platform-audit）に渡され、ブランドに一貫した出力を生成する。ユーザーが brand DNA、brand profile、extract brand、analyze brand、brand voice、brand identity、brand colors、brand style guide と言う場合に使用する。
個々のカードコンポーネントとカードグリッド: 構造の解剖、grid/masonry/carousel レイアウト、ホバー効果、そして商品、機能、推薦、ブログ、展開可能、裏返し可能なカードの既製パターンとスケルトンローダー。ユーザーが「カードをデザインする」「カードレイアウトを構築する」「商品カードを作成する」「カードグリッドを作る」「推薦カードをデザインする」「ブログ記事カード」「機能カード」「価格カード」、またはカードベースの UI コンポーネントを求めたときに使用する。カード周辺のページセクション全体には landing-page-design、KPI/統計タイルには dashboard-design、一般的なコンポーネントには ui-design を使用する。
個人 IP 図解クリエイター。あなたの IP キャラクターで専用のコンテンツ図解を生成する。ユーザーが許諾して提供した写真、プロフィールのスクリーンショット、自己紹介、アカウント情報、キャラクター設定を、安定したミニマルな手描き図解キャラクターに変換し、さらに長文用の挿絵、画像テキストアカウントのナレッジカード、スマホ用ポスター、メソッド分解図、絵コンテ風ストーリー図、IP 講演 PPT、ライブ配信共有スライド、全図解の手描き PPT ページなどのコンテンツビジュアルを生成する。IP 主人公 + 実行エージェントというナレッジ図解システムを重視する：ユーザーの IP が講師、分解、注釈、進行を担い、実行エージェントがカードの移動、フィードバック、試行錯誤、リスクの指摘、結果の提出を担う。ユーザーが個人 IP キャラクターを作りたい、自分のキャラクターでナレッジ図を作りたい、画像テキストアカウントのナレッジカード、記事の挿絵、講座の図解、コンテンツポスター、メソッド分解図、IP 講演 PPT、ライブ配信共有スライドを作りたい、または写真 / プロフィールのスクリーンショット / 自己紹介をアップロードしてコンテンツビジュアルを作りたい場合に、本 Skill を使用する。
weapp-tailwindcss と `weapp-tw` CLI のスタイル未生成、JS/テンプレート class の未変換、classNameSet、@source/cssEntries、source candidates、rpx、疑似クラス/custom variant、コンポーネント分離、Rspack、圧縮、watch/HMR、H5/Web/App/uni-app x のマルチプラットフォーム成果物の問題を診断する。Use for debugging, troubleshooting, CLI output failures, classes not working, broken hot reload, wrong output, or runtime compatibility；新規プロジェクトの設定、独自 API 設計、Lynx 専用の統合には使用しない。
Apple グラフィックス。Metal, Core Animation, Core Graphics, Core Image, SpriteKit, SceneKit。 MTLDevice, MTKView, MTLBuffer, MTLTexture, MTLResidencySet, MTLTensor, Metal 4 (MTL4CommandQueue, MTL4CommandBuffer, MTL4CommandAllocator, MTL4ArgumentTable, MTL4RenderCommandEncoder, MTL4Compiler), CALayer, CABasicAnimation, CADisplayLink, CAMetalDisplayLink, CAMetalDrawable, CGContext, CGPath, CGImage, CIFilter, CIContext, CIImage, CIRAWFilter, CIWarpKernel, CIBlendKernel, SKScene, SKSpriteNode, SKAction, SCNNode, SCNGeometry, SCNMaterial。
Astryx で完全にカスタマイズ可能な、エージェント対応のデザインシステムを構築する——Meta のプロダクションデザインシステムがオープンソース化。StyleX 上に構築された 150+ の React コンポーネントを提供し、スタイリングのロックインはゼロ、コンポーネントの swizzling、ブランドテーマ、ダークモード、CLI ツールを備える。コンポーネントライブラリ、デザインシステム、UI アプリ、デザイントークンの構築時、または AI エージェントが理解して拡張できる一貫したアクセシブルなコンポーネントをチームが必要とするときに使用する。トリガー：astryx、design system、component library、design tokens、react components、accessible components、astryx design、stylesheets、theme customization、component composition。
アプリのチャートを Recharts または TanStack Charts から Bklit UI に移行します。Recharts の使用（`recharts` の直接インポート、または shadcn/ui の `components/ui/chart.tsx` ラッパー（ChartContainer、ChartConfig、ChartTooltipContent、ChartLegendContent））と、`@tanstack/charts` の定義（lineY／areaY／barY マークを使う defineChart）を検出します。すべてのチャートを洗い出して対応不要／回避策が必要／維持に分類し、対応する `@bklit/*` shadcn レジストリー項目をインストールして、データ、色、ラベルを保持しながら各チャートを同等の bklit コンポーネントで書き換えます。軸のない小さなチャート（Recharts の「Tiny」折れ線／面／棒グラフ、TanStack KPI スパークライン）は LineSparkline／AreaSparkline／BarSparkline に置き換えます。Recharts、shadcn チャート、TanStack Charts の bklit への置換・移行・変換・移植、スパークラインや小さなチャートの交換、recharts または @tanstack/charts 依存関係の削除、あるいはチャートライブラリの切り替えに必要な作業を尋ねられた場合に使用します。
PostHog のフリーフォームキャンバス — PostHog に保存され、デスクトップ/Web アプリでレンダリングされるサンドボックス化されたブラウザアプリ（データボード、ドキュメント、フォーム、小さなツール、グラフィックス実験） — を作成または編集する。タスクが単体のキャンバスアプリの構築、生成、更新、修正を求める場合、またはフリーフォームキャンバス id が公開先として指定された場合に使用する。グリッド/ホームキャンバス、ウィジェットの配置、再利用可能なコンポーネントには、代わりに composing-grid-canvases を使用する。対象キャンバスの解決または作成、実装アプローチの選択（React + Quill か素の HTML/ブラウザ API か）、読む → 編集 → 検証 → 公開 → ビルドのループ、および詳細のために読み込むべきコンパニオンキャンバススキルを扱う。
セマンティック HTML、CSS、直接のブラウザー API で PostHog canvas を作成します。ドキュメント、記事、生成グラフィックス、2D canvas と WebGL の体験、React コンポーネントが有用な構造をもたらさない小規模な実験などが対象です。building-canvases が canvas リクエストをプレーン HTML/ブラウザー API 実装にルーティングした後に使用します。現在のランタイムが必要とする薄いコンポーネントラッパー、Quill を使わないスタイリングとテーマ設定、描画面、アニメーション/クリーンアップのパターンを扱います。
PostHog のグリッド canvas を構成します。再利用可能なコンポーネント canvas から構築されるウィジェットグリッド（ユーザーのホーム canvas を含む）です。グリッドまたはホーム canvas でウィジェットの追加、配置、移動、サイズ変更、削除を行うタスク、1 回の依頼でウィジェットの canvas 全体を構成する場合、再利用可能なウィジェット/コンポーネントを構築する場合、または配置 id やグリッド canvas id が対象の場合に使用します。コンポーネントストアの検索 → 設定 → fork → 構築のはしご、コンポーネント配置契約（size、configSchema）、配置のライフサイクル（pending/generating/live/failed）、保護されたレイアウトパッチループ、canvas のコメントスレッドの読み取りを扱います。
SVG Style Studio (/create-svg) — アートディレクター + ベクターイラストレーター。洗練された編集可能な SVG（イラスト、ロゴ、アイコン、ポスター、インフォグラフィック、ステッカー）を 44 のスタイルで制作する — ピクセルアート、8/16 ビット、サイバーパンク、Y2K、Frutiger Aero、グラスモーフィズム、クレイ、アイソメトリック、ローポリ、ペーパーカット、ドゥードル、コミック、マンガ、水墨画、浮世絵、アールヌーヴォー、アールデコ、バウハウス、ブルータリズム、ヴィンテージポスター、スクリーンプリント、リソグラフ、ブループリント、テクニカル/サイエンティフィック、中世、グラフィティ、ステッカー、子供向け、エディトリアル、インフォグラフィック、シネマティック、ファンタジー、SF、ホラー、レトロフューチャリズム、ゴシック、ラグジュアリー、モノクローム、ジオメトリック、ボタニカル。SVG/ベクターアートのあらゆるリクエスト、スタイルの組み合わせ（"cyberpunk + minimalist"、"ukiyo-e but darker"）、1 つの題材を複数のスタイルで（"in 5 styles"）、SVG/画像をスタイルに変換する場合に使用する。スタイルを選定し、そのデザインルールを適用したうえで、検証、最適化、レンダリング、検査を行ってから納品する。
Vue 用の Floating UI（@floating-ui/[email protected]）。\"@floating-ui/vue\" をインポートするコードや、useFloating、arrow、floatingStyles、autoUpdate を使用するコードを書く際は必ず使用する。ミドルウェアの設定、アンカリング、仮想要素、v1 から v2 への移行について参照。Vue 3.3 以降のみ。
ファーストビューの hero セクションパターン（中央揃え、分割、動画、ミニマルなタイポグラフィ）、背景手法、LCP パフォーマンスを、本番投入可能なコードとともに扱う。ユーザーが "create a hero"、"build a hero section"、"design above the fold"、"make a hero banner"、"landing page header"、"build a homepage hero" を求めたり、ページの最上部のみを再設計する場合に使用する。複数セクションからなるマーケティングページ全体には landing-page-design（その hero に本スキルを使用）を、静的な hero の*画像やバナーグラフィック*には banner-design を使用する。
コードだけでショーリール級のモーショングラフィックス動画を作成する —— HTML シーンをヘッドレス Chrome で 1 フレームずつレンダリングし、本物のモーションブラーを加え、さらに各動画に同じビートグリッド上でオリジナルの楽曲を作曲する。相手が与えたもの —— 言葉、サイト、GitHub リポジトリ、アプリ、スクリーンショット、自身の動画クリップや写真、参考クリップ —— から映像そのものを演出し、それらに基づいて音楽のテンポとエネルギーを設定する。あらゆるプロモ、広告、ローンチ動画、エクスプレイナー、リール、Shorts や TikTok、イントロ、キネティックタイポやロゴアニメーションに、企業、製品、アプリ、サイト、ボット、チャンネル、個人向けに使用でき、手元にリンクや名前しかない場合でも対応する。
デザインシステムに沿って一貫した UI コンポーネント、レイアウト、デザイントークンを生成する。React/TypeScript プロジェクト全体で余白、色、タイポグラフィ、アクセシビリティの基準を徹底する。新しい UI コンポーネントの作成、ページレイアウトの構築、色やタイポグラフィの選択、デザイントークンの設定、UI コードのデザイン一貫性のレビュー時に使用する。8pt の余白グリッド、Tailwind CSS のトークン使用、shadcn/ui のプリミティブ、WCAG 2.1 AA 準拠、レスポンシブブレークポイント、セマンティックな HTML 構造、TypeScript のコンポーネントインターフェースを扱う。バックエンド実装（python-backend-expert を使用）、テスト（react-testing-patterns を使用）、デプロイ（deployment-pipeline を使用）は扱わない。
PostHog canvas の React + Quill 実装を作成します。単一コンポーネントの契約、許可されたインポート、Quill（PostHog のデザインシステム）のコンポーネントとコンポジションのルール、テーマ対応のデザイントークン、ローディングスケルトン、canvas 内の日付ピッカーを扱います。building-canvases が canvas リクエストを React 実装にルーティングした後に使用します。ダッシュボード、データボード、フォーム、ツール、または PostHog にネイティブに見えるべきあらゆる canvas が対象です。
Refactoring UI の原則を Flutter/Dart で実装するパターン。mobile-app-design-mastery の COMPANION スキル。以下では常に有効化する：Flutter のテーマ、ThemeData、ColorScheme、TextTheme、BoxDecoration、Material 3、Flutter の影、Flutter の余白、Flutter のタイポグラフィ、Flutter のダークモード、Flutter のコンポーネント、Flutter のスタイリング、Dart UI、Widget の装飾。ThemeData の設定、カラースキーム、タイポグラフィスタイル、余白ユーティリティ、装飾パターンを提供する。トルコ語：Flutter tema, Flutter renk, Flutter tasarım, Dart UI, widget stil。英語：Flutter theming, Material Design, Flutter styling, widget decoration。
以下の 30 種類のモダンなデザインスタイルのいずれかで PPTX スライド、プレゼンテーション、デックを作成するときは常にこのスキルを使用する：グラスモーフィズム、ネオブルータリズム、Bento グリッド、ダークアカデミア、グラデーションメッシュ、クレイモーフィズム、スイスインターナショナル、オーロラネオングロー、レトロ Y2K、ノルディックミニマリズム、タイポグラフィックボールド、デュオトーンカラースプリット、モノクロミニマル、サイバーパンクアウトライン、エディトリアルマガジン、パステルソフト UI、ダークネオンマイアミ、ハンドクラフトオーガニック、アイソメトリック 3D フラット、ヴェイパーウェイヴ、アールデコラグジュアリー、ブルータリストニュースペーパー、ステンドグラスモザイク、リキッドブロブモーフィング、メンフィスポップパターン、ダークフォレストネイチャー、アーキテクチュラルブループリント、マキシマリストコラージュ、SF ホログラフィックデータ、リソグラフプリント。"sleek""modern""trendy""designed""stylish""visually striking" といった語でプレゼンテーションが表現されるリクエストでも有効化する。
完成済み(または修正済み)のワイヤーフレーム文書をレビュー/判定するときに使用する — 下流のハイファイ + UI エンジニアリングがそれから画面構造を構築できるかという受け入れゲート。単一ソースの構築可能性 + カバレッジ + コンポジションの基準に対してテキスト形式の markdown ワイヤーフレームを判定する。フロー名を持つすべての画面/状態が品質状態付きでカバーされている。レイアウトがグリッド + 共有アプリシェル上で曖昧でなく、客観的なレイアウト品質基準を満たす。実在し一貫したコンポーネント。アフォーダンス + データ表示が注釈付き。マイクロコピーの意図(ラベルにデータモデルの漏れがない)。画面コンポジションのアクセシビリティ(landmark/フォーカス順序/ターゲットサイズ) — ピクセル単位のコントラスト/フォーカス外観はデザインシステムの領域であり、ここでは判定しない。レスポンシブ。ギャップが明示されている。ハイファイではなく構造的。修正はスコープ付きのバージョン差分としてレビューする。`VERDICT: approve|revise` + 実行可能な指摘を出力する。基準を満たす文書は承認し(内容の薄い画面で誤って revise しない)、明確なギャップがある場合にのみ revise する。作成、ナビゲーショングラフ(user-flows)、ビジュアルトークン(design-system)、ハイファイには使用しない。
1 つの実験で公開されたセッションを監視し、各セッションのバリアントを記録して均等にサンプリングし、実験終了時に停止する Replay Vision `experiment` スキャナーを構成します。ステータスガード、バリアント間で比較可能なプロンプト、実験固有の対象数に基づくクレジット消費量の見積もり、実際のセッションでプロンプトをプレビューできるよう無効状態で作成する方法、バリアント別の結果の読み取りを扱います。 トリガー条件：Replay Vision に実験を監視させたい場合、実験の録画を AI でスキャンまたは分析したい場合、「テストバリアントでユーザーは実際に何をしているのか」と尋ねる場合、または実験で公開されたセッションに限定したスキャナーを求める場合。 トリガーしない条件：実験に紐づかない汎用スキャナーを作成する場合（creating-replay-vision-scanners を使用）、スキャナーがすでに生成した観察結果を読む場合（exploring-replay-vision-observations を使用）、または AI 分析を行わず手動で実験の録画を閲覧する場合（analyzing-experiment-session-replays を使用）。
CSF3 形式で Storybook のストーリーとインタラクションテストを書き、保守する。コンポーネントのストーリー、play 関数、Chromatic によるビジュアルリグレッションテスト、アクセシビリティテストを扱う。コンポーネントのドキュメント作成、インタラクションテストの記述、テスト失敗のデバッグ、ビジュアルスナップショットの設定、ストーリー構造の更新に使用する。CSF3、play 関数、userEvent、Testing Library のクエリ、Chromatic の設定、autodocs、MDX に使用する。
weapp-tailwindcss の動的 class の組み合わせとランタイムラッパーの設計・トラブルシューティング。@weapp-tailwindcss/runtime、merge、cva、variants、typography、theme-transition、ui、clsx、twMerge、weappTwIgnore、escape/unescape、rpx transformer、キャッシュ、コンポーネントの class 上書きを扱う。動的 class、cn ヘルパー、variant API、ランタイムパッケージの選択、または実行時の class エスケープに使用する；バンドラーの初期導入、React Native、Lynx コンパイラ設定には使用しない。
json-render、v0.app、Google Stitch、Bolt Cloud、Cursor のワークフロー向けの AI 支援 UI 生成パターン。コンポーネントおよびフルスタックアプリ生成のためのプロンプトエンジニアリング、AI 生成コードのレビューチェックリスト、デザイントークンの注入、デザインシステム準拠のためのリファクタリング、品質保証のための CI ゲートを扱う。AI ツールで UI コンポーネントを生成するとき、マルチサーフェスの MCP ビジュアル出力をレンダリングするとき、AI 生成コードをレビューするとき、AI 出力をデザインシステムに統合するときに使用する。
コンバージョンにつながる Amazon 商品画像セットを完全に計画する。メイン画像とギャラリーの撮影リストを作成し、各インフォグラフィックを設計し、ライフスタイルシーンを計画し、ギャラリーが順に懸念を解消するよう順序を設定する。ユーザーがリスティング画像、メイン画像、フォトギャラリー、インフォグラフィック、ライフスタイル画像、画像の順序、リスティングに必要な写真について尋ねたときに使用。トリガーフレーズ: "listing images", "main image", "product photos", "image gallery", "infographics", "lifestyle images", "shot list"。ツールなしで動作します。ユーザーが商品とその購入者を説明します。
HTML と ASP.NET Core Razor Pages/Views でモダンでレスポンシブな Web UI を構築するための実運用グレードの Bootstrap 5.3 パターン。Bootstrap 5 で Web ページ、レイアウト、ナビゲーション、フォーム、カード、モーダル、テーブル、その他の UI コンポーネントを作成またはスタイリングする場合に使用。グリッドシステム、レスポンシブブレークポイント、ユーティリティクラス、カラーモード（ダーク/ライト）、アクセシビリティ、ASP.NET Core タグヘルパーおよび Razor 構文との統合を扱う。Bootstrap CSS クラス、レスポンシブ HTML レイアウト、Razor Page UI デザイン、.NET Web アプリケーションのフロントエンドスタイリングを含むタスクで発動する。
AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。