Skills
エージェント向けにパッケージ化された専門スキルと手順を 96,981 件掲載。コマンド 1 行でインストールできます。
デザイン・UI
1600x900 の HTML スライドとしてプレゼンスライド、インフォグラフィックページ、PPT 風のビジュアルを設計し、オプションで PPT 書き出しに対応。エージェントがスライドスタイルを選定・説明する場合、内容に基づいてスタイルを提案する場合、静的 HTML スライドを 1 枚以上生成する場合、対応するライト系スタイルで `background_mode` の paper または white をサポートする場合、完成したスライドを高忠実度の画像ベース PPTX にレンダリングする場合に使用します。
Awwwards 品質のプレミアムなウェブサイトデザインを、1 プロジェクトあたり 5 万ドル以上を請求する一流エージェンシーが手がけたような React（.jsx）コンポーネントとして作成する。ユーザーが、高級感・プレミアム・ラグジュアリー・エディトリアル・ハイエンド・エージェンシー品質であるべきウェブサイト、ランディングページ、ポートフォリオ、ウェブコンポーネントを求めたときにこのスキルを使用する。ユーザーが Awwwards、FWA、受賞デザインに言及した場合や、Apple、Aesop、Bottega Veneta、Stripe などのブランド、またはラグジュアリー／ファッション／デザイン重視のブランドを引き合いに出した場合にもトリガーする。ユーザーが「プロフェッショナルに見せて」「高そうに見せて」「本当にかっこよくしたい」「高品質なデザイン」「ありきたりにしないで」などと言った場合や、典型的な AI 生成ウェブサイトの美意識に不満を示した場合にトリガーする。ダッシュボード、管理パネル、内部ツール、または美しさより実用性が優先される機能的な UI にはトリガーしない —— これらは標準の frontend-design スキルが扱う。
動作する Claude Code プロトタイプを構造化された Figma デザインファイルに変換する — 各インタラクションフローを個別の frame に分解し、対象ファイルのデザインシステムコンポーネントを使用し、インタラクションの詳細を Figma 内でネイティブに注記する。ユーザーがプロトタイプを Figma frame に変換したい、プロトタイプからデザイン仕様を生成したい、コードから Figma のハンドオフを作成したい、プロトタイプを状態ごとに分解したい、またはプロトタイプを部門横断の関係者がレビューできるようにしたい場合にこの skill を使用。ユーザーが "prototype to Figma"、"design review from prototype"、"async feedback on prototype"、"break prototype into flows"、"Figma specs from code" に言及した場合や、動作するプロトタイプを非技術系のステークホルダーに理解できる形にしたい場合にもトリガー。ユーザーがプロトタイプの文脈で単に "put this in Figma" や "make this reviewable" と言っただけでも、この skill を使用。
サイトのアートディレクションを、ビジュアルの印象で検索できる実在サイトセクションの厳選インデックス regards.design の調査に基づいて行います。tasteskill v2（MIT、Leonxlnx）のフォークで、インベントリ、アイデアテスト、オープンコレクションの画像、実ブラウザーのインスペクター、見ながら修正するループを維持し、20種類の固定された方向性を、個別の要件に合う実在セクションの検索に置き換えています。技術スタックを問わず、ランディングページ、マーケティングサイト、ポートフォリオ、製品ページ、ワンページサイト、ヒーロー、その他の一般公開向けウェブページの設計、再設計、スタイル変更、仕上げ、レビューに使用します。ページがありきたり、テンプレート的、「AI 製」または他サイトと同じように見えるという場合にも使用します。調査ステップには regards.design MCP サーバーが必要です。ダッシュボードやアプリ画面には使用しません。
SillyTavern のロールカード向けに、フレームワークに依存しない埋め込みインターフェースを設計、実装、レビューします。メッセージコンテンツページ、オープニングページ、MVU ステータスバー、コントロールセンター、ドロワー、ポップアップが対象です。クリエイティブなビジュアルデザイン、メッセージからページへのプロトコル、状態から表示へのマッピング、HTML/CSS/JavaScript、インタラクション状態、レスポンシブ動作、アクセシビリティ、安全なレンダリング、実際のソースを使った任意のプロジェクト固有フロントエンドサンドボックス、実ランタイムへの引き継ぎに使用します。稼働中の SillyTavern インスタンスの動作を解決する主担当としては使用せず、その作業は sillytavern-runtime-debug に引き継いでください。
メッセージ、モーダル、Home タブ向けの Slack Block Kit UI を構築します。Slack 通知、インタラクティブフォーム、ボット応答、アプリダッシュボード、その他の Slack UI を作成する際に使用します。ブロック（Section、Actions、Input、Header）、要素（Buttons、Selects、Date pickers）、コンポジションオブジェクト、slack-block-builder ライブラリを扱います。
投稿、記事、アイデアを、Instagram または LinkedIn 向けの完全なスライド単位のカルーセル台本に変える。フックとなるカバー、1 スライド 1 アイデアのコンテンツスライド、振り返り、CTA スライドを含む。誰かが「カルーセルを作って」「〜についてのカルーセル」「スライドデッキの投稿」「LinkedIn のドキュメント投稿」と言ったときに使用。各スライドにはコピーに加え、デザイナーや画像モデルがそのまま実行できるデザインノートと画像生成プロンプトが付属する。Instagram のフィードカルーセルと LinkedIn のドキュメント投稿ではサイズ、密度、カバーの慣習が異なるため、台本は選択されたプラットフォームに適応する。social-context.md を読み込んでブランドのトーンとオーディエンス設定を取得し、スライドがブランドらしく響き、適切な読者に届くようにする。
ユーザーが提供した記事、チュートリアル、SOP、チェックリスト、テーマに基づき、Codex 内蔵の image_gen 画像生成モデルを使って 3:4 の小紅書（Xiaohongshu）インフォグラフィックと画像シリーズを生成します。常に軽やかな AI プロダクトのインフォグラフィック風（白または淡いラベンダーの背景、黒の大きな見出し、紫青とライムグリーンのアクセント、角丸カード、線画のテックアイコン、フロー/比較/チェックリストのモジュール）を採用します。単体画像と 6〜9 枚のシリーズ画像に対応し、API Key や外部の画像生成バックエンドは不要です。ユーザーが「小紅書の画像を作る」「内容から画像シリーズを生成する」「テック感のあるインフォグラフィックを作る」「こんな感じの画像を作る」「Codex で画像を生成する」「カバーと内ページの画像を作る」などと依頼したときに起動します。
Angular プロジェクト向けに @spartan-ng/helm（リポジトリにコピーされるスタイル付きコンポーネント）と @spartan-ng/brain（ヘッドレスプリミティブ）を使った Spartan/ng UI コードとガイダンスを生成する。インストール、Tailwind v4 テーマ设定、全カテゴリ（フォーム、オーバーレイ、レイアウト、表示、データ）のコンポーネント利用、Brain プリミティブ、ReactiveForms / Signal Forms 連携、アクセシビリティを扱う。ユーザーが Spartan、spartan-ng、@spartan-ng、hlm-* または brn-* コンポーネントに言及した場合、または Angular プロジェクトの package.json に @spartan-ng/* 依存関係が含まれる場合に使用する。Angular の基礎には angular-developer と組み合わせる。
アプリケーションのコマンドを Microsoft Office のようにタブとグループに整理するための Syncfusion WinUI Ribbon コントロール (SfRibbon) の実装ガイド。リボンベースのナビゲーション、クイックアクセスツールバー (QAT)、バックステージメニューを扱う場合に使用します。本スキルでは、リボンのセットアップ、タブとグループの構成、キーボードナビゲーション (KeyTip)、ScreenTip ツールチップについて説明します。
globals.css ファイル内の CSS カスタムプロパティ / Tailwind v4 デザイントークンの統合、重複排除、削減を行うときに使用します。"reduce tokens"、"standardize design tokens"、"too many tokens"、"dedupe globals.css"、"shrink @theme inline"、"collapse similar colors" といったリクエスト、または視覚的な結果を変えずにトークン数を減らすことを目的とするあらゆるタスクで発動します。@theme inline、--color-* エイリアス、:root/.dark/.dashboard-page ブロック、デッドトークン分析、類似値の統合、単一使用のインライン化、Tailwind v4 の任意値エスケープ構文を扱います。
ユーザーがアップロードした写真を、大きな静かなエディトリアルイラスト、6 つの統合されたジャーナリングステッカーのモチーフ、左側のイラストの下に 3 つの小さな英語キーワード、触感のある紙の質感、意図的に粗削りなフラットカラーの面を持つ、横長のコレクティブル・メモリーカード 1 枚に変換する。Codex で P图、編集、描き直し、スタイル化を行う場合、または旅行、街、風景、ライフスタイル、ポートレート、ペットの写真をこの視覚言語のミニマルなポストカード風カードやステッカーカードにしたい場合に使用する。同じ媒体による 1 つの識別アンカーで認識可能性を保ち、任意で場所を特定する正確なランドマークのテキストを 1 回だけ表示する。意図しない写実的なパッチ、署名、透かしを決して残さない。
Web とモバイル向けの UI/UX デザインインテリジェンス。50 以上のスタイル、161 種のカラーパレット、57 種のフォントペア、161 種の製品タイプ、99 件の UX ガイドライン、10 のスタック（React、Next.js、Vue、Svelte、SwiftUI、React Native、Flutter、Tailwind、shadcn/ui、HTML/CSS）に対応する 25 種のチャートタイプを収録。操作：UI/UX コードの計画、構築、作成、設計、実装、レビュー、修正、改善、最適化、強化、リファクタリング、確認。プロジェクト：ウェブサイト、ランディングページ、ダッシュボード、管理パネル、eコマース、SaaS、ポートフォリオ、ブログ、モバイルアプリ。要素：ボタン、モーダル、ナビゲーションバー、サイドバー、カード、テーブル、フォーム、チャート。スタイル：グラスモーフィズム、クレイモーフィズム、ミニマリズム、ブルータリズム、ニューモーフィズム、ベントーグリッド、ダークモード、レスポンシブ、スキューモーフィズム、フラットデザイン。トピック：カラーシステム、アクセシビリティ、アニメーション、レイアウト、タイポグラフィ、フォントペアリング、余白、インタラクション状態、シャドウ、グラデーション。連携：コンポーネント検索と例の参照に使う shadcn/ui MCP。
`@mizchi/vlmkit` ツールキットのエントリーポイント——VLM 駆動のフロントエンドキットで、ビジュアルリグレッション（snapshot / diff / regression-watch）、スクリーンショットからのマークアップ合成、design-token / theme / a11y / i18n 監査、2 段階の VLM + LLM による CSS 自動修復ループを扱う。コーディングエージェントが HTML/CSS を編集し、可視出力が変わったかどうか、どこが変わったか、どの CSS プロパティがその変化を引き起こしたかを知る必要がある場合、またはタスクが VLM 駆動の markup-from-image / token / theme 監査 / fix-loop である場合に使用する。この skill は 5 つの詳細なサブ skill（vrt-visual-diff / vrt-migration-eval / vrt-markup-synth / vrt-regression-watch / vrt-css-fix-loop）と動詞グループ CLI へと導く。タスクの形が明確になったら、一致するサブ skill を選ぶ。
アクセシビリティを後付けの確認ではなく、構築プロセスに組み込みます。セマンティックHTMLを優先し、キーボード操作順とフォーカス管理、視認できるフォーカス、すべてのコントロールへの名前付けを行い、HTMLで対応できない場合に限りARIAを使用します。ライブリージョン、モーション抑制、コントラスト、タップ領域のサイズ、ラベルとエラーが関連付けられたフォーム、見出しとランドマーク、操作不能レイヤー、200％ズーム、スクリーンリーダーで5分以内にテストする方法を扱います。インタラクティブUIの構築、アクセシビリティ対応の依頼、レビューでのアクセシビリティ確認に使用します。
画像モデル（GPT-Image-2、Gemini NanoBanana など）向けに、古典的なアカデミックスタイルの出版可能な図のプロンプトを生成する。ユーザーが枠線付きアーキテクチャ図、フレームワーク／ネットワーク／モジュール図、または JSON 図仕様を求めたときにこのスキルを使用する——"生成框架图"、"画架构图"、"JSON配图规范"、"academic figure prompt"、"框架图JSON" を含む。構造化 JSON 仕様と、アイコン、寸法ラベル、パネルグループ化を含む 200〜400 語の英語画像プロンプトを生成する。パステル調／軽やかな ICLR スタイルの図には、代わりに academic-figure-prompt-pastel にルーティングする。
PassKit フレームワークを使用した Apple Wallet パスの作成、デザイン、署名、配布、更新をユーザーに案内する。ユーザーが Wallet パス、.pkpass ファイル、搭乗券、イベントチケット、ストアカード、クーポン、ロイヤルティカード、会員カード、NFC パス、または Apple Wallet 統合に関連する事柄に言及したときはいつでもこのスキルを使用する。"Add to Wallet" バッジ、パス署名証明書、プッシュ通知によるパスの更新、バーコード/NFC ベースの引き換えフローについてユーザーが尋ねたときにもトリガーする。ユーザーが "I want to create a digital ticket" や "loyalty card for my app" と言っただけでも、このスキルは適用される。
アクティベーションとリテンションを促すカスタマーオンボーディングを設計・実行します。新規ユーザー向けのオンボーディングフローの構築、最初の 30 日間のチャーン削減、タイムトゥバリューの改善、オンボーディングシーケンス（メール、アプリ内、手動）の作成に使用します。アクティベーション指標、オンボーディングステップの設計、摩擦の削減、オンボーディング成功の測定をカバーします。トリガー：「customer onboarding」「onboarding flow」「user onboarding」「reduce early churn」「improve activation」「onboarding sequence」「time to value」。
「@virtuoso.dev/data-table」で仮想化データテーブルを構築する。次のような場合にこのスキルを使う：(1) ソート、フィルタリング、グループ化された行を備えたデータグリッドを構築する、(2) shadcn スタイルまたはヘッドレステーブルを導入する、(3) リモート／ページネーションされたデータソースを接続する、(4) 固定、サイズ変更可能、並べ替え可能、非表示可能な列を追加する、(5) テーブルの状態を永続化する、(6) 外部からテーブルを制御する（スクロール、アクション）、(7) TableVirtuoso から移行する、あるいは VirtuosoDataTable、DataTable、DataTableColumn、localModel、remoteModel、scrollToRow$ や dispatchModelAction$ などの engine ref を扱うタスク。
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 を使用
AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。