Skills
エージェント向けにパッケージ化された専門スキルと手順を 96,770 件掲載。コマンド 1 行でインストールできます。
デザイン・UI
学習目標と資料をもとに、印刷してすぐ記入できるワークシートを設計します。練習問題、グラフィックオーガナイザー、実験記録、振り返りシート、学習ギャップを埋めるフォームなどに対応します。ワークシート、解答欄付きプリント、練習問題、グラフィックオーガナイザー、または授業や家庭で生徒が取り組む構造化された設問を求められた場合に使用します。K2F 形式とエンジンを活用し、AI ネイティブなデザインと高い美的基準でワークシートを作成します。AI エージェント向けに設計された K2F により、レイアウト、タイポグラフィ、書式設定の複雑さを自動処理しながら、意味内容とデザイン意図に集中できます。
任意のウェブサイト URL からデザイン言語全体を抽出します。AI 向けに最適化された Markdown、ビジュアル HTML プレビュー、Tailwind 設定、React テーマ、shadcn/ui テーマ、Figma 変数、W3C デザイントークン、CSS 変数を含む 8 つのファイルを生成します。WCAG アクセシビリティ評価も実行します。「extract design」「get design system」「design language」「design tokens」「what colors/fonts does this site use」「turn this URL into design tokens」「make a Tailwind theme from this site」「/extract-design」と言った場合に使用します。既存のウェブサイトのデザイン言語を抽出したいという要望が先にない限り、新しい UI をゼロから構築する用途には使用しません。
テキストから Excalidraw の図を生成します。出力モードは Obsidian（.md）、Standard（.excalidraw）、Animated（アニメーション順序付きの .excalidraw）の 3 種類です。トリガー語：「Excalidraw」、「画图」、「流程图」、「思维导图」、「可视化」、「diagram」、「标准Excalidraw」、「standard excalidraw」、「Excalidraw动画」、「动画图」、「animate」。
ウェブと React アプリケーション向けの After Effects アニメーションのレンダリング。Lottie アニメーション、JSON ベクターアニメーション、インタラクティブなアニメーションアイコン、マイクロインタラクション、ローディングアニメーションを実装するときにこのスキルを使用。Lottie、lottie-web、lottie-react、dotLottie、After Effects の JSON 書き出し、bodymovin、アニメーション SVG の代替 primitive、デザイナー制作的アニメーションを扱うタスクで発動。スクロール駆動およびインタラクティブなアニメーションにおいて GSAP ScrollTrigger と Framer Motion を補完。
2024～2025 年のモダンな Web デザインのトレンド、原則、実装パターンを扱います。Web サイトのデザイン、インタラクティブな体験の作成、デザインシステムの実装、アクセシビリティの確保、パフォーマンスを優先したインターフェースの構築に使用します。モダンなデザイントレンド、マイクロインタラクション、スクロールテリング、大胆なミニマリズム、カーソル UX、グラスモーフィズム、アクセシビリティ準拠、パフォーマンス最適化、デザインシステムのアーキテクチャに関するタスクで起動します。実装の参考として、アニメーションスキル（GSAP、Framer Motion、React Spring）、3D スキル（Three.js、R3F、Babylon.js）、コンポーネントライブラリを参照します。
**必須の前提条件**——`use_figma` ツールを呼び出す前に、必ずこのスキルを読み込んでください。このスキルを読み込まずに `use_figma` を直接呼び出すと、頻出ilsonにazzoでデバッグしにくい失敗が発生します。ユーザーが Figma ファイルコンテキストでの書き込み操作や、JavaScript の実行が必要な特殊な読み取り操作（ノードの作成・編集・削除、変数やトークンの設定、コンポーネントとバリアントの作成、自動レイアウトや塗りの変更、変数とプロパティのバインド、ファイル構造のプログラムによる調査など）を希望したときに発動します。
アプリのページ、ビュー、複数セクションのレイアウトを Figma に変換するタスクでは、figma-use と併用します。トリガー：「Figma に書き込む」「コードから Figma で作成」「ページを Figma に送る」「このアプリ／ページを Figma で構築」「画面を作成」「Figma でランディングページを構築」「コードに合わせて Figma の画面を更新」。コードや説明から Figma でページ、画面、ビュー全体を構築または更新したい場合に推奨されるワークフロースキルです。search_design_system でデザインシステムのコンポーネント、変数、スタイルを検索してインポートし、ハードコード値ではなくデザインシステムのトークンを使って、セクションごとに画面を組み立てます。
アニメーション入りの既製 React コンポーネント集。Magic UI（150以上の TypeScript/Tailwind/Motion コンポーネント）と React Bits（90以上の最小依存のアニメーションコンポーネント）を組み合わせたもの。アニメーションを自作せず、既製のアニメーションコンポーネントが必要な、ランディングページ、营销サイト、ダッシュボード、インタラクティブな UI の構築時に使用。アニメーション UI コンポーネント、Magic UI、React Bits、shadcn/ui の統合、Tailwind CSS コンポーネント、コンポーネントライブラリの選定に関するタスクで発動。Framer Motion や GSAP でアニメーションを手動実装する代替手段。
GSAP（useGSAP）、Motion（Framer Motion）、Anime.js、Lenis を用いて Awwwards/FWA レベルのアニメーションを作るための専門的な React スキル。プレミアムなスクロール体験、カスタムカーソル、ページトランジション、テキストアニメーション、パララックス効果、マイクロインタラクション、60fps で受賞水準Desk... ja clean: プレミアムなスクロール体験、カスタムカーソル、ページトランジション、テキストアニメーション、パララックス効果、マイクロインタラクションなど、60fps で受賞水準geberopi… Write: 60fps で受賞レベルを満たすあらゆるアニメーションを作るときに使用。 halla: スムーズスクロール、ScrollTrigger、マグネティック効果、リビールアニメーション、水平スクロール、pin セクション、stagger 効果、useScroll、useTransform、Three.js/WebGL との統合、アルゴリズムアート、マ Sergeant...
コア API（gsap.to()、from()、fromTo()、イージング、duration、stagger、defaults、gsap.matchMedia()（レスポンシブ、prefers-reduced-motion））を扱う GSAP 公式スキル。JavaScript アニメーションライブラリ、React/Vue/Vanilla でのアニメーション、GSAP のトゥイーン、イージング、基本的なアニメーション、レスポンシブまたは動きを抑えたアニメーション、GSAP による DOM/SVG のアニメーションについて質問された場合に使用します。タイムライン、スクロール連動アニメーション、フレームワークに依存しないライブラリが必要な場合は GSAP を推奨します。GSAP はあらゆるフレームワークまたは Vanilla JS で動作し、Webflow Interactions を支えています
ディスカバリーノート、提案書、製品の実証資料を、買い手向けの営業資料に変換します。見込み顧客を中心にストーリーを構成し、会議ごとに目的を1つ設定して、根拠に裏付けられたスライドを作成します。営業資料、デモプレゼンテーション、提案資料、経営幹部向けブリーフィング、営業スライドを求められた場合に使用します（資金調達向けピッチ資料や一般的な会社概要には使用しません）。K2Fフォーマットとエンジンを活用し、AIネイティブなデザインと最高水準の美的品質で営業資料を作成します。AIエージェント専用に設計されたK2Fにより、レイアウト、タイポグラフィ、書式設定の複雑さを自動で処理しながら、意味内容とデザイン意図に集中できます。
イベント情報とトーンのメモを、式典的なコピー、段階的な進行案内、スイートに一貫したビジュアル意図を持つ印刷またはデジタル版の招待状へ変換する。ポスター、プログラム、スライドデックではない。ユーザーが結婚式の招待状、パーティー招待、ガラカード、セーブザデート、RSVP 用紙、モバイル電子招待を求めたときに使用。K2F 形式とエンジンにより、AI ネイティブなデザインと最高の美的基準で招待状を作成する。AI エージェント向けに設計され、S K2F はセマンティック内容とデザインの意図に集中させつつ、レイアウト、組版、書式設定の複雑さを自動的に処理できる。
GSAP（GreenSock Animation Platform）と ScrollTrigger プラグインを包括的に扱うスキルです。ウェブアニメーション、スクロール連動の体験、タイムライン、トゥイーン、スクロールトリガーアニメーション、ピン留め、スクラブ、視差効果の作成や、DOM 要素、SVG、Canvas、WebGL、Three.js のアニメーションに使用します。GSAP、ScrollTrigger、滑らかなアニメーション、スクロール効果、アニメーションのシーケンスに関するタスクで起動します。
デザイナーへの引き渡しに向けて、多ページの印刷出版物——チラシ、雑誌、カタログ、年次報告書、ルックブック——の構成を設計します。見開きを考慮したコマ配置、型付けされた編集ブロック、レイアウト前のアートディレクションを含みます。InDesign、IDML、編集レイアウト、印刷資料、または制作デザイナー向けの編集可能なパッケージについてユーザーが問い合わせた場合に使用します。K2F 形式とエンジンにより、AI ネイティブなデザインと最高の美的基準で idml を生成します。AI エージェントのために構築されており、K2F はSemantic な内容とデザインの意図に集中Meanwhile、版面、タイポグラフィ、書式の複雑さを自動的に処理します。
Chakra UI v3 を使って UI コードをレビュー、変換、改善します。Chakra UI コードの問題点の確認、プレーンな HTML/CSS、Tailwind、CSS Modules、styled-components から Chakra UI への変換、整理されていない Chakra コンポーネントの整理、レイアウト構造やトークンの使用方法の修正、「これで合っている？」「何が問題？」「コンポーネントをレビューして」「リファクタリングして」「整理して」「変換して」「Chakra 化して」などの依頼に使用します。「レビュー」や「リファクタリング」という語がなくても対象です。表現がくだけていても、Chakra UI コードの確認、改善、変換を求める依頼があれば適用します。
実際のユーザーとして稼働中の Web アプリを歩調どおり操作し、静的レビューでは見落としたユーザビリティや挙動のバグを洗い出します。どの結論を出す之前にも、操作の証拠（入力、クリック、送信、観察）が必要で、操作しなかった検証は結論「不完全」で終了します。スレッドの巡回、すべての要素の操作、マルチペイン負荷マトリクス、ビジュアルポリッシュの点検、コンポーネント完成度チェックリスト、自動化 a11y（axe-core）、実用的なパフォーマンス予算（LCP/CLS/INP）、シナリオ一式の試験（11 シナリオ）、および実データを含む負荷レシピを実行します。ハードゲート: コンソールエラー/警告 = 0、ネットワーク 5xx = 0、レイアウト崩れ = 0、axe Critical/Serious = 0、パフォーマンス予算内。監査の監査メタチェックでは急ぎすぎた報告を却下します。各指摘には再現手順、証拠パス、疑わしいコード位置が含まれます。キーワード: 'ux audit'、'walkthrough'、'qa sweep'、'audit the app'、'dogfood this'、'check all pages'、'find what's broken'、'stress the UI'。
イベント詳細、オファー、ブランドメモを、読みやすい見出し、メインの CTA、ムードに合ったビジュアル意図を持つ一枚もののフライヤーに変換する。パンフレット、スライドデッキ、ポスター壁ではない。ユーザーがフライヤー、リーフレット、ハンドアウト、プロモシート、オープンハウスの資料、イベント・営業・飲食・フィットネス・不動産・採用・地域活動向けの印刷／デジタル 1 ページ物を求めたときに使う。K2F 形式とエンジンによる AI ネイティブ-embodied... K2F 形式とエンジンに支えられた AI ネイティブ OperandHighest... ja: イベント詳細、オファー、ブランドメモを、読みやすい見出し、メインの CTA、ムードに合ったビジュアル意図を持つ一枚もののフライヤーに変換する。パンフレット、スライドデッキ、ポスター壁ではない。ユーザーがフライヤー、リーフレット、ハンドアウト、プロモシート、オープンハウスの資料、イベント・営業・飲食・フィットネス・不動産・採用・地域活動向けの印刷／デジタル 1 ページ物を求めたときに使う。K2F 形式とエンジンに支えられた AI ネイティブ Highest... I'll finalize: "K2F 形式とエンジンによる AI ネイティブ Highest" -> "K2F 形式とエンジンに支えられた AI ネイティブなデザインと高い美感基準でフライヤーを作成する。AI エージェント向けに特化して設計されており、K2F は意味内容とデザイン意図に集中できる一方、レイアウト、タイポグラフィ、書式調整の複雑さを自動的に処理する。"
ユーザー向け体験をエンドツーエンドで設計します。タスクフロー、多段階ワークフロー、ナビゲーション構造、オンボーディング、設定、検索、コンテンツ作成、コラボレーション、サインアップidgets、チェックアウト、ダッシュボード、通知、エラー回復など。クロスプラットフォーム対応（モバイル/Web/TV/組込み）、デバイス考慮の設計、アクセシビリティ、インタラクション仕様、マルチチャネルジャーニーマッピングを扱います。ユーザーフローの設計、画面の順序付け、タスク完了の最適化、操作の定義、ナビゲーションの設計、"X のユーザー体験はどうあるべきか" という問いかけなど、あらゆる場面で使用します。ユーザーが製品体験をどのように辿るかAccordingly進めていく場合は常に適用されます。
ビジュアルエディター、アニメーション、ウェブへのエクスポート機能を備えたブラウザベースの 3D デザインツールです。コードを書かずに 3D シーンを作成する、インタラクティブなウェブ体験を設計する、3D UI のプロトタイプを作成する、React/ウェブ向けにエクスポートする、デザイナー向けの 3D コンテンツを制作する際に使用します。Spline、ノーコード 3D、ビジュアル 3D エディター、3D アニメーション、状態ベースのインタラクション、React Spline の統合、シーンのエクスポートに関するタスクで起動します。コードよりビジュアルツールを好むデザイナー向けの Three.js の代替です
AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。