Skills
エージェント向けにパッケージ化された専門スキルと手順を 97,222 件掲載。コマンド 1 行でインストールできます。
デザイン・UI
プレミアム、アプリネイティブなスクリーンコンセプトとフローを作成するための精選モバイルアプリ画像生成スキル。iOS、Android、およびクロスプラットフォームモバイル製品向けに設計されています。きれいな階層構造、読みやすいテキスト、強力なマルチスクリーン一貫性、制御されたカラーパレット、非ジェネリックなクリエイティブな方向性、テクスチャ表面、画像主導の構図、上品なカスタムアイコン、きれいな電話モックアップフレーミングを優先します。デフォルトでは、スクリーンは微妙なプレミアム iPhone または同様の電話モックアップ内に表示され、目に見えるフレームがあります。一方、メインのフォーカスはアプリコンテンツ自体に留まります。このスキルは画像のみを生成します。コードは記述しません。
高級なフロントエンド画像指導スキル。プレミアム品質で、コンバージョン対応のウェブサイトデザインリファレンスを生成します。重要な出力ルール — 各セクションごとに 1 つの独立した横長画像を生成します。8 つのセクションを持つランディングページは 8 つの画像を生成します。複数のセクションを 1 つの画像に圧縮しないでください。構図の多様性（常に左テキスト/右画像ではない）、背景画像の自由度、異なる CTA、異なるヒーロースケール（巨大/中程度/ミニマリスト小）、ナラティブコンセプトスパイン、二次読み取りモーメント、すべての画像にわたって単一の一貫したパレットを強制します。ランディングページ、マーケティングサイト、開発者またはコーディングモデルが正確に再現できるプロダクトコンプ向けに最適化されています。
内容の密度が高い PDF（またはその章・節）を、元の資料より素早く理解でき、楽しく探索できる単一ファイルのインタラクティブな HTML ページに変換します。最初の画面に 30 秒で読める要約を置き、操作できるシーンや「予想してから答えを見る」仕掛けを盛り込みます。すべての数値に、原文とページを開ける引用を付け、指定されたアートスタイルで図解した後、原資料と照合して自己監査します。PDF、論文、教科書の章、年次報告書 / 10-K、規則集、マニュアル、契約書、小説の章、講義ノートを読みやすくしたい、「生き生き」とさせたい、インタラクティブに探索したい、スクロール型ストーリーテリングやミニウェブアプリ、インタラクティブなレッスン、教材にしたい場合に使用します。「この PDF は読めない」「読むのを手伝って」と言われた場合や、Gemini Canvas / Claude Artifacts のような「PDF からウェブアプリ」への言及がある場合も対象です。中国語のトリガー：把 PDF 做成网页、可交互网页、互动课件、可视化讲解、读不下去的 PDF、论文/教材/财报/规则书/名著变成能玩的页面、Canvas 那种 PDF 变网页。
SaaS製品の無料から有料へのコンバージョンフローを設計します。トリガーとなるタイミング、ペイウォール設計、価値の提示、アップセルとダウンセル、再獲得フロー、解約防止を扱います。「どこでもペイウォール」（あらゆる機能を積極的に制限）、「無料版の罠」（アップグレードへの導線がない）、「価値を契機としたアップグレード」（価値が実証されたタイミングでペイウォールを表示）というパターンを率直に扱います。アップグレードフロー、ペイウォール、無料から有料への移行、フリーミアムのコンバージョン、トライアルのコンバージョン、プランのアップグレード、サブスクリプションのアップグレード、再獲得フロー、解約防止などで起動します。無料から有料への転換率が低い場合、ペイウォールが不適切なタイミングで妨げになっている場合、またはアップグレードフローを初めて策定する場合にも起動します。
React/Next.js コードの機能単位の UX 監査を行います。Lighthouse、axe、ESLint、Storybook が見落とす問題——状態カバレッジの不足（ローディング/空/エラー状態の欠落）、検証時のフォームデータ消失、フォーカス管理の不備、ロールバックのない楽観的 UI、スケルトンによるレイアウトシフト、曖昧なマイクロコピー、その他 25 件以上の最新フロントエンド UX バグを検出します。差分を認識して変更ファイルのみを監査し、画面領域ごとに 3 段階のリリース準備度（リリース阻害要因／今スプリントで修正／バックログ）を判定します。最新の React 19 API（useActionState、useFormStatus、useOptimistic、useTransition、Suspense）を使った具体的な修正案も提示します。フロントエンド PR のマージ前や機能公開前、「このチェックアウト／オンボーディング／ダッシュボードは準備できているか」「この PR の UX バグをレビューして」「このコンポーネントを監査して」「本番環境で何が壊れるか」「リリースしてよいか」と尋ねられた場合に使用します。
ユーザーがフロントエンドインターフェースの設計、再設計、構成、批評、監査、仕上げ、明確化、要約、強化、最適化、調整、アニメーション化、色付け、抽出、その他の改善を望む場合に使用。ウェブサイト、ランディングページ、ダッシュボード、製品 UI、アプリシェル、コンポーネント、フォーム、設定、オンボーディング、空の状態を対象とする。UX レビュー、視覚的階層、情報アーキテクチャ、認知負荷、アクセシビリティ、パフォーマンス、レスポンシブ動作、テーマ、アンチパターン、タイポグラフィ、フォント、余白、レイアウト、配置、色、モーション、マイクロインタラクション、UX コピー、エラー状態、エッジケース、i18n、再利用可能なデザインシステムやトークンに対応。平凡なデザインをより大胆または魅力的にしたい場合、派手なデザインを控えめにしたい場合、ブラウザー上で UI 要素を反復的に調整する場合、技術的に際立つ高度な視覚効果を求める場合にも使用。バックエンドのみ、または UI 以外のタスクには使用しない。
セマンティックな HTML、CSS、JavaScript と、独自のアートディレクション、Codex 生成のラスター画像を用いて、本番品質のスタンドアロンウェブサイトを新規作成または再設計します。React、Vue、Next.js などのアプリケーションフレームワークを必要としないランディングページ、マーケティングサイト、ポートフォリオ、製品ページ、エディトリアルサイト、静的ダッシュボードに使用します。フレームワークベースのアプリケーション、デプロイのみの作業、既存のフレームワークプロジェクトに属する単独コンポーネントには使用しないでください。
V4 RAPサービス上の@UI.*アノテーションを基に、Fiori MCPサーバーの3段階ワークフロー（list_functionalities → get_functionality_details → execute_functionality）を使用して、Fiori Elements V4 LROPアプリ（リストレポート＋オブジェクトページ）を生成します。「Fiori Elementsアプリを構築」「このV4サービスからLROPを生成」「アノテーション駆動UIに変換」「Fiori Elements V4の雛形を作成」と依頼された場合に使用します。
クラシックなイースターの季節オーバーレイを適用します。パステル調の 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。
@qfei-design/make-app-sort を使った Make App のレコードリストの並べ替えを、統合、生成、リファクタリング、レビュー、デバッグするときに使用します。並べ替え、高度な並べ替え、複数フィールドの並べ替え、優先順位、昇順/降順、並べ替え条件のドラッグ＆ドロップ、テーブル/ヘッダー/列の並べ替え、openWithField、並べ替え機能、Entity Preset の並べ替えの保存/読み込み/反映、レコードの並べ替えペイロード、並べ替えテストが対象です。統合ツールバー、CanvasTable ヘッダー、Entity Preset、Service の並べ替えフローを扱います。make-app-actions が存在する場合、並べ替えの適用に成功したら選択を解除し、保留中のアクション処理を無効化する必要があります。下書きの編集や失敗時は選択を維持します。ページのシェル/レイアウト、CanvasTable のレンダリング内部、Service のルート実装、権限ポリシー、認証、ランタイムのパッケージング、DSL モデリング、Make CLI の実行、npm パッケージの内部実装、グループ化は対象外です
v4 の改善を含む Tailwind CSS のパフォーマンス最適化。次の場合に積極的に使用：(1) Tailwind v4 の Oxide エンジンのパフォーマンス、(2) Lightning CSS の圧縮、(3) CSS バンドルサイズの削減、(4) 未使用ファイルのスキャンを避ける content 設定の調整、(5) 動的クラス向け safelist（肥大化を防止）、(6) @apply を最小限に抑えた本番ビルド、(7) クリティカル CSS の抽出、(8) 生成 CSS の HTTP キャッシュ、(9) @apply の過剰使用の回避（utility-first を優先）、(10) PurgeCSS／コンテンツ検出のエッジケース。パフォーマンス調整チェックリスト、Oxide エンジンの解説、content 設定パターン、safelist のガイダンス、クリティカル CSS のワークフローを提供
クリエイティブディレクション主導の作業について、段階的なデリバリーのオーケストレーション計画を作成します。どのスキルをいつ実行するか、どのゲートで何を確定するか、引き継ぎ方法、MCP と CLI を介して AI エージェントを使い、チームのツール（Jira、Linear、Notion、Figma、GitHub）で進行ペースをどう実現するかを計画します。各フェーズ、確定ポイント、引き継ぎ仕様、ゲート定義、QA 検証ゲートの時間軸マップを提供します。`creative-brief`（静的なプロジェクトブリーフ）や `creative-direction`（美的方向性）とは異なります。インテグレーションオーケストレーター、デリバリーの進行ペース、プロジェクトのオーケストレーション、ブリーフを確定する時期、クリエイティブディレクションの段階分け、デザインから開発への引き継ぎ、QA ゲート、エージェント主導の QA、またはクリエイティブディレクション案件の開始時、進行中のペースの乱れ、PM ワークフローへの AI エージェント統合時に使用します。プロジェクトのスコープ策定には `creative-brief`、美的方向性には `creative-direction` を使用してください。クリエイティブディレクションを伴わない一般的なプロジェクト管理には使用しません。
Apple Design DNA のパターンを使い、アプリの領域を機能グループに対応付けた設計計画（exec-plan のような更新型ドキュメント）を作成します。各機能グループは、1 回の ios-taste セッションで構築可能なマイルストーンになります。ユーザーがアプリのアイデア、領域、ワークフローを説明し、構築前の体系的な計画を必要としている場合に使用します。「このアプリを計画して」「X に必要な機能は？」「設計計画」「機能の内訳」「必要な画面は？」などの依頼や、構築前の計画に関する質問が対象です。ワークフローのメモやユーザーインタビューの結果が提示された場合も使用します。重要：このスキルが作成するのは DESIGN-PLAN ドキュメントのみです。SwiftUI コード、レイアウト、ビジュアルデザインは生成しません。
アルゴリズムのパラメーター、アニメーション値、デザイントークン、レイアウト寸法など、テキストで表現しにくい値を調整できるよう、スライダー、ノブ、トグル、ライブプレビューを備えたHTMLプレイグラウンドを作成します。選択した値をClaude Codeに返せるよう、必ず Submit ボタン（`submitToClaude`を呼び出す）を含めてください。値の試行、動作の微調整、パラメーター空間の探索、連続範囲からの選択をユーザーが希望する場合に使用します。対象はデバウンス時間、色の値、イージング曲線、しきい値、レイアウト寸法など、調整可能なあらゆる値です。
短い JSON スペックから、45 種類（アーキテクチャ、フローチャート、シーケンス、ステート、ER、DB スキーマ、UML クラス、スイムレーン、タイムライン、ガント、ジャーニー、ツリー、組織図、ネスト、ベン、クアドラント、フィッシュボーン、ワードレイ、棒、折れ線、散布、サンキー、ツリーマップ、ヒートマップ、3D アイソメトリックオブジェクト、平面図、分解図）のアニメーション付きで探索可能なエディトリアル図をスタンドアロン HTML として作成する。ユーザーがシステム、コードベース、フロー、プロセス、API 呼び出しシーケンス、階層、データ、または物理的なオブジェクト（椅子）を描画・図解・グラフ化・可視化したいとき、Mermaid、Graphviz/DOT、PlantUML、D2、draw.io、Excalidraw、SQL、CSV をクリーンな図に変換したいとき、図を PNG、JPEG、SVG、GIF、MP4 としてエクスポートしたいときに使用。日常の計画（旅行、引っ越し、就職活動、承認、予算、お金の使い道）にも使用。
ユーザーのメッセージに「tailwind」がどのような形でも含まれる場合は必ず呼び出します。レスポンシブなグリッドレイアウト（複数列のカードグリッド、商品グリッド）、Flex／Grid のページ構成（サイドバー付きダッシュボード、固定トップバー、モバイル切り替えナビゲーション）、UI コンポーネント（カード、テーブル、ナビバー、料金セクション、フォーム、入力欄、バッジ）のスタイリング、ダークモードのバリアント追加、余白やタイポグラフィの修正、Tailwind v3/v4 の作業にも使用します。主な用途は HTML テンプレート（Blade、JSX、Vue）で Tailwind ユーティリティクラスを記述または修正することです。バックエンド PHP ロジック、データベースクエリ、API ルート、HTML/CSS コンポーネントを含まない JavaScript、CSS ファイルの監査、ビルドツール設定、通常の CSS は対象外です。
AI コーディングエージェント向けのデザインエンジニアリングスキルです。インターフェースの見た目、動き、使い心地に関する明確なルール、コーディング前に必須の調査フェーズ、分野別の参考資料、3 種類のスタイル（ミニマル、エディトリアル、高密度ダッシュボード）を備えています。中央配置のヒーローセクション、Inter のみのタイポグラフィ、3 列のカードグリッドなど、ありがちなパターンを検出する反凡庸アプローチを採用。上質な UI の審美眼、コンポーネントパターン、デザインエンジニアリングのワークフローを扱います。
AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。