Skills
エージェント向けにパッケージ化された専門スキルと手順を 97,222 件掲載。コマンド 1 行でインストールできます。
デザイン・UI
Aura Topbar（@aura/topbar）をDune/Fusionアプリに組み込み、唯一のトップナビゲーションバーとして使用します。パンくずリスト、任意で中央に配置するTabsまたはSegmented control、右側のユーティリティ領域（Share、通知、テーマメニュー、Atlas、ユーザーAvatar）、ライト／ダークテーマの切り替えを備えます。DuneまたはFusionアプリにトップバー、アプリヘッダー、ナビゲーションバー、パンくずリスト、テーマ切り替えを追加するとき、または新しいDune/Fusionアプリを構築するときに使用します。
ロゴ、カラーパレット、タイポグラフィシステム、ブランドガイドライン文書など、一貫性のあるブランドアイデンティティを作成します。バリエーション付きのSVGロゴコンポーネントを生成し、Tailwindのカラートークンを設定し、文字サイズのスケールを構築して、ソーシャルメディアや名刺のテンプレートを作成します。ロゴのデザイン、カラーパレットの作成、タイポグラフィシステムの設定、ブランドガイドラインの作成、ソーシャルメディアテンプレートの生成、ブランド素材ファイルの整理に使用します。ブランディング、ビジュアルアイデンティティ、ロゴデザイン、ブランドガイドライン、カラーシステムに使用します
ローカルの HTML またはプロジェクトファイルを Figma にインポートまたはアップロードし、編集可能な Design フレーム、実行可能な Code Layers、またはスタンドアロンの Code（Make とも呼ばれます）を選択して、インポートしたプレビューを修復します。編集可能な Design レイヤー、実行可能な Code Layer、スタンドアロンの Code/Make ファイルをユーザーが明示した場合、またはインポート先として Figma ファイルの key/link を提示した場合に限り使用します。一般的なコードやコードコンポーネントの依頼では、このワークフローを使う前に出力内容を確認してください。
Figma MCP ワークフロー（デザインコンテキスト、スクリーンショット、アセット、プロジェクト規約への変換）を使い、Figma ノードを視覚的に 1:1 で一致する本番対応コードに変換します。ユーザーが Figma URL またはノード ID を提示し、Figma の仕様に一致するデザインやコンポーネントの実装を求める場合に使用します。動作する Figma MCP サーバー接続が必要です。一般的な Figma データ取得、変数の探索、MCP のトラブルシューティングには使用しないでください（代わりに figma を使用）。
Hotwire のフォームワークフロー（フォーム送信のライフサイクル、インライン編集、検証エラー、入力補完／オートコンプリート、モーダルフォーム、外部フォームコントロール）を扱います。中心的な課題がフォーム操作の正確性と UX の場合に、このスキルを優先してください。ページネーション／タブ／フィルターナビゲーションには hwc-navigation-content、WebSocket/Turbo Stream のブロードキャストには hwc-realtime-streaming、画像／動画／音声の動作には hwc-media-content、一般的な読み込み／トランジションの調整には hwc-ux-feedback、フォームに関連しないフレームワークレベルの Stimulus API には hwc-stimulus-fundamentals を使用してください。
汎用 PPT 生成スキル。ユーザーが指定した任意の PPT テンプレートと、提供されたテキスト・画像素材（文書、画像など）を組み合わせ、一貫したスタイルのプレゼンテーションを自動生成します。テンプレート構造の自動分析、背景画像／背景色の抽出、配色とフォント仕様の解析に対応し、素材に基づいて PPT 全体を作成します。棒グラフ、折れ線グラフ、円グラフ、レーダーチャートなど、さまざまな種類のグラフによるデータ可視化に対応します。キーワード：PPT 生成、テンプレート分析、プレゼンテーション、スライド、テキストと画像のレイアウト、自動化、グラフ、データ可視化。
Arco Design React UI コンポーネントライブラリのリファレンス（@arco-design/web-react）です。ページ構築、UI 作成、フロントエンドコードの記述、Web アプリ開発、ダッシュボード設計、React インターフェースの実装を依頼された場合に使用します。特に Arco、arco-design、@arco-design/web-react、または Arco コンポーネント名（Button、Table、Form、Modal、Select、Menu など）が挙がった場合に適しています。全 70 コンポーネントの完全な API、コード例、インポート方法、テーマ設定、i18n、レイアウト、フォーム、テーブル、モーダル、ナビゲーション、データ入力、データ表示、フィードバック、レスポンシブデザイン、ベストプラクティスを網羅します。
Bagisto Admin API 上で管理アプリや UI を構築する際に使用します。バックオフィスダッシュボード、注文、カタログ、顧客、マーケティング、CMS、設定の管理画面、管理用モバイルアプリ、Create-Order フロー、API 上の管理パネルページが対象です。まずクライアントのプラットフォームと技術スタックを確認し、正確なデータ形式の正とする情報源として api-docs を扱ってください。トリガーとなる語句には「admin orders」「admin products」「customers」「cart rules」「CMS」「settings」「reporting」「admin panel on the API」があります。
ブランド DNA スタイル抽出のアトミックスキル。商品画像とユーザーのブランド DNA パラメーター（メインカラー、フォント、プラットフォーム、地域、言語）に基づき、統一されたブランドビジュアル言語（Brand DNA）を抽出し、後続のアトミックスキルが利用する構造化データ brandGeneJson を出力します。ブランド DNA 抽出、brand gene extract、brand DNA、ブランドビジュアルの定義、ブランドトーン抽出、brand style extraction、visual identity extraction。画像セットのオーケストレーションレイヤー（linkfox-aigc-imagegen-cloth / product 画像セットのオーケストレーション経路）がステップ三で呼び出します。ユーザーが「ブランド DNA を抽出」「ブランドスタイルを定義」「brand gene」「ブランドビジュアル」と言った場合に起動します。
任意のテーマ、文章、記事のアイデア、物体、参照写真から、オリジナルの単色または制御された2色のエディトリアル画像を生成します。ユーザーが単色ポスター、2色印刷、単色調のビジュアル、青／緑の謄写版印刷、risograph、網点写真、レトロまたは現代的なエディトリアルレイアウト、zine poster、monochrome editorial poster、duotone printを求める場合、またはmono-colorスタイルの使用を求める場合は、必ずこのスキルを使用します。白、グレー、淡いベージュの基材を状況に応じて使い、印刷インクは最大2色に抑え、ネガティブスペースを効果的に使い、簡潔で自然な言葉と力強いセリフ体／グロテスク体／等幅フォントを用います。レトロ調を既定にせず、元の構図、文言、ロゴ、作品を模倣しません。ユーザーがプロンプトのみを明示的に求めた場合を除き、最終的な生成プロンプトと生成したラスター画像の両方を作成します。
ObjectStack UI メタデータを作成します。Views（list/form/kanban/calendar/gantt）、Apps（ナビゲーション）、Pages（構造化ページ、および HTML と React のソース作成レイヤー、ADR-0080/0081）、Dashboards、Reports、Charts、Actions、パッケージ Docs（`src/docs/*.md`）が対象です。ユーザーが `*.view.ts` / `*.page.ts` / `*.app.ts` / `*.dashboard.ts` / `*.report.ts` / `*.dataset.ts` / `*.action.ts` / `src/docs/*.md` ファイルを追加する場合、または Studio で描画される UI を設計する場合に使用します。次の場合は使用しないでください：データスキーマ（objectstack-data を参照）、ステップ間のロジックに応じて分岐する複数ステップのフロー（これらは `type: 'screen'` の `*.flow.ts` です。objectstack-automation を参照。単一オブジェクトのステップ形式フォームは、このスキルの `formViews` の `type: 'wizard'` です）、または Studio 自体の管理 UI（プラットフォームに含まれます）。表示条件ルールの CEL 式には、objectstack-formula も読み込んでください。
HTML/CSS と Chrome DevTools のスクリーンショットを使い、タイポグラフィを中心とした動画カバー画像をデザインします。必要なすべてのアスペクト比（16:9（YouTube）、16:10（Bilibili）、9:16、3:4（抖音／视频号の縦型ショート動画））で、大きく読みやすい文字を使ったカバーを生成します。AI 手描き風の `cover-image` とは異なり、コードでタイポグラフィを精密に制御します。ユーザーが「视频封面」「thumbnail」「做封面」「cover design」「缩略图」「横屏/竖屏封面」「抖音封面」「视频号封面」を依頼した場合に使用します
UnbounceとOli Gardnerの実証済みフレームワークを用いて、コンバージョン最大化に向けてランディングページを最適化します。「1つの目標、1つのメッセージ、1つのアクション」の原則を、データに基づくデザイン、コピー、CTAのベストプラクティスとともに適用します。次の場合に使用します。キャンペーン用の**新しいランディングページを作成**する。コンバージョンにつながらない既存ページを**最適化**する。公開前に**デザインをレビュー**する。リード獲得ページの**フォームコンバージョン率を改善**する。ランディングページの要素を体系的に**A/Bテスト**する。
AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。