Skills
エージェント向けにパッケージ化された専門スキルと手順を 97,222 件掲載。コマンド 1 行でインストールできます。
デザイン・UI
ウェブから CSS コンポーネント、SVG アイコン、デザインパターン、ビジュアルのインスピレーションを検索して取得する。ユーザーが CSS スニペット、SVG アイコン、UI コンポーネント、ローディングスピナー、アニメーション、デザインのインスピレーション、またはあらゆるビジュアル/フロントエンド設計リソースの検索や参照を求めたときに使用する。"find me a CSS button"、"look up an SVG spinner"、"search for a card component"、"find a wave divider SVG"、"get design inspiration for a dashboard" などのリクエストで発動する。
半径／スペーシングのスタイルレシピを用いて、PPT スライドの一貫したビジュアルデザインシステムを選びます。ユーザーが全体的なスタイルの方向性やコンポーネントスタイルの一貫性を求めたときに使用します。Sharp/Soft/Rounded/Pill のレシピ、コンポーネントのマッピング、タイポグラフィ／スペーシングのルール、組み合わせのガイダンスを含みます。トリガー：风格, style, radius, spacing, 圆角, 间距, PPT风格, 视觉风格, design style, component style。
WeChat 公式アカウント記事のカバー画像を生成するための AI プロンプト。記事のタイトルと内容をインテリジェントに分析し、核となる価値とビジュアルテーマを抽出して、即夢（Jimeng）などの AI 描画ツールに適したプロフェッショナルなプロンプトを生成する。コンテキストから記事内容を読み取ることをサポートし、カバーが記事のテーマに高度に合致することを確保する。ユーザーが WeChat 公式アカウント記事のカバーを生成する、カバー画像のプロンプトを作成する、記事に画像を添える必要がある場合にこのスキルを使用します。
Kuroco と Vite / React / Nuxt.js / Next.js などのフロントエンドフレームワークの統合パターン（SPA・SSG・SSR の実装）。Kuroco サイトの画面設計・デザイン改善（定型的な AI 表現の抑制、Kuroco とフロントの管理分担）、SPA / SSG でのコンテンツ表示（SSR・ISR が必要な場合の公開先切り替えを含む）、ログイン・会員登録・認証状態管理（Cookie 認証・動的アクセストークン）、サードパーティ Cookie 問題の回避、XSS 対策、公開先の決定（既定は KurocoFront、Vercel・Codex Sites 指定時の確認事項）、KurocoFront へのデプロイ（kuroco_front.json、GitHub 連携、Admin MCP 直接デプロイ）をカバー。Kuroco サイトの画面デザインや見た目の修正、フロントエンドからの Kuroco 連携、認証状態の管理、静的生成・動的ルート、デプロイ、公開先の選択の依頼で使用。
マーケティングページの第三者視点分析・改善スキル。 対象: ランディングページ、ホームページ、価格ページ、機能ページ、ブログ。 CROフレームワークとダイレクトレスポンス原則(Schwartz/Hopkins/Ogilvy)を統合。 使用タイミング: (1) ページの監査・分析依頼 (2) コンバージョン改善相談 (3) コピーライティング改善 (4) A/Bテスト設計 (5) 実装の優先順位付け。 トリガー例: 「LPを分析して」「コンバージョン率を上げたい」「価格ページをレビュー」 「ヒーローセクションを改善」「CTAを最適化」「HPの改善案」
既存の React Native / Expo アプリのデザインを監査する——AI-tells grep チェックリストを実行し、10 カテゴリのルーブリックで画面を検査し、各画面に Trunk Test を行い、影響度付きの指摘事項を Design Score と AI Slop Score、回帰ベースラインとともに作成する。既定ではレポートのみ、任意で修正モード。アプリのデザインや UI 品質のレビュー、監査、批評、QA を求められた場合に使用する。新しい画面を構築する場合は mobile-taste、実際に再設計する場合は mobile-redesign-screen または mobile-redesign-app を使用する。
React Native アプリのデザインシステム——セマンティックカラートークン（ライト + ダーク）、Dynamic Type の範囲を考慮した書体スケール、角丸/影/余白のスケール、ハプティクスとモーションの方針——を SAFE/RISK 提案として提示・生成し、実際のテーマファイル（NativeWind 設定または StyleSheet トークン）と MOBILE-DESIGN.md を書き出す。アプリのビジュアルアイデンティティを立ち上げる時、テーマ/パレット/デザイントークンを求められた時、インラインスタイルを使っていてトークンシステムが必要な時に使用する。このシステムで画面を構築する場合は mobile-taste、既存アプリを監査する場合は mobile-design-review を使用する。
サインアップ後のオンボーディング、ユーザーアクティベーション、初回利用体験、Time to Value を最適化したい場合に使用する。「オンボーディングフロー」「アクティベーション率」「ユーザーアクティベーション」「初回体験」「空の状態」「オンボーディングチェックリスト」「アハモーメント」「新しいユーザー体験」に言及した場合も使用。サインアップ／登録の最適化については signup-flow-cro、継続的なメールシーケンスについては email-sequence を参照。
個人のフロントエンド美学、機能駆動の情報整理、継続的に進化する UI 設計のガイド。Use when designing, building, polishing or reviewing this user's frontend UI, dashboards, charts, forms or admin panels; choosing task-fit interactions such as joint rankings, rollups and drill-down; following 我的品味/个人审美; or recording approved feedback. Applies scoped preferences and interaction patterns across projects. Not for backend-only work.
ライブのウェブページをローカルの Next.js + Tailwind CSS プロジェクトにクローンし、迅速なプロトタイピングを行う。ユーザーが URL やスクリーンショットを共有し、そのページをローカルで複製、再設計、または反復したいときはいつでもこの skill を使用する — 「clone this site」「make a prototype based on this page」「recreate this UI」「build something that looks like this」と言う場合でも、単にリンクを貼ってコード化を依頼する場合でも同様。ユーザーが新しいページを追加したい、既存のページを変更したい、または以前にこの skill で作成したプロトタイププロジェクトを拡張したい場合にも発動する。ユーザーが「I want to build a page like X」と言い、参考リンクや画像を添えるだけの場合でも、この skill は適用される。
.pptxファイルが入力、出力、またはその両方として何らかの形で関わる場合は、必ずこのスキルを使用します。対象には、スライドデッキ、ピッチデッキ、プレゼンテーションの作成、.pptxファイルの読み取り・解析・テキスト抽出（抽出内容をメールや要約など別の用途に使う場合も含む）、既存プレゼンテーションの編集・変更・更新、スライドファイルの結合・分割、テンプレート、レイアウト、発表者ノート、コメントの操作が含まれます。ユーザーが「deck」「slides」「presentation」と言った場合、または.pptxファイル名を示した場合は、その後の利用目的にかかわらず起動します。.pptxファイルを開く、作成する、または操作する必要がある場合は、このスキルを使用してください。
ページが AI エージェントやエージェント型ブラウザーによってどの程度操作できるかを監査する。セマンティックなインタラクティブコントロール（div/span のクリックハンドラーではなく <button>/<a href>）、名前付きのボタンとリンク、ラベルのあるフォームコントロール、javascript: href を使用しないこと、主要コンテンツが iframe の外にあること、WebMCP の検出を含む。Google の生成 AI ガイダンスと web.dev の agent-friendly websites ガイドに従う。モジュール M22 "Agent-readiness"。AI Visibility スコアに反映される（重み 4、すべて方向性）。
AutoComplete、ComboBox、Mention、Dropdownlist、Multiselect、ListBox、MultiColumn ComboBox を含む Syncfusion TypeScript ドロップダウンコンポーネントを実装するための包括的なガイド。選択インターフェースの構築、データバインディング、フィルタリング、カスケードドロップダウン、デュアルリスト転送、カスタムテンプレート、アクセシブルなドロップダウン体験に使用する。
Syncfusion EJ2 JavaScript ポップアップコンポーネント（Dialog、Predefined Dialog（DialogUtility）、Tooltip）を実装するための包括的なガイド。TypeScript/JavaScript アプリケーションでモーダル/モードレスダイアログ、アラート/確認ウィンドウ、ドラッグ可能なダイアログ、サイズ変更可能なウィンドウ、ポップオーバー、ツールチップ、およびカスタム配置、アニメーション、WCAG 2.2 アクセシビリティ、フォーム統合、イベント処理を備えたオーバーレイコンテンツを構築する際に使用する。
ある設計判断が一つのグループのアクセシビリティを改善する一方で別のグループに影響しうる場合、またはアクセシビリティが他の要件と競合する場合に、アクセシビリティのトレードオフを分析する。相反するアクセシビリティ要件、アクセシビリティの範囲を縮小しようとするビジネス上の圧力、アクセシビリティの選択肢を制限する技術的制約に直面したときに使用。トリガー：トレードオフ、妥協、アクセシビリティ対パフォーマンス、アクセシビリティ対期限、相反する要件、どのユーザー、誰を優先するか、両方は無理、アクセシビリティの範囲。
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 を使用
ユーザーがマーケティング画像の生成や画像プロンプトの作成を求める場合に使用 — パーソナルブランドのポートレート、ロゴとモノグラム、キャンペーンのキービジュアル、日々のソーシャルグラフィック、エディトリアルアート、インフォグラフィック、Web ヒーローモックアップ、引用グラフィック。プロジェクトのコンテキストからブランドアイデンティティを読み取り、ブランドに沿ったプロンプトを構成し、API キーがあれば gpt-image-2 で生成し、なければ DALL-E 3、MidJourney、Leonardo、Ideogram 用の貼り付け可能なプロンプトを出力する。トリガー：'design an image'、'make me a logo'、'MidJourney prompt'、'key visual for the campaign'、'generate a graphic for this post'、'I need a visual and have no designer'。非対象 — 静的画像について人間のデザイナーにブリーフィングする場合は `42-image-brief-global` を参照；スライドのシーケンスは `43-carousel-brief-global` を参照；ブランドルール自体は `46-brand-guideline-global` を参照；完成したデザインの採点は `47-design-review-global` を参照。
Nano Banana Pro AI とスマートな反復改良によりプロフェッショナルなインフォグラフィックを作成し、Gemini 3.1 Pro による自動品質レビューと、出典付きデータのためのオプションの Perplexity Sonar リサーチフェーズを使用——10 種類のインフォグラフィック、8 種類の業界スタイル、色覚異常に配慮したパレットに対応。インフォグラフィック、データストーリー図、統計ポスター、比較チャート、タイムライン、プロセス/ハウツー可視化、またはデザインされたレイアウトと図を組み合わせたリスト/ソーシャル図の作成を依頼されたときに使用。技術的なフローチャート、CONSORT/PRISMA、パスウェイ、アーキテクチャ図には alterlab-scientific-schematics を、インフォグラフィック以外のイラストには alterlab-generate-image を、データセットの正確なプロットには alterlab-matplotlib を使用。AlterLab Academic Skills スイートの一部。
Beamer LaTeX スライドのワークフロー：学術プレゼンテーションの作成、コンパイル、レビュー、仕上げ。ユーザーが Beamer の .tex スライドデッキを扱う場合、またはスライドの作成、プレゼンテーションの作成、講義の準備、トークの構築、論文 PDF や Markdown からの Beamer スライド生成を依頼した場合に本スキルを使用。対象：作成、編集、コンパイル、校正、ビジュアル監査、教育上のレビュー、TikZ 図、図の抽出、包括的な品質チェック。トリガー：beamer、slides、lecture、presentation、seminar talk、conference talk、defense slides、tikz、compile latex、proofread slides、slide review、讨论班、论文讲解。トリガーしない：powerpoint、pptx、PPT、做PPT——代わりに powerpoint-slides スキルを使用。
tryelements.dev レジストリ用の新しい UI 要素を作成する。使用場面：(1) 新しい UI コンポーネント（ボタン、入力、カード）の追加、(2) 統合コンポーネント（Clerk、Stripe、Uploadthing）の構築、(3) テーマ関連要素の作成、(4) 任意の shadcn スタイルのレジストリコンポーネント。重要：バリアント付き（icon/wordmark/logo + dark/light）の logo コンポーネントには、代わりに logo-with-variants スキルを使用する。このスキルにはスキャフォールディング、レジストリ schema、コンポーネントパターンが含まれる。実装前に必ず Context7 MCP を使用して最新の依存関係ドキュメントを取得すること。
あらゆるデザインの参考資料から、完全で AI が利用できるデザインシステムを構築する——スタイルの説明（「グラスモーフィズムを取り入れたダークモードのフィンテック」）、既存アプリのスクリーンショット/画像、または Figma リンク。構造化されたデザイントークン（JSON）、CSS 変数、Markdown 仕様書、HTML プレビューページを出力し、そのすべてが AI コーディングエージェント（frontend-design など）に直接入力して、推測なしに視覚的に一貫したインターフェースを生成できるよう設計されている。次のような依頼があったときはいつでもこのスキルを使用する：デザインシステムの作成、デザイントークンの抽出、コンポーネントライブラリの構築、スタイルガイドの生成、カラーパレットやタイポグラフィスケールの定義、UI の標準化、AI 支援開発のためのデザインコンテキストの準備。また、「アプリの見た目を統一したい」「テーマが欲しい」「デザイン変数を設定したい」「スタイルの基盤を作りたい」「このデザインからスタイルを抽出したい」といった場合にも起動する。
あらゆるフロントエンド UI —— React、HTML/CSS、Framer、その他の Web コンポーネントに、シニアデザイナーの判断を適用する。このスキルは、AI エージェントにデザイン判断力を与える際に実際に何が機能し何が機能しないかについての実践的な調査の成果である。理論上のガイドラインではなく、実際のプロジェクトと AI 生成出力への反復を通じて鍛えられた原則である。ユーザーが UI コードを構築、レビュー、反復しており、デザインの質が重要なときに使用する。トリガーには、コンポーネントやページの作成、既存 UI のレビュー、デザインフィードバックの依頼、ダッシュボードやデータ表示の構築、視覚的階層の調整、Framer コンポーネントの作業、あるいは出力にレンダリングされたインターフェース要素が含まれるあらゆるタスクが含まれる。ユーザーが単に 'make it look better' や 'clean this up' と依頼した場合でも、このスキルを使用する —— 意図的なデザインと生成された凡庸さを分ける原則を含んでいる。
アプリのエラー UX をエンドツーエンドで監査・実装する。エラーメッセージの書き直し、適切な配置、復旧アクションの追加、バリデーション・ネットワーク・権限・システム・404 の失敗に対するエラー状態の構築を行う。ユーザーが「エラー処理を改善したい」「エラーメッセージがひどい」「失敗するとユーザーが行き詰まる」「フォームのバリデーションエラーを追加したい」「オフライン/ネットワークエラーを処理したい」「404 ページを設計したい」と言ったとき、またはレビューで「Something went wrong」だけの文字列、サイレント失敗、先に進めないエラーが見つかったときに使用する。エラー状態マトリクス（すべての失敗モード × メッセージ × 復旧アクション）と、実装されたエラーコンポーネントおよびコピーを生成する。
AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。