Skills
エージェント向けにパッケージ化された専門スキルと手順を 96,981 件掲載。コマンド 1 行でインストールできます。
デザイン・UI
エージェントが構築するサイト向けの GSAP 実装技法です。タイムライン設計、gsap.context と matchMedia、ScrollTrigger の pin と scrub の適切な扱い、SplitText の適切な使用、transform のみを使ったアニメーション、フォント読み込み後の更新、prefers-reduced-motion の完全な適用を扱います。受賞レベルのモーションの 90% は効果ではなく構成であり、このスキルはその 90% を担います。GSAP アニメーションコードを生成する際に使います。design-taste core skill と taste-motion に重ねて使います。
UI/UXデザインの知見を提供します。50種類のスタイル、21種類のパレット、50種類のフォントペア、20種類のチャート、8種類のスタック（React、Next.js、Vue、Svelte、SwiftUI、React Native、Flutter、Tailwind）。操作：計画、構築、作成、デザイン、実装、レビュー、修正、改善、最適化、強化、リファクタリング、UI/UXコードの確認。プロジェクト：ウェブサイト、ランディングページ、ダッシュボード、管理パネル、EC、SaaS、ポートフォリオ、ブログ、モバイルアプリ、.html、.tsx、.vue、.svelte。要素：ボタン、モーダル、ナビゲーションバー、サイドバー、カード、テーブル、フォーム、チャート。スタイル：グラスモーフィズム、クレイモーフィズム、ミニマリズム、ブルータリズム、ニューモーフィズム、ベントーグリッド、ダークモード、レスポンシブ、スキューモーフィズム、フラットデザイン。トピック：カラーパレット、アクセシビリティ、アニメーション、レイアウト、タイポグラフィ、フォントの組み合わせ、間隔、ホバー、シャドウ、グラデーション。
あらゆる Web アプリ向けの AI エージェント視覚フィードバックループ。視覚的なコード (UI、canvas、3D、SVG、チャート、アニメーション) を反復して品質を評価するためにレンダリング結果を確認する必要があるときに使用。カバーする内容：dev-screenshot API パターン (GET トリガー → SSE → クライアントでキャプチャ → POST で返送 → ファイル保存)、パラメータ化レンダリング、メタデータサイドカー、ピクセル差分による視覚回帰、WebMCP ツール登録、console フォールバック。有効化条件：'take a screenshot'、'show me the render'、'visual QA'、'compare before/after'、'pixel diff'、またはエージェントがレンダリング出力を検査する必要がある反復的な視覚作業。
ウェブサイト全体のリビルドエージェント。既存のウェブサイト URL を受け取り、Astro + Tailwind CSS を使って、世界水準で SEO 最適化され、WCAG AA に準拠し、視覚的に優れたウェブサイトへとゼロからリビルドし、GitHub 経由で Vercel にデプロイする。厳格な 14 フェーズのプロセスを実行する：ブランド抽出、コンテンツのスクレイピング、SEO 監査、デザイン監査、リビルド計画、デザインシステムを伴う完全な構築、コピーの最適化、3 ラウンドの QA、競合ツールの調査、ツールの構築、ツールの QA、デプロイ前チェックリスト、Vercel へのデプロイ。11 以上のドキュメント成果物を生成する。トリガー：「rebuild website」「redesign website」「rebuild site from URL」「website rebuild」「redo this website」「make this website better」「rebuild from scratch」「full site redesign」、または既存の URL から新しいプロフェッショナルなウェブサイトを作成するあらゆる依頼。ユーザーが URL を提示し、そのサイトの新バージョンの構築/作成/設計を求めたときにもトリガーする。
ウェブサイトやランディングページの構築、レビュー、監査を行う戦略的ウェブデザインコンサルタント。ユーザーがランディングページの構築、サイトのメッセージングのレビュー、ヒーローコピーや CTA の作成、「AI っぽさ」の監査、ページの情報アーキテクチャの計画を求めたときにトリガーする。以下のキーワードでもトリガーする: "landing page"、"above the fold"、"hero section"、"conversion funnel"、"social proof"、"product page design"。
ある UI デザインの美学を研究し、コーディングエージェント向けに網羅的で実装可能なデザインガイドラインを作成する。ユーザーが美学（brutalist、glassmorphism、retro-futuristic、Swiss modernist、Apple HIG、neumorphism、minimalism、cyberpunk、Material Design、art deco、vaporwave など）を指定し、正確な CSS 値、カラーパレット、コンポーネントの状態、アニメーション、タイポグラフィを備えた完全なスタイルガイドを求めたときに使用する — コーディングエージェントが曖昧さなくその美学を忠実に実装できるほど詳細なもの。
ローカルの自動化エンドポイント経由で JavaScript から Affinity（Canva による統合 Affinity アプリ：ベクター、ピクセル、レイアウトスタジオ）を遠隔操作する——MCP クライアントの設定は不要。ドキュメント編集、バッチ操作、テキスト/レイヤー操作、再利用可能なライブラリス�クリプトを自動化し、レンダリングされた JPEG で視覚的に検証できる。ユーザーが Affinity のスクリプト化や自動化、.af / .afdesign / .afphoto / .afpub ドキュメントのプログラム的な編集、デザインのバッチ処理を望む場合、または "Affinity"、"Affinity script"、"automate Affinity"、"batch edit in Affinity"、"control Affinity" と言った場合に使用する——スクリプト化に言及していなくてもよい。
ジャンルパック：サイト・オブ・ザ・デイの美学――スタジオ印刷物に映写された映画のようなページ。温かみのある紙のキャンバス、ほぼ黒のインク色の文字、鮮やかなエレクトリックブルーのアクセント1色、グロテスク体のディスプレイ書体、交互に切り替わるシーンのキャンバス、スクラブ操作できるインデックスカウンター、テキストが溶けるピン、ドラッグ操作のカードカルーセル。ポートフォリオ、製品ローンチ、エージェンシー、高級感のあるスクロール連動型ストーリーテリングを求める案件に。実装には taste-gsap が必要。design-taste コアスキルに重ねて使用。
UI/UX skills、サブプロセス、デザインの方向性、進行画面のゲート、Stitch/Pencil/Figma の出力、実装ステップに関するユーザーとエージェントのフィードバックを収集、構造化、重複排除して解決する。コメントに open、accepted、partially accepted、applied、rejected などのステータスが必要な場合、またはレビューボード/進行ページのフィールドを実行可能な意思決定に変える必要がある場合に使用する。
MCP または Plugin API 互換のワークフローを通じて Figma Effects を作成、適用、削除、監査、バインドする。ユーザーが選択した Figma ノードにドロップシャドウ、内側の影、レイヤーブラー、背景ブラー、グロー、グラスモーフィズム、ノイズ、テクスチャ、ガラス効果、プログレッシブブラー、エフェクトスタイル、エフェクト変数 / トークンを求める場合にこの技能を使用し、現在の Figma エフェクトの互換性、ランタイムサポート、変数バインドの制限、読み戻しの証拠を扱う。
Figma MCP の code-to-canvas または generate-design 機能が利用可能な場合に、ライブまたはローカルの Web UI を編集可能なデザインレイヤーとして Figma に取り込む。ユーザーが、本番環境、ステージング、localhost、またはブラウザーでレンダリングされたページが Figma より先行していると述べ、プライバシーとエビデンスを保ちながらライブ UI を Figma ファイルに同期、キャプチャ、再現、変換したい場合にこのスキルを使用する。
ウィジェット、Material Design、Cupertino、アニメーション、ジェスチャー、ナビゲーション、状態管理、プラットフォーム統合を網羅する包括的な Flutter API リファレンスガイド。Flutter アプリケーションを開発し、ウィジェット、レイアウト、スタイル、アニメーション、プラットフォームチャネル、その他あらゆる Flutter SDK 機能について詳細な API 知識が必要な場合に使用します。Flutter でクロスプラットフォームのモバイル、Web、デスクトップアプリケーションを構築するために不可欠です。
プレーンな HTML/CSS/JavaScript サイトのアニメーションを構築・レビューします。GSAP によるページのイントロ／アウトロ、コンポーネントの表示／非表示、スクロール効果、ドキュメント間の View Transitions、bfcache、Swup、Barba、Taxi を使った fetch/swap ナビゲーションを扱います。GSAP が明示されていなくても、初回描画時のちらつきやナビゲーションの中断に使用できます。非表示コンテンツの復元と初回読み込みのパフォーマンスも対象です。コンポーネントフレームワークや、単独の GSAP API に関する質問には使用しません。
web プロジェクトから AI slop（vibe-coded な製品にありがちな、汎用的で機械的なデフォルトの視覚・コピーの癖）を見つけて除去する。ユーザーが「kill AI slop」「de-slop」「remove the AI look」「make this not look AI-generated」を求めた場合や、テンプレート的に感じるランディングページ/UI/ドキュメントを整理したい場合に使用。典型的な兆候のカタログを修正する——グラデーション/グローのデフォルト、グラスモーフィズム、バッジやピルの多用、パステル調のタイル、AI が描いたアイコン、AI コピーライティングの口調（「not just X — it's Y」）、至るところの emoji など——完全なリストは `references/taxonomy.md` を参照。HTML/CSS、React/Vue/Svelte/Astro、Tailwind、PHP、Markdown のコピーで動作する。コードベース外の中国語または英語のプレーンテキスト編集には、代わりに `de-slop` を使用。
重要：Makepad 2.0 のアニメーションシステムに使用する。トリガー：makepad animation、makepad animator、Animator、AnimatorState、hover effect、makepad transition、animation state、Forward、Snap、Loop、ease function、makepad animate、timeline、snap()、default @off、animation group、アニメーション、トランジション、ホバーエフェクト、アニメーション状態、イージング関数
重要：Makepad 2.0 の GUI 開発向けの入門スキル。Makepad に関するあらゆるタスクで最初に読み込むスキルであり、他の 13 個の Makepad 2.0 スキルの上位に位置する設計判断の基準を提供する。トリガー：makepad、makepad app、makepad project、makepad design、live_design!、app_main!、script_mod!、Cx、WidgetRef、Widget、makepad-widgets、makepad architecture、makepad how to、"how should I"、"should I use"、"what's the best way"、makepad アーキテクチャ、makepad 設計、makepad のやり方、makepad ベストプラクティス、コンポーネント分割、状態管理、データフロー、レンダリング思考
重要：Makepad 2.0 のベクターグラフィックス widget に使用。トリガー：makepad vector, Vector widget, SVG path, makepad path, makepad circle, makepad gradient, makepad tween, vector animation, Gradient, RadGradient, Filter, DropShadow, Group transform, vector drawing, inline SVG, 矢量图形, SVG, 路径, 渐变, 矢量动画。
.NET MAUI アプリケーションでタップ、スワイプ、パン、ピンチ、ドラッグ&ドロップ、ポインタのジェスチャ認識機能を実装するためのガイダンス。XAML と C# の使用法、ジェスチャの組み合わせ、プラットフォームの違いを扱う。USE FOR: "tap gesture"、"swipe gesture"、"pan gesture"、"pinch gesture"、"drag and drop"、"pointer gesture"、"gesture recognizer"、"TapGestureRecognizer"、"SwipeGestureRecognizer"、"PanGestureRecognizer"、"combine gestures"。DO NOT USE FOR: ジェスチャでトリガーされるアニメーション（maui-animations を使用）、CollectionView のスワイプアクション（maui-collectionview を使用）、カスタム描画のインタラクション（maui-graphics-drawing を使用）。
アプリのコードベースを探索してモバイルブラウザワークフローのドキュメントを生成し、その後 Playwright を使ってモバイルビューポート（393x852）でユーザーと共にライブアプリをステップごとに確認しながら検証項目を共同執筆する。ユーザーが「generate mobile workflows」「create mobile workflows」「update mobile workflows」「generate mobile browser workflows」と言ったときに使用する。番号付きのワークフロー markdown ファイルを生成し、モバイルコンバーターと Playwright ランナーに渡す。iOS HIG への対応とモバイル UX アンチパターンの検出を含む。
AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。