Skills
エージェント向けにパッケージ化された専門スキルと手順を 96,981 件掲載。コマンド 1 行でインストールできます。
デザイン・UI
Motion（旧称 Framer Motion）で React アニメーションを構築します。ジェスチャー（ドラッグ、ホバー、タップ）、スクロールエフェクト、スプリング物理、レイアウトアニメーション、SVG、終了アニメーション、モーション値に対応します。React アニメーションの構築、ホバー／タップ／ドラッグ操作の追加、スクロール連動エフェクト、レイアウト遷移、共有要素アニメーション、AnimatePresence による終了アニメーション、モーション値やスプリングの利用時に使用します。トリガー：「animate」「motion component」「framer motion」「gesture」「drag」「scroll animation」「layout animation」「exit animation」「spring」「whileHover」「whileTap」「whileInView」「AnimatePresence」「layoutId」「useScroll」「useSpring」「useAnimate」「motion value」「reorder」「parallax」。
axe-core + Playwright による WCAG 2.2 AA 準拠テスト、キーボードナビゲーション監査、スクリーンリーダーのテスト、ARIA パターンの検証、法的要件への準拠状況のマッピング（ADA、EAA、Section 508）を行います。自動化ツールで検出できる問題は 30～40% です。このスキルでは自動テストと手動テストを組み合わせます。次の場合に使用：「accessibility」「a11y」「WCAG」「screen reader」「axe」「keyboard navigation」「ARIA」「ADA compliance」。対象外：Cookie 同意/GDPR 準拠（compliance-testing を使用）、ピクセル差分によるビジュアル回帰テスト（visual-testing を使用）。関連：playwright-automation、compliance-testing、visual-testing、ci-cd-integration
すでに構築したビジュアルやインタラクションの手法を、再利用可能な Web デザインスキルに変換します。機能の核となる仕組みを切り分け、その焦点を中心に承認済みのリファレンスを正確に再現し、仕組みと視覚的な忠実度の両方を実証するデモを添えます。仕組みの特定、手法の明確な命名、検証済みランタイムとレンダラーの開示、リファレンスレイヤーの監査、形容詞ではなく具体的な数値の使用、所有するステージングの保持、コストのかかる注意点の記録、隣接するスキルとの境界の明示、動作を主張する前のブラウザー検証を扱います。ページ、Canvas シーン、シェーダー、スクロールエフェクト、レイアウトシステム、ホバーインタラクションがうまくでき、単一プロジェクトに留めずスキル化したい場合に使用します
Store Framework 向けに react/ 以下で VTEX IO storefront コンポーネントを構築する際に使用します。storefront コンポーネントの構造、css-handles、storefront context hooks、ブラウザーで安全なデータ取得、テーマブロックとして使用する際のコンポーネントの動作を扱います。カスタム storefront UI、製品ウィジェット、バナー、フォーム、または VTEX IO アプリの購入者向け React コードのレビューに使用します。
Remotion（React ベースの動画）を使って、プロrots各级のモーショングラフィックス動画を作成・編集します。動画の作成、編集、アニメーション作成、イントロ・アウトロ・ロゴアニメーションの作成、Reel/Short/プロモーション/公開動画の制作、素材へのテキストアニメーションや字幕の追加、画像や B-roll の動画への合成、Remotion・モーショングラフィックス・動画レンダリングへの言及、「この動画をもっと良く/ありきたりしないceuして」の要望があるたびに必ずこのスキルを使ってください。既存の Remotion プロジェクトを編集する場合や、動画がenis基础上素朴・ありきたり・初心国道に見えるという不満をssssった場合も発動します。このスキルにはそのPidiance There's the exact fixes. Remotion のコードを記述する前に、必ずこのスキルを読んでください。
コードから高品質なシネマティックモーションデザインを企画、制作、レンダリングします。ローンチ映像、製品・機能動画、ランディングページやソーシャル向けのループアニメーション、ロゴの短い演出や登場演出、UI ウォークスルー、アプリデモ、キネティックタイポグラフィ、ティーザー、予告編、イントロ、プロモーション動画を制作します。Remotion、HyperFrames、HTML/GSAP、React を使った動画、アニメーション、モーショングラフィックス、アニメーションデモの制作や、絵コンテ、タイミング、音楽、レンダリング、仕上げ、批評を求める場合に使用します。「X についての動画を作って」「この機能をアニメーションにして」「ローンチ動画が必要」といった依頼にも対応します。コンセプトとコピーの規律、提供されたブランドに合わせる書体と色のセンス、映像とコード生成サウンドトラックを駆動するビート同期タイムライン、演出とトランジション、実際の製品 UI の動き、映画品質の仕上げ（正確なモーションブラー、バンディングなし、BT.709、同期確認済みの多重化）を提供し、コンタクトシートとレンダリングを用いた節度ある自己批評の反復を行います。
visual-style.md ファイルを使って、ポータブルなビジュアルデザインシステムを作成、抽出、適用します。次の場合に使用します：（1）visual-style.md デザインシステムをゼロから作成する。（2）ウェブサイトの URL、動画、PDF ブランドガイドからビジュアルスタイルを抽出する。（3）HeyGen 動画、HTML スライド、Figma、paper.design にビジュアルスタイルを適用する。（4）既成のビジュアルスタイルギャラリー（Swiss、Saul Bass、Game Boy など）を閲覧する。（5）ユーザーが「visual style」「design system」「brand style」「style guide」に言及する。（6）一貫したデザイン言語で HeyGen 動画をスタイリングする。
参考にしたいリファレンスを、自分のトピックとブランド向けのシーンごとの Claude Motion プロンプトに変換する。動きを抽出するための動画（スクリーンショット、フレーム、またはリールや広告のコンタクトシート）を受け取り、任意でスタイルのためのルックのリファレンス（ウェブサイト、ブランド、ムードボード）を受け取る。誰かが "make me something like this"、"break down this reference"、"use my website as the look"、"turn this into a Motion prompt" と言った場合に使用する。短い分解を出力し、続いてすべてのシーンのタイミング付きでそのまま貼り付けられる Motion プロンプトを 1 つ出力する。
リクエストに明確なWindows Formsのマーカーが含まれる場合に限り、Windows Formsアプリケーションの作成、変更、デバッグ、レビューを行います。対象：WinForms、Windows Forms、System.Windows.Forms、WinForms FormまたはUserControlのデザイナーファイル（*.Designer.csまたは*.Designer.vb）、Visual Studio WinForms Designer、TableLayoutPanel、BindingSource、DataGridView、Control.InvokeAsync、コンポーネントトレイの所有権、カスタムコントロールのシリアル化。対象外：Window.InputBindings、KeyBinding、commands、DataContextを含むWPFまたはWPF XAML、.NET MAUI、Avalonia、または上記のWindows Formsマーカーがないリクエスト。
学術的な場面のプレゼンテーションの作成または改善をユーザーが希望する場合は、必ずこのスキルを使用します。学会発表、セミナー、論文審査、研究助成の説明、研究室ミーティング、招待講演など、聴衆が論理や証拠を評価するあらゆるプレゼンテーションが対象です。「conference talk」「seminar slides」「thesis defense」「research presentation」「academic deck」「academic presentation」などがトリガーになります。学術的な内容と組み合わせて「スライドを作って」と依頼された場合も対象です（例：「X に関する論文のスライドを作る」「博士論文の審査用プレゼンを作る」「研究助成の提案書用デッキを作る」）。このスキルは内容と構成に関する判断を担います。.pptx ファイル自体の作成・編集などの技術作業では、pptx SKILL.md も参照してください。
assistant-ui の要素（elements）をインストールしカスタマイズする。`npx assistant-ui@latest add <item>` 経由で r.assistant-ui.com レジストリから配信される shadcn スタイルのコンポーネントカタログである。事前構築済みのチャットサーフェスやウィジェット（Thread、ThreadList、AssistantModal、AssistantSidebar、ToolFallback、ToolGroup、MarkdownText、Reasoning、Sources、Attachment、ModelSelector、Voice orb、McpConfig）、または 120 のスタンドアロン要素（approval card、agent plan、code diff、data table、chart など）を追加するとき、ランタイム接続型の `<name>.aui.tsx` ファイルと props 駆動のスタンドアロンファイルのどちらを選ぶとき、`components` prop で Thread のスロットを上書きするとき、複製されたソース `components/assistant-ui/elements/` を編集するとき、`components.json` で Radix と Base UI のどちらのフレーバーを選ぶときに使う。`@/components/assistant-ui/...` からの import が失敗した、要素がスタイルなしで表示される、CLI が誤ったフレーバーをインストールした、という場合はこちらを使う。スタイルなしのビルディングブロックには primitives を、CLI のスキャフォールド自体には setup を使う。
ui.inference.sh の React/Next.js 向けバッテリー同梱のエージェントコンポーネント。ランタイム、ツール、ストリーミング、承認、ウィジェットを 1 つのコンポーネントに内蔵。機能：ドロップインのエージェント、human-in-the-loop、クライアント側ツール、フォーム入力。用途：AI チャットインターフェース、Agentic UI、SaaS コパイロット、アシスタントの構築。トリガー：agent component、agent ui、chat agent、shadcn agent、react agent、agentic ui、ai assistant ui、copilot ui、inference ui、human in the loop。
index.how/to/articulate で使われる、デザインと UI の正確な用語集です。タイポグラフィ、色、アイコン、レイアウト、インタラクション、モーション、アクセシビリティ、情報アーキテクチャ、コピーライティング、ツール、分析、コンポーネントを扱います。デザイン概念の正確な語（「特定の 2 文字の間の空間は何と呼ぶ？」）を探すとき、曖昧に説明された UI のアイデアに適切な名前を付けるとき、混同しやすい類義語（バッジとタグ、ツールチップとポップオーバー、不透明度と可視性、カーニングとトラッキング）を選ぶとき、またはコピー、仕様、コミットを作成・レビューする際に曖昧な表現ではなく正確な用語を使いたいときに使用します。
@capacitor/splash-screenと@capacitor/assetsを使ったCapacitorアプリの起動画面の設定とデバッグに対応します。`launchAutoHide`、`SplashScreen.hide()`、`launchFadeOutDuration`（Capacitor 9ではAndroidのデフォルトが200から0に変更）、Android 12以降のSplashScreen APIテーマ（`Theme.SplashScreen`、`windowSplashScreenAnimatedIcon`）、iOSの`LaunchScreen.storyboard` + `Splash.imageset`、Capacitor 8.5のUIScene/SceneDelegateの影響（ウィンドウがコードで作成され、Main.storyboardがルートビューコントローラーを提供しなくなる）を扱います。起動時の白または黒のちらつき、起動画面が消えない、Android 12のアイコンが切れる・小さすぎる、ダークモードの起動画面、アイコンや起動画面アセットの再生成に使用します。ステータスバー/ナビゲーションバーの色やインセット（safe-area-handling）、UIScene移行自体（capacitor-uiscene-migration）、起動パフォーマンスのプロファイリング（capacitor-performance）には使用しないでください。
既存の Web サイトまたはスクリーンショットから完全なデザインシステムを抽出し、DESIGN.md ファイルにまとめます。ブラウザーの自動化と HTML の検査を通じて、色、タイポグラフィ、コンポーネントのスタイル、余白、雰囲気を分析します。一貫したページ生成に最適化された、意味的なデザインシステム文書を作成します。トリガー：「extract design system」「design system」「create DESIGN.md」「analyse the design」「what design does this site use」「extract styles from」「reverse engineer the design」。
AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。