Skills
エージェント向けにパッケージ化された専門スキルと手順を 96,981 件掲載。コマンド 1 行でインストールできます。
デザイン・UI
React Native アプリ向けの React Native Reanimated アニメーションコードを生成する。React Native でアニメーションの作成、実装、追加を求められたときに使う。トランジション、ジェスチャー、スクロール連動エフェクト、レイアウトアニメーション、レイアウトトランジション、エンター／エグジットアニメーション、CSS アニメーション、CSS トランジション、共有要素トランジション、色アニメーション、パララックス、フェード、スライド、スケール、バネ、タイミング、減衰、キーフレーム、worklet、アコーディオン、ボトムシート、フリップカード、コラプシブルヘッダー、および react-native-reanimated によるその他のモーションエフェクトが含まれる。react-native-gesture-handler と Reanimated の統合、worklet の理解、画面間のアニメーション、Jest によるアニメーションのテスト、アニメーション可能なプロパティの確認にも使う。
Webflow Designer でページ、要素、コンポーネント、スタイルを構築・管理します。セクションの追加、レイアウトの作成、要素の構築、コンポーネントの検査や更新、コンポーネント内部の表示、ページの再構成、新規ページの作成、ページ構造のプレビュー、要素へのスタイル設定、コンポーネントプロパティの管理で使用します。構築・スタイル設定・検査は明示的なページ ID を指定してヘッドレスで実行でき、Designer への接続は不要です。Designer は `designer_tool` のアクション（キャンバスで開いているページの読み取り／切り替え、要素の対話形式での選択、ページフォルダの作成、コンポーネントのキャンバスビューを開く）と `element_snapshot_tool` の視覚プレビューに必要です。
Konsta UI v5 を使って Capacitor アプリの UI を構築します（Tailwind CSS v4 ベースの iOS と Material コンポーネント、React 19／Vue 3／Svelte 5 対応）。CSS ファーストのセットアップ（`@import 'tailwindcss'; @import 'konsta/react/theme.css';`）、`@theme` の `--color-brand-*` カラー、`<App theme="ios|material|parent" safeAreas dark>`、Ionic と併用する場合の `KonstaProvider`、`ios:`／`material:` バリアント、`pt-safe`／`no-safe-areas` ユーティリティ、`k-md-vibrant`／`k-md-monochrome`、および `tailwind.config.js` の Konsta v3/v4 `konstaConfig` からの移行を扱います。Konsta のインストールやアップグレード、コンポーネントがスタイルなしで表示される、テーマやダークモードが切り替わらない、Navbar／Tabbar がシステムバーと重なる場合に使用してください。Ionic コンポーネント（ionic-design）、Konsta を含まない通常の Tailwind セットアップ（tailwind-capacitor）、ネイティブのセーフエリア／エッジツーエッジ設定（safe-area-handling）には使用しないでください。
@lodev09/react-native-true-sheet を React Native アプリに統合するための利用者向けガイド。TrueSheet を使ったボトムシートの追加、設定、操作、デバッグを行う場合に使用します。ref ベースのシート、名前付きグローバルシート、TrueSheetProvider/useTrueSheet による Web 対応、React Navigation や Expo Router のシートフロー、Reanimated によるアニメーション、スクロール可能なコンテンツ、スタック、ヘッダー/フッター、detent、覗き見、サイドシート、キーボード操作、暗幕、背景、动工したリキッドグラス、Jest テストなどが含まれます。v3 から v4 への移行、レイアウトやジェスチャの問題のトラブルシューティング、TrueSheet の props、イベント、メソッドに関する質問にも使用します。React Native 環境でボトムシートを説明しているだけで「TrueSheet」という名前挙げしていない場合でも使用します。
AI 生成された静的 HTML ページ (Stardust、Mobirise、Relume、Lovable、v0、Figma 由来など) を Edge Delivery Services のページに変換し、元の 디자인を保ちながらコンテンツを Document Authoring で編集可能にする場合に使う。トリガーは「convert this page to EDS」「static-to-EDS overlay」「convert to EDS blocks」「next experimentation」「next run」「start run」、または DA で編集可能にするソース URL の提供。2 つのモードをカバーする: ページレベル (スロットマーカー付きオーバーレイテンプレート) とブロックレベル (各セクションが独立した EDS block になる)。標準的な EDS ブロック書き換えの移行には、代わりに page-import を使う
Motion（旧称 Framer Motion）と CSS アニメーション向けのアニメーションスキルです。アニメーションのベストプラクティス（vanilla JS、React、Vue、Base UI、Radix 向けの具体的なアドバイスを含む）、ドキュメントとサンプルの検索、CSS のスプリングとバウンスの生成、Performance Doctor による修正を含む MotionScore のコード／ランタイム性能監査、ビジュアルなトランジションエディターを提供します。アニメーションの作成、Motion（motion、motion/react、motion-v、framer-motion）の利用、UI のアニメーション化、CSS linear() スプリングの記述、コードまたはランタイムでの遅いアニメーション・性能・カクつき・レイアウトの頻繁な再計算の監査や修正、Motion のドキュメントやサンプルの検索、Motion コンポーネントや Motion UI セクションの追加・挿入・構築、Motion のバージョンアップに使用します。
カルーセル（スワイプできる複数スライドの投稿。Instagram カルーセル、LinkedIn ドキュメント/PDF カルーセル、TikTok 写真カルーセルなど）の執筆に使用します。保存数と閲覧維持時間が最も高い形式の一つです。ユーザーが「カルーセルを書いて」「カルーセル投稿」「X のスライド」「LinkedIn ドキュメント/PDF の投稿」「スワイプ投稿」「これをカルーセルにして」と求める場合や、複数スライドでの解説やストーリーを求められたときに実行します。まず brand-profile と voice を参照し、カバースライドはフック（hook-writer）で_DELETE."
React Flow（@xyflow/react）に関する(queue) なガイダンス：インタラクティブなノードベースグラフの構築、カスタムノードとエッジ、ハンドル、状態管理、レイアウト、TypeScript のパターン、パフォーマンス最適化、アクセシビリティ、SSR、theming. React Flow のコードを書く、カスタムノードやエッジを作る、フローの問題をデバッグする、グラフのパフォーマンスを最適化する、Zustand と統合する、React Flow でキャンバスベースの UI を構築するときに使います。
高品質な Instagram カルーセルを、スワイプ可能な HTML プレビューと書き出し可能なスライド（1080×1350px PNG）として作成します。ブランド設定、スライドの文案、ビジュアルデザインシステム（色、フォント、コンポーネント）、HTML 生成、Playwright ベースの書き出しまで、ワークフロー全体を扱います。ユーザーが Instagram のカルーセル、carrossel、slides para Instagram、Instagram の複数画像ポストの作成・デザイン・生成を依頼した場合は、「carousel」や「skill」と明示していなくてもこのスキルを使用してください。「create a post with multiple slides」「fazer carrossel」「exportar slides para o Instagram」といった依頼でも発動します。
Sentry のセッションリプレイを分析し、対象のプロダクトfebrero域における UX パターン、痛点、ユーザージャーニーを明らかにします。任意の Sentry のプロダクト画面に対して「show me how users use」「day in the life」「UX research」「replay research」「how do customers use」「what's the user experience like for」「watch replays of」「analyze replays for」「user behavior on」「replay UX audit」といった依頼がなされたときに使用します。
AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。