Skills
エージェント向けにパッケージ化された専門スキルと手順を 97,222 件掲載。コマンド 1 行でインストールできます。
デザイン・UI
Mermaid 図と HTML ワイヤーフレームを使って、アプリのユーザーフロー、画面、ユースケースを設計・文書化する。ユーザーフロー図（フローチャート、状態遷移図、シーケンス図）、画面ワイヤーフレーム（HTML）、ユースケース文書、画面マップを作成するとき、またはユーザーが 'flows'、'wireframes'、'user journey'、'screen map'、'navigation flow'、'use cases'、'app flow'、'screen layout'、'flujos'、'pantallas'、'casos de uso' に言及したときに使用。プロダクト（PRD）フェーズとビジュアルデザインフェーズをつなぐ。出力は ui-ux-pro-max の入力として使用される。ユーザーが明示的に要求した場合は Figma へのエクスポートも可能。
設定/環境設定ページを設計または批評する — 多くのオプションを圧倒せずに整理し、保存モデル（自動保存か明示的な保存か、確認、元に戻す）を定める。常に当てはまる核（関連する設定のみ、使用頻度順のグループ、平易なラベル、現在の状態の可視化、破壊的操作は最後、明確な保存フィードバック）を適用し、文脈依存のレバー（自動保存か保存ボタンか、検索、詳細設定の分割、機微な変更の確認）をトレードオフとともに判断する。設定ページ、環境設定画面、アカウント設定、アプリ設定、保存/確認パターンの設計やレビューを求められたときにトリガー。
UX ライティングとインターフェースのコピー。ボイスやボタンラベルからエラーメッセージ、空の状態まで扱う。ユーザー向けのテキストを書いたりレビューしたりするときに使用する。ボタンやリンクのラベル、フォームのエラー、プレースホルダー、設定ラベル、オンボーディングのフロー、通知、空の状態など。UX writing、microcopy、インターフェースコピー、プロダクトコピー、コピーライティング、ボタンラベル、リンクテキスト、エラーメッセージ、空の状態、プレースホルダーテキスト、設定ラベル、大文字・小文字の使い分け、タイトルケース、センテンスケース、ボイスとトーンでトリガーされる。
Design for Hackers の視覚デザイン原則 — デザイン基盤システムの視覚・表層の中核。UI／フロントエンドの視覚デザインを構築・改善する場合に使用する：フォントの選定、カラーシステムの構築、独自のデザイン方向性やデザイン DNA の確立、デバイスクラス（スマートフォン、テレビ、スマートウォッチ、車載、キオスク、音声）向けの設計、デザインの監査、アニメーション／モーション／3D ライブラリの選定、出荷前の仕上げ。また、何かが「おかしい」または「しっくりこない」と感じる場合、デザインが凡庸または AI 生成に見える場合にも使用する。トリガー：フォント選び、カラーパレット、デザイン監査、視覚的階層、リデザイン、独自デザイン、10 フィート UI、デバイスレイアウト、モーション追加、どのアニメーションライブラリ、GSAP、three.js。対象外：グラフィックデザインツール（Figma/Sketch）、印刷、ロゴ、イラスト。また同階層の他の領域 — 操作性（ユーザビリティ）、UX ライティング（コンテンツデザイン）、チャート／データエンコーディング（データビズ）、ダークパターン（欺瞞的パターン）、ユーザーフローとジャーニーマップ（journey）、デザイントークン（design-systems）、エージェント／LLM インターフェース（ai-native）。
ユーザーの目標と認知原則に基づいた、直感的で意味のあるインタラクションを設計する。コンポーネントの挙動、ユーザーフロー、フィードバックシステム、エラー処理、ローディング状態、トランジション、アクセシビリティ、キーボードナビゲーション、タッチ/ジェスチャー操作の設計時、またはインタラクションの品質を評価するときに使用。モーダルと非モーダルの選択、直接操作パターン、入力デバイスの考慮、UX の感情的/演劇的側面、インターフェースを反応が良く、人間的で、目標志向に感じさせる方法について尋ねられた場合にも使用。
ホームページ、ランディングページ、料金ページ、機能ページ、ブログ記事など、あらゆるマーケティングページのコンバージョンを最適化、改善、向上したい場合に使用します。「CRO」「コンバージョン率最適化」「このページでコンバージョンしない」「コンバージョンを改善」「このページが機能しない理由」「ランディングページがひどい」「誰もコンバージョンしない」「コンバージョン率が低い」「直帰率が高すぎる」「登録せずに離脱する」「このページは改善が必要」などの発言がある場合も使用します。URL を共有してフィードバックを求めただけの場合でも使用してください。コンバージョン改善を求めている可能性があります。登録フローについては signup-flow-cro、登録後のアクティベーションについては onboarding-cro、登録以外のフォームについては form-cro、ポップアップ／モーダルについては popup-cro を参照してください。
LaTeX の表と図を出版品質に仕上げる。研究者が表の書式、booktabs、図のレイアウト、サブフィギュア、キャプション、色覚多様性に配慮した色やパレット、cref/cleveref の一貫性、overfull hbox、列幅に言及したとき、または表と図を学会（ACM、IEEE、NeurIPS、LNCS、CHI）向けにプロフェッショナルでカメラレディな見た目にしたいと依頼したときに使用する。横罫線と縦罫線の表を booktabs に変換し、ページ予算内で列幅を調整し、subcaption でサブフィギュアをレイアウトし、学会系統ごとのキャプション慣例（表のキャプションは上、図のキャプションは下、ACM Description の代替テキスト）を適用し、ref/cref の不一致を修正し、同梱の stdlib Python リンターとパレット生成器を用いて色覚多様性に配慮したパレット（Okabe-Ito、Paul Tol）を推奨する。変更するのは提示のみ——データ値、単位、結果は決して変更しない。
素早く書けるコードベースを保守しやすく保つ実践に従って Tailwind CSS を書きます — マジック値ではなくデザイントークンを使い、クラスリストを短く保ち、トークンを意味的にグループ化し、一貫した順序でクラスを生成し、繰り返しスタイルの抽出に @apply を避け、任意の className プロップではなく固定バリアントを使います。Tailwind のクラス、コンポーネント、設定を書いたり編集したりするとき、また既存の Tailwind プロジェクトをレビュー、クリーンアップ、リファクタリング、監査するときに使用します。Tailwind に関係しない一般的な CSS アーキテクチャや、CSS 出力に関係しないビルドツール（バンドラー、JS 圧縮など）には使用しないでください。
Tenzir デザインシステム：ブランドトークン（色、タイポグラフィ、余白、シャドウ、モーション）、設計原則と不変条件、公式ロゴ。Tenzir ブランドのあらゆるもののスタイリングに使用する：Web UI（shadcn/ui、Tailwind、プレーン CSS、その他のフロントエンドフレームワーク）、Quarto の文書とレポート、スライド、図（Mermaid、Graphviz）。ユーザーが Tenzir のブランドカラー、フォント、ロゴ、グラデーション、ダークモード、または出力を Tenzir 製品らしく見せる方法について尋ねたときにも使用する。
react-native-unistyles を v2 から v3 へ移行する。トリガー: "migrate unistyles"、"upgrade unistyles"、"v2 to v3"、"unistyles migration"、"update unistyles"、"convert unistyles v2"。StyleSheet.create、useStyles の削除、テーマ設定、variants、withUnistyles、Babel プラグインの設定、スタイル展開の修正、サードパーティコンポーネントのラップなど、すべての API 変更を網羅する。
Expo/React Native 向けに @weapp-tailwindcss/react-native 0.2.5 の Tailwind CSS 4 コンパイラ、Metro virtual module、Babel JSX transform、style manifest、tw runtime、dark/ios/android/native variants を設定する。Expo SDK 54+、React Native 0.81+、Metro、native className、Android/iOS style のコンパイルに使用する。uni-app App、ReactLynx、通常のミニプログラムビルドには使用しない。
高密度な Web アプリケーション UI の構築、リファクタリング、監査、検証を行う。SaaS ダッシュボード、管理画面、CRM 画面、社内ツール、テーブル、フィルター、設定フロー、データ量の多いワークフロー、空/読み込み/エラー状態、レスポンシブなアプリ画面、アクセシビリティ修正、あるいは階層・状態の網羅・キーボード操作・視覚的検証が重要なプロダクト UI の実装をユーザーが求めたときにこの skill を使用する。ランディングページには使用しない（タスクが実際にアプリの画面である場合を除く）。
AIエージェント向けのアーティファクトレイヤーです。artifact.cafeはAIエージェント向けのアーティファクトレイヤーです。インタラクティブな静的アーティファクト（HTMLアプリ、ダッシュボード、モックアップ、レポート、スライド、ドキュメント）をレビューURLに公開し、人間がログイン不要で開いて直接コメントできます。フィードバックは要素やテキストにピン留めできます。その後、作成者は新しい不変バージョンを公開します。「レビュー用に公開」「フィードバック用に共有」「コメントできるようオンラインに置く」「レビューを依頼」「プレビューを公開」「レビューリンクを作成」「アーティファクトを公開」「レビュアーに送る」「v2を公開」「投票を作成」「ゲストブック」「RSVP」「投稿を集める」と依頼された場合に使用します
このリポジトリで Figma デザインを Hydrogen + Weaverse ページとして再現する場合に使用——Figma ファイル、フレーム、フローを再利用可能な Weaverse セクションに変換する。トリガー：figma.com の URL、「build this design」、「implement this Figma」、「create the storefront from the design」。cloning-websites-to-weaverse の Figma 版。
GNOME Human Interface Guidelines に従い、美しくネイティブ感のあるデスクトップアプリケーションを作り上げる GTK (GTK4/GTK3) UI/UX スペシャリスト。GTK ウィジェットの構成、Libadwaita のテーマ設定、CSS スタイリング、アクセシブルなレイアウト、GtkListView、プロパティバインディング、イベントコントローラーといった最新の GTK4 機能を扱うときにこのスキルを使用する。Linux デスクトップアプリケーションのビジュアルデザインの判断、レイアウト構成、レスポンシブデザイン、テーマ対応スタイリングを担当する。
論文の草稿から学会発表スライド（Beamer または Marp markdown）を作成する——課題を最初に示す構成、1 スライド 1 主張、図は論文の LaTeX ソースからそのまま再利用、実際の枠に合わせた分量（12〜20 分のフル発表と 5 分のライトニング）。ユーザーがスライドの作成、採択済み論文のプレゼンや発表スライドの構築、論文のトーク化、学会発表の準備、発表を N 分に収める、長すぎる・文字が多すぎる既存スライドの確認と削減を求めた場合に使用。本文中の引用回数で論文の図を棚卸しし、セクションごとの分数とスライドの予算を計算し、スライドを起草し、ペース、内容があふれるスライド、欠落・描画不能な図、ありきたりで主張になっていないタイトルを機械的にチェックする。会場プロファイルは文脈のみを提供し、枠の長さは会場の登壇者向け案内または採択メールから取得する必要がある。
手続き型スプライト生成、React/TypeScript/Zustand アーキテクチャ、瞑想的なゲームデザインを備えたピクセルアートの放置/インクリメンタルゲームを構築するためのエキスパート skill。ピクセルアートゲームの作成、放置ゲームのメカニクスの実装、Canvas API による手続き型スプライトの生成、収集型ゲームの構築、インクリメンタルゲームの経済システムの実装時に使用する。ピクセルアート、放置ゲーム、スプライト生成、インクリメンタルゲーム、収集型ゲーム、瞑想的なゲーム体験のリクエストで起動する。
Inertia Rails Svelte（SvelteKit ではない）向けの shadcn-svelte（bits-ui）コンポーネント統合：フォーム、ダイアログ、テーブル、トースト、ダークモードなど。Inertia + Svelte アプリで shadcn-svelte コンポーネントを使って UI を構築するとき、または SvelteKit の shadcn-svelte の例を移植するときに使用します。name 属性と {#snippet} 構文で shadcn-svelte の入力を Inertia Form に接続します。フラッシュトーストには Rails の flash_keys イニシャライザ設定が必要です。
Shaders ライブラリの ImageTexture と CursorRipples コンポーネントを使い、既存の画像にカーソル追従型の流体 WebGPU 歪み効果を追加します。ヒーロー領域、ギャラリー、メディアパネルに水面の波紋のようなマウス効果を加える場合、漂う CSS スポットライトや懐中電灯のような表示効果を置き換える場合、または現在のブランド、画像、コピー、レイアウトを保ちながら Shaders.com の参考例からシェーダーのインタラクションのみを取り入れるようプロンプトで指定された場合に使用します。
プロジェクトが音声入力や音声コントロールをサポートする必要があるときにこのスキルを読み込みます — ディクテーション、"click by voice" 文法、Dragon NaturallySpeaking、Voice Control（iOS/macOS）、Voice Access（Android）、またはユーザーが音声でコントロールを操作するあらゆるインターフェース。いかなる場合も、可視ラベルをそのままの順序で保持せずに aria-label で上書きしないでください。アクセシブル名に可視ラベルが必ず含まれるようにし、音声ツールは通常キーボードとポインター入力をエミュレートするため keyboard/SKILL.md と併せて読み込んでください。
Splunk アプリまたはアドオンのために、認証要件に準拠した初回セットアップページを構築する。機密でない設定は configurations REST エンドポイントで収集し、機密情報は storage/passwords で収集し、app.conf/default.meta を正しく設定し、非推奨の setup.xml の仕組みを避ける。ユーザーが「Set up your app」画面、初回設定ウィザード、または Splunkbase アプリや TA のエンドポイント／認証情報／API トークンを収集する手段を求めたときに使用する。セットアップページ自体に関係しない一般的なアプリのパッケージング、互換性、アップグレード、削除のライフサイクル指針は app-and-add-on-lifecycle-advisor に、このアプリ自身の default.meta を超える広範なナレッジオブジェクトのガバナンスは knowledge-object-governance に回す。
クリーンで遊び心のある低密度の等角ボクセルアイコンイラストと、明示的に要求された 4 フレームの物理的に妥当なループを生成する。いずれも大きな不透明な面ライト付きアクリルブロックで構成し、背景は正確な #F4F4F4。既定では被写体の元のパレットを保持し、任意で明示的に選択された Oreo プリセット指向モードも使用可能。ボクセルアート、マクロボクセル 3D アイコン、等角のブロック造形オブジェクト、ボクセルアイコンのループアニメーションや GIF、ブロック調のエディトリアルシンボル、emoji からボクセル化したオブジェクト、視覚的に統一されたシリーズなどに使用。密なキューブグリッド、Minecraft シーン、滑らかなローポリレンダー、光沢のあるエッジライト玩具、透明ガラスオブジェクト、2D ピクセルアートよりも、孤立したオブジェクトにはこのスキルを優先する。
AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。