Skills
エージェント向けにパッケージ化された専門スキルと手順を 96,981 件掲載。コマンド 1 行でインストールできます。
デザイン・UI
VTEX IO のストアフロントテーマアプリの設計または変更時に使用します。このアプリは `store/blocks.json`、`store/routes.json`、`store/templates/`、`store/contentSchemas.json`、および `store.home`、`store.product`、`store.search`、`store.custom` などのネイティブページテンプレートから組み立てられるストアフロントのページツリーを管理します。テーマアプリがベーステーマを拡張する方法、ルートを宣言する方法、ページ横断でブロックを構成する方法、その `store/` ファイルと espirit merchant の Site Editor コンテンツとの関係 toughest。テーマのスキャフォールド、カスタムページルート、テーマレベルのオーバーライド、変更がテーマアプリ・コンポーネントアプリ・アプリ設定のどこに属するかのレビューで使用します。
証拠のみに基づき、Awwwards の審査員のようにウェブサイトを評価します。デスクトップ、速度制限したスマートフォン、モーション低減設定で各ページ種別のスクリーンショットを撮影し、LCP、CLS、FPS、axe、キーボードフォーカス、ホバー時の反応を測定し、SEO とメタデータを監査します。その後、コードを一切見ていない新たな批評者が、デザイン、ユーザビリティ、創造性、コンテンツ、6 つの開発者領域を評価し、優先順位付きの修正リストを作成します。ウェブサイト、ポートフォリオ、ランディングページのレビュー、批評、採点、評価、酷評を求められた場合、Awwwards や Site of the Day にふさわしいか尋ねられた場合、または公開 URL やローカルビルドのデザイン QA を求められた場合に使用します。サイトの構築や再設計には使用せず、その場合は /awwwards を使用してください。
コーディングエージェントが汎用的な UI を出荷するのを止める。UIZZE の 80 万以上の実際のウェブおよび iOS 画面を活用し、製品固有のインターフェースを構築し、設計契約（design contract）を定義し、必要な状態をカバーし、厳格な仕上げゲートを実行する。Codex、Claude Code、Cursor、Copilot などのコーディングエージェントで、ウェブや iOS のインターフェースを設計・実装・再設計・レビュー・出荷前に確認するときに使う。「anti-ui-slop」「stop UI slop」「ground this UI in real screens」「run the UI finish gate」で発動する。
ui.inference.sh による React/Next.js 向けの JSON ベースの宣言的 UI ウィジェット。構造化されたエージェント応答からリッチでインタラクティブな UI をレンダリング。機能：フォーム、ボタン、カード、レイアウト、入力、セレクト、チェックボックス。用途：エージェントが生成する UI、動的フォーム、データ表示、インタラクティブなカード。トリガー：widgets、declarative ui、json ui、widget renderer、agent widgets、dynamic ui、form widgets、card widgets、shadcn widgets、structured output ui
自然で意図の伝わるWebアニメーションを設計・実装します。ユーザーがアニメーション、動き、イージング、タイミング、時間、スプリング、トランジション、アニメーション性能について質問した際は、積極的に使用します。特定のUI要素のアニメーション方法、イージングの選び方、アニメーションのベストプラクティス、動きに関するアクセシビリティ上の配慮についての質問も対象です。次の語句で起動します：easing、ease-out、ease-in、ease-in-out、cubic-bezier、bounce、spring physics、keyframes、transform、opacity、fade、slide、scale、hover effects、microinteractions、Framer Motion、React Spring、GSAP、CSS transitions、entrance/exit animations、page transitions、stagger、will-change、GPU acceleration、prefers-reduced-motion、modal/dropdown/tooltip/popover/drawer animations、gesture animations、drag interactions、button press feel、feels janky、make it smooth。
ui.inference.sh が提供する React/Next.js 向けツールライフサイクル UI コンポーネント。ツール呼び出しを表示：保留中、進行中、承認必要、結果。機能：ツールステータス、進捗インジケーター、承認フロー、結果表示。用途：エージェントのツール呼び出しの表示、ヒューマン・イン・ザ・ループの承認、ツール出力。トリガー：tool ui、tool calls、tool status、tool approval、tool results、agent tools、mcp tools ui、function calling ui、tool lifecycle、tool pending
ジャンル固有の慣習、タイポグラフィのルール、AI 画像生成を踏まえた書籍カバー（表紙）デザイン。フィクションとノンフィクションのジャンル、サイズ、サムネイルテスト、反復ワークフローを扱う。用途: 自費出版、電子書籍カバー、印刷カバー、オーディオブックカバー、カバーモックアップ。トリガー: book cover、cover design、ebook cover、book art、novel cover、self publishing cover、kindle cover、audiobook cover、book jacket、cover illustration、fiction cover、nonfiction cover
@capacitor/keyboard を使って Capacitor アプリの画面キーボードの動作を修正します。iOS の `resize` モード（デフォルトの `native`、`body`、`ionic`、`none`）、`keyboardWillShow`/`keyboardDidShow` の高さ、`setAccessoryBarVisible`、`setScroll`、`style`（`DARK`/`LIGHT`/`DEFAULT`）、`autoBackdropColor`（8.0.4+）、Android の edge-to-edge/SystemBars との連携（Capacitor 8 では旧式の `resizeOnFullScreen` を削除）、iOS 26 の修正、iOS 入力時の自動ズームに対応します。入力欄がキーボードに隠れる、WebView が跳ねる／キーボード上に白または黒の隙間ができる、固定フッターが画面中央に浮く、`vh` レイアウトが縮む、キーボードイベントが発火しない場合に使用します。一般的なセーフエリア／ノッチの余白（safe-area-handling）、Ionic コンポーネントのスタイリング（ionic-design）、フォームのアクセシビリティ（capacitor-accessibility）には使用しないでください。
投資家向けピッチデッキの構成、スライドごとのフレームワーク、ビジュアルデザインのルール、データの提示方法を扱います。12 枚のフレームワーク、グラフの種類、チーム紹介スライド、投資家に敬遠されがちな要素を取り上げます。用途：資金調達デッキ、投資家向けプレゼン、スタートアップのピッチ、デモデー、助成金の提案書。トリガー：ピッチデッキ、投資家向けデッキ、スタートアップのピッチ、資金調達デッキ、デモデー、ピッチプレゼン、投資家向けプレゼン、シードデッキ、シリーズ A デッキ、ピッチスライド、スタートアップのプレゼン、VC ピッチ、投資家とのミーティング
レイアウトパターン、件名の公式、配信到達性のルールを備えたメールマーケティングのデザイン。ウェルカムシーケンス、プロモーションメール、トランザクションメールのテンプレート、モバイル最適化を扱います。用途：メールマーケティング、ニュースレターのデザイン、ドリップキャンペーン、メールテンプレート、トランザクションメール。トリガー：email design、email template、email marketing、newsletter design、email layout、email campaign、drip campaign、welcome email、promotional email、transactional email、email subject line、email header image、email banner。
バトンを渡すループを使って複数ページのサイトを自律的に構築します。各反復で .design/next-prompt.md からタスクを読み込み、HTML/Tailwind でページを生成してサイトに統合し、見た目を検証した後、ループを継続するため次のタスクを書き込みます。ユーザーがサイト全体の自律構築、全ページの作成、複数ページの連続生成、「design loop」／「baton loop」／「autonomous site build」の実行を求めた場合に使用します。途中で「続けて」「次のページを作って」「次のページ」と言った場合も対象です。
構築済みソリューションの最後の20%を見つけて仕上げます。エージェントが見落としがちな体験面、つまり出力の実際の読み心地、必要なページや画面、初回起動時と空の状態、明確なデフォルト、理想的な利用経路を扱います。構築を計画する際、体験上の魅力を基盤部分と同じ具体性で仕様化するために使用します。また、構築を「完了」とする前、動作はするもののデモのように感じられる場合、またはユーザーが "last 20%"、"finish this"、"make it actually good"、"is this actually done"、"why does this feel flat" と言った場合に使用します。
ウェブサイトの複製／クローン手法。ユーザーがウェブサイトの複製やクローン、サイトの模倣、このサイトを基にした制作、サイトの再現、ウェブページの効果の再現、サイトをダウンロードして改変すること、またはインタラクション／WebGL／Canvas／Three.js の効果の複製を求めた場合に使用します。「まず実際のソースを取得 → 方針を判断 → リバースエンジニアリングして分解 → プロジェクトを構築 → コンテンツを差し替え」という移植可能な判断ツリーを提供します。静的サイト、React/Vue/Next コンテンツサイト、WebGL-Canvas を多用するフロントエンドサイトの 3 分岐を網羅し、AI による二次分析に含まれる実行可能コードの確認を必須とします。
md/html/docx/pdf/epub の多方向パイプラインで、「md で制作し、複数の形式で利用」を実現します。機能：あらゆるファイル（PDF/DOCX/PPTX/XLSX/画像/音声/URL）をクリーンな md に変換し、md を出版品質の html、docx、PDF（A4/A5/大32開）、EPUB3 に変換します。厳選テンプレートを 4 種類用意。html と PDF には、AI が内容を理解して差別化された 3 つのビジュアル案を提案するデザイナーモードもあります。SKIP：新しい画像の生成が必要なタスク、またはスクリーンショットの圧縮のみを行うタスク。
Open Graph とソーシャル共有画像のデザイン。プラットフォームの仕様、テキスト配置、ブランディングを扱います。OG meta タグ、Twitter カード、LinkedIn プレビュー、動的生成をカバーします。用途：ソーシャル共有画像、ブログのサムネイル、リンクプレビュー、ソーシャルカード。トリガー：og image、open graph、social sharing image、twitter card、social card、link preview image、og meta、sharing preview、social thumbnail、meta image、og:image、twitter:image、linkedin preview。
Skyline のカスタムルーティングとページ遷移スキル。カスタムルートアニメーション（routeBuilder）、プリセットルート（7 種類の wx:// タイプ）、ページの戻るジェスチャー、コンテナ遷移アニメーション（open-container）、Router API を扱います。半画面ダイアログ、ページのズーム、下部からのポップアップ、カード展開などの遷移効果の実装に適しています。トリガーキーワード：カスタムルーティング、custom-route、routeBuilder、navigateTo、ページ遷移、半画面、プリセットルート、戻るジェスチャー、open-container
適切な_blueprint、スタイルフック、ユーティリティクラス、アイコンを用いて SLDS 準拠の UI を適用します。SLDS が必要な UI の構築、Lightning Base Components と SLDS Blueprints の選択、テーマ設定用のスタイルフックの適用、レイアウトとスペーシングのためのユーティリティクラスの使用、アイコンの選択時に使用します。「モーダルを作成」「フォームを作成」「データテーブル」「SLDS スタイル」「フックでスタイルを設定」「アイコンを追加」などがトリガーです。
@assistant-ui/react-ink と @assistant-ui/react-ink-markdown を使ってターミナルチャット UI を構築する。`create --ink` の雛形作成、`useChatRuntime` の周囲への `AssistantRuntimeProvider` のマウント、`ThreadPrimitive`、`ComposerPrimitive`、`MessagePrimitive`、`LoadingPrimitive`、`TextInput`、スレッド履歴、添付、通知、ターミナルのキーボード操作の構成、あるいはチャットに書記素単位で安全な編集、複数行表示カラム、絶対パスのバックエンド URL、ローカルファイルストレージ、カスタム `RemoteThreadListAdapter` が必要なときに使う。ターミナルの markdown、ツール出力、メッセージ描画、Ink のフォーカス問題はここに回す。ブラウザアプリの設定、Web 要素、標準の Web runtime については [setup](../setup/SKILL.md) を使う。
HyperFrames のアニメーション知識一式 — アトミックなモーション ルール、マルチフェーズのシーン ブループリント、シーン トランジション、より広いモーション デザイン技法、そして 7 つのランタイム アダプター(デフォルトは GSAP、加えて Lottie、Three.js、Anime.js、CSS keyframes、Web Animations API、TypeGPU)。あらゆるモーションやアニメーションのタスクに使用します:2〜4 のルールを選んで組み合わせる、ブループリントを読み込む、ランタイム固有の API を調べる(例:GSAP のイージング / Lottie プレイヤー / Three.js ミキサー)。HyperFrames ネイティブ:単一ポーズ済みタイムライン、シーク可能、決定論的。
修復のみ。ベースラインの作成、編集、検証というループにより、WCAG 2.2 に従ってウェブアクセシビリティ（a11y）の違反を修正します。対象（URL、ファイル、ディレクトリ）または `accessibility-scan`／`accessibility-inspect`／`accessibility-audit` の指摘事項リストを受け取り、指定された機械的な修正を適用し、視覚的または文脈上の判断が必要な箇所は TODO として残し、ベースラインチェックの再実行で検証します。修正のみを行います。問題の検出には `accessibility-scan`（1 ページ、自動）、`accessibility-inspect`（1 ページ、手動）、`accessibility-audit`（サイト全体、WCAG-EM）を使用してください。回帰の確認には `accessibility-diff` を使用します。「X の a11y 問題を修正して」「これをアクセシブルにして」「欠けている代替テキストとラベルを追加して」「これらのアクセシビリティ修正を適用して」「これらの違反を修復して」などで使用します。
120点満点のスコアリングによる OmniStudio OmniScript の作成と検証。ガイド付きデジタル体験、複数ステップのフォーム、Integration Procedures と Data Mappers を連携させるインタラクティブなプロセスの構築に使用します。次の場合に起動：ユーザーが OmniScripts を作成する、ステップフローを設計する、要素タイプを設定する、既存の OmniScript 設定を確認する。次の場合は起動しない：FlexCards の構築（sf-industry-commoncore-flexcard を使用）、Integration Procedures の直接作成（sf-industry-commoncore-integration-procedure を使用）、依存関係の分析（sf-industry-commoncore-omnistudio-analyze を使用）
Lightning Web ComponentsのSLDS準拠を監査し、スコア付き品質レポートを作成します。SLDS linterを実行し、CSSのテーマフックの使用状況と組み合わせを分析し、HTMLのアクセシビリティ属性を確認して、カテゴリ別の指摘を採点し総合評価を算出します。「コンポーネントを採点して」「SLDSスコアカード」「品質レポート」「SLDS準拠を監査して」「自分のSLDSの出来はどう？」「コンポーネントの品質を確認して」「コンポーネントを評価して」「このコンポーネントは出荷可能？」「LWCの問題を見て」「提出前に監査して」「コードレビュー前に確認して」など、LWCまたはSLDSコンポーネントの品質評価や本番投入準備の確認を求められた場合に使用します。違反の修正（uplifting-components-to-slds2を使用）や新規コンポーネントの作成（applying-sldsを使用）には使用しません。
AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。