Skills
エージェント向けにパッケージ化された専門スキルと手順を 97,222 件掲載。コマンド 1 行でインストールできます。
デザイン・UI
アクセシビリティに関する意思決定とその根拠を記録し、チームの変更、リデザイン、時間の経過を経ても残るようにする。アクセシビリティのトレードオフを行うとき、アプローチを選定するとき、または将来の参照のために意思決定を記録する必要があるときに使用する。トリガー：accessibility decision、why did we、tradeoff、decision record、ADR、architecture decision、accessibility rationale、why is it like this、document the decision、decision log。
製品のヒーロー画像、マーケティングクリエイティブ、ソーシャル投稿、広告、EC の PDP ビジュアル、一般的なビジュアルデザインタスク向けに、ビジュアルコンセプト、画像生成プロンプト、任意の AI 生成画像を作成する。ユーザーがビジュアル戦略、画像プロンプトの作成、製品/マーケティング画像の方向性、直接のテキスト・トゥ・イメージ生成を求めたときに使用する。Codex 環境では組み込みの imagegen ツールを使用し、それ以外では apiz CLI を基盤とするバンドルスクリプトを使用する。
このスキルは、生態系地圖（エコシステムマップ）、利害關係人地圖（ステークホルダーマップ）、服務藍圖（サービスブループリント）の作成、レビュー、分析、指導、ファシリテーションに必ず使用する。アップロードされたブループリントや CJM からブループリントへの変換要求も含む。タスクに参加者の関係、価値交換、サービス提供の分析が必要な場合は、ツール名を明示していなくても、服務設計、服務流程優化、服務旅程、接觸點、前台後台分析にも使用すべきである。ユーザーにスキル名を覚えることを求めてはならない。
会話を通じて Outlook 互換のメールテンプレート（EML + HTML）を生成する。3 つのモード：Design（ゼロから作成）、Import（既存の .eml を複製）、Production（確定したテンプレートに Excel データを流し込む）。ユーザーが次のことを望む場合に使用：メールテンプレートの作成や設計、.eml ファイルの生成、ニュースレターの作成、Outlook 用のメール整形、メールのインポート/複製（导入/复刻邮件）、邮件模板 の設計、邮件排版 や 邮件设计 の実施、Outlook 互換でピクセル単位まで正確な HTML メールの構築。トリガー：週報メール（周报邮件）、製品アップデートメール、イベント招待（活动邀请邮件）、お知らせ（公告邮件）、社内ニュースレター、.eml のインポート、メールテンプレートの複製、Outlook でメールをプロフェッショナル/美しく見せる。視覚デザイン、EML 生成、EML インポートを扱う——SMTP、送信、アカウント管理は対象外。このスキルがないと、Outlook は Word レンダリングを使用して最新の CSS を無視するため、Outlook のメールが崩れる。
接続された Salesforce org にすでにデプロイ済みの既存の Data Capture Flow を修正する。Tooling API 経由でライブの Flow Metadata JSON を取得し、ユーザーが要求した変更を適用して PATCH で書き戻す。ユーザーが既存の flow を指定して、フィールドの追加/削除/名前変更、可視性の変更、バグ修正、視覚的な調整、プレースホルダーを実際のコンポーネントへの差し替えを依頼する場合に使用する（「Inventory_Transfer に Notes フィールドを追加」「Work_Order_Number の可視性ルールを修正」「parts repeater をオプションにする」「Signature プレースホルダーを実際の dcSignature コンポーネントに置き換える」）。まったく新しい flow を構築するためにこのスキルを使用しないこと — それは fs-data-capture-form-designer と fs-data-capture-form-deployer の役割。
ブランドソース（URL、16 進カラーコード、ブランドガイドの貼り付け、色の説明）から Field Service モバイルアプリの配色を導き、ライトモードとダークモードの両方で WCAG AA コントラストを検証し、14 フィールドの配色を組織デフォルトの FieldServiceMobileSettings レコードに適用する。トリガーフレーズには 'brand the mobile app'、'apply branding to Field Service mobile'、'update the mobile app colors'、'use this brand guide for the app'、'set the color scheme for the mobile app' が含まれる。Dispatcher console / Gantt のブランディング、Experience Cloud BrandingSet レコード、スケジューリングポリシーの配色にはこのスキルを使用しない — 対象外。
セクションがスクロールで表示されたときにピン留めし、その後 GSAP ScrollTrigger（pin + scrub + track の xPercent のトゥイーン）で縦スクロールを横スクロールに変える。ユーザーが "gsap scrolltrigger"、"pin section"、"cuộn ngang"、"horizontal scroll section"、"scroll-driven horizontal"、"pinned horizontal scroll"、または /gsap-scrolltrigger-pin と言ったときに呼び出す。`scroll-effects`（軽量な vanilla の 7 エフェクト、依存なし、ピンなし）および `lenis-smooth-scroll`（ページ全体のスクロールを滑らかにする、ピンなし/スクロール方向の変更なし）とは異なる — このスキルは GSAP を必要とし、1 つの特定のピン留めセクションにのみ適用される。
ショーリール品質（Behance / OFFF / Awwwards 級）のモーショングラフィックス動画を HyperFrames（HTML + GSAP + SVG + Canvas、Apache-2.0）で制作します。remotion-motion-reel の HyperFrames 版で、Remotion Company License が不要な構成です。テーマや素材（キャラクター画像、音声など）をもとに世界観、コピー、デザインシステム、タイムライン、サウンドを補完し、120BPM/60fps で拍に同期した映像を実装・レンダリングします。「HyperFrames でかっこいい動画」「ライセンスフリーでモーショングラフィックス」「ショーリールを HTML で」などの依頼時に使用します。
設計トークンをコードから Figma に variable としてプッシュする。DTCG / tokens.json / トークンオブジェクト → Figma variable コレクション、モード、値。ユーザーがトークンをコードから Figma へ同期したいときに使用する。トリガー:「import tokens into Figma」「create Figma variables from my tokens.json / DTCG / Tailwind config」「sync design tokens to Figma」「push tokens to Figma」。既存の variable を非破壊的にマッチングする（保存された id/key/name による）ため、再インポートは重複ではなく更新になる。どの Figma プランでも動作する。逆方向（Figma → コード）には export-tokens-figma を使用する。
座標ラッピングにより無限にスクロール/ドラッグできる WebGL（Three.js）画像グリッド — ドラッグまたはスクロールで仮想オフセットを移動し、mesh の位置を剰余で再計算するため、実在するタイルが N×N しかなくてもグリッドは無限に見える。ユーザーが "lưới ảnh vô hạn"、"infinite scroll grid webgl"、"draggable image wall"、"poster wall cuộn vô hạn"、または /infinite-webgl-grid と言ったときに呼び出す。`skills/threejs-particle-morph`（離散的な粒子がスクロール進捗に応じて 1 枚の画像に収束し、固定の「目的地」がある — これは継続的に閲覧するタイルグリッドで目的地はない）とは異なり、`skills/blur`（1 つのプレーン上で画像を別の画像に遷移させるもので、多数の画像のグリッドを閲覧するものではない）とも異なる。
スクリーンリーダー利用者にとって文脈から切り離しても意味が通じ、すべての人の使いやすさを高めるリンクテキストを書く。リンク、コールトゥアクション、ナビゲーションラベル、その他のクリック可能なテキストを書くまたはレビューするときに使用。トリガー：link text、click here、read more、learn more、screen reader links、link purpose、anchor text、call to action、CTA、ambiguous link。
完全な React フォームシステム。次の場合に積極的に有効化：(1) 制御されたフォームパターン、(2) React Hook Form のセットアップとバリデーション、(3) Zod スキーマによるバリデーション、(4) useFieldArray による動的フィールド、(5) フォームと Server Actions、(6) 楽観的更新のための useOptimistic、(7) ファイルアップロードの処理、(8) マルチステップフォームウィザード。提供：フォームバリデーション、エラー処理、フィールド配列、ファイルのドラッグ＆ドロップ、フォーム状態管理。適切なバリデーションと UX を備えた堅牢なフォーム処理を実現する。
画面サイズや入力方法を問わず動作する必要があるユーザーインターフェースを持つあらゆるプロジェクト（Web サイト、Web アプリ、ダッシュボード、マーケティングページ、メール、デザインシステムなど）でこのスキルを読み込む。レイアウトの構築やレビュー、ブレークポイントの選択、フルイドタイポグラフィの設定、タッチターゲットのサイズ調整、コンテナに適応するコンポーネントの作成に使用する。1 つのデザインがスマートフォン、タブレット、ノート PC、デスクトップ、タッチ、マウス、キーボードに対応する必要がある。コンテンツファースト、モバイルファースト、フレームワーク非依存の CSS と Baseline で安定した機能を好む。
ネイティブな Figma MCP を介した Figma↔Storybook の双方向ブリッジ。design→code：Figma 変数から基盤トークン（カラー/スペーシング/タイポグラフィ）をマッピングし、design↔code の一致 + ドリフトを確認し、承認済みの Figma コンポーネントを納品する（抽出 → 構築 → 埋め込み）。stories は sb-stories のルールに従って作成する。code→design：コンポーネント + stories + トークンの一致 + 使用状況から Code Connect マッピングを構築し、Figma Dev Mode に実際のコードを表示させる。「Figma トークンを同期する」「Figma 変数を自分のデザインシステムにマッピングする」「この承認済みの Figma デザインを納品する」「design↔code トークンの一致を確認する」「自分のコンポーネントを Figma / code connect に接続する」に使用する。未確定のデザインのプロトタイピング/反復には使用しない（それは sb-explore）。
ページスクロール効果のハブ — 原文どおりのオリジナル 64 点（freefrontend/CodePen、MIT）がリポジトリ Rheinmir/uiux-asset にありファイルをそのままコピーできる。さらに軽量な vanilla の 7 エフェクト：reveal-on-scroll、staggered text、scroll highlight、sticky shrink nav、scroll-to-top、scrollspy TOC、軽量な data-speed parallax。Vanilla HTML/CSS/JS で、prefers-reduced-motion を尊重する。ユーザーが "hiệu ứng scroll"、"scroll reveal"、"scroll to top"、"scrollspy"、"parallax nhẹ"、"highlight khi cuộn"、または /scroll-effects と言ったときに呼び出す。`blur`（GPU 負荷の高い WebGL 画像切り替え）および `timeline`（時間のマイルストーン軸）とは異なる — これらは日常的に使うページスクロール効果で、軽量、依存なし。
shadcn/ui の Svelte 5 移植版である shadcn-svelte のエキスパートガイダンス。shadcn-svelte コンポーネントの使用、コマンドラインによる UI コンポーネントのインストール、Superforms/Formsnap によるフォーム実装、mode-watcher によるダークモードの追加、TanStack Table によるデータテーブルの作成、Tailwind CSS v4 と OKLCH カラーによるテーマ設定、カスタムコンポーネントレジストリの構築を行うときにこのスキルを使用。shadcn-svelte、Bits UI コンポーネント、SvelteKit の UI コンポーネントライブラリへの言及でトリガーされる。
視覚的なノイズと選択肢を減らしたいユーザー向けに、簡素化された低複雑度のインターフェースビューを設計する。設定、ダッシュボード、複雑なツール、よりシンプルなモードが役立つあらゆるインターフェースを設計するときに使用。トリガー：simplified view、simple mode、easy mode、basic view、reduce complexity、less clutter、overwhelmed、too many options、beginner mode、essential view、focus mode。
特定の状況ですべてのユーザーに影響する状況的障害をマッピングする。恒久的な障害を持つ人だけを対象とするものではない。モバイル、屋外、騒がしい、ストレスの多い、マルチタスクの状況向けに設計するときに使用。トリガー：situational、context of use、environment、one-handed、bright sunlight、noisy、driving、multitasking、gloves、temporary disability、context、edge case。
ページスクロールまたはビューポートに入ったときに SVG の線を徐々に描画する（stroke-draw）— `path.getTotalLength()` を測定し、`stroke-dasharray`/`stroke-dashoffset` を設定し、dashoffset を length から 0 へアニメーションする。ユーザーが "vẽ svg khi cuộn"、"svg stroke draw"、"logo vẽ dần"、"path animation reveal"、"stroke-dashoffset"、または /svg-stroke-reveal と言ったときに呼び出す。`skills/scroll-effects`（一般的な 7 つのスクロールエフェクト — reveal/stagger/highlight/nav/top/toc/parallax、stroke-draw なし）とは異なる — このスキルは線の描画を伴う SVG `<path>`（ロゴ、署名、折れ線グラフ、行程）に特化している。
実在するプロダクト画面のための UI 設計と実装。テイスト優先の批評、リファレンスのルーティング、プロジェクト固有のデザインブリーフ、バリエーション比較、実装の検証を含む。Codex がプロジェクトのコンテキストを読み、テイストを探索し、`references/catalog.md` を経由してルーティングし、`PROJECT_DESIGN.md` または `design.md` を統合し、投資ゲートを使って誤ったテイスト/リファレンス/スコープを避け、既存のスタックで実装し、結果が実際に良くなったかを評価して、フロントエンド UI を再設計・構築・仕上げ・批評するときに使用する。アプリ画面、ダッシュボード、ランディングページ、クエリツール、プロダクト画面、デザイン探索に最適。バックエンドのみの作業や小さな見た目の修正には適さない。
パーティクルクラウド Three.js（THREE.Points + BufferGeometry）がページスクロールの進行に合わせてランダムな位置から画像/ロゴへ収束する — 非表示の canvas からピクセルをサンプリングして目標座標とし、スクロールに応じて position を lerp する。ユーザーが "particle image"、"hạt hội tụ thành ảnh"、"three.js particle scroll"、"point cloud morph"、"particle cloud biến hình theo scroll"、または /threejs-particle-morph と言ったときに呼び出す。`skills/blur` とは異なる（あちらは GLSL のラジアルブラーシェーダーで、平面上のある画像を別の画像へ変化させるもの — こちらは離散的なパーティクルクラウドが画像へ変形するもので、レンダリング技術がまったく異なる — PlaneGeometry 上の ShaderMaterial ではなく PointsMaterial/BufferGeometry）。
UI/UX 作業の計画、構築、設計、コードレビュー、リファクタリング、修正、改善、最適化、強化、チェックを行う際に使用します。プロダクトパターン、ランディングページ、チャートの選択、ビジュアルスタイル、パレット、タイポグラフィ、UX ルール、および 9 つのスタック（React、Next.js、Vue、Svelte、SwiftUI、React Native、Flutter、Tailwind、shadcn/ui）を扱います。プロジェクト：ウェブサイト、ランディングページ、ダッシュボード、管理パネル、e コマース、SaaS、ポートフォリオ、ブログ、モバイルアプリ、.html、.tsx、.vue、.svelte。要素：ボタン、モーダル、ナビバー、サイドバー、カード、テーブル、フォーム、チャート。トピック：カラーパレット、アクセシビリティ、アニメーション、レイアウト、タイポグラフィ、フォントの組み合わせ、スペーシング、ホバー、シャドウ、グラデーション。
Apple スタイルのインターフェースをアニメーション化するときに使用——バネ物理、象徴的な smooth/snappy/bouncy のバネ、流動的で中断可能なトランジション、hero／連続性トランジション、ジェスチャー（スワイプ、ドラッグ、コンテキストメニュー、Dynamic Island、スワイプ操作）、触覚フィードバック、コントロール／ローディングのマイクロインタラクション、Web の生きた質感のプリミティブ（連続的なスクロール進捗モーション + ポインタ反応のスパイス）。apple-design ファミリーの一部。キーワード：apple animation、spring、springs、damping fraction、response、fluid interface、interruptible、matchedGeometryEffect、zoom transition、hero、gesture、swipe to dismiss、drag、velocity handoff、context menu、haptics、taptic engine、sensory feedback、micro-interaction、button press、prefers-reduced-motion、css linear() spring、easing、scroll-progress、scroll progress mapping、damped scroll、scroll smoothing、mapRange、magnetic button、tilt、pointer-reactive、spotlight。
AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。