mcpField

Skills

エージェント向けにパッケージ化された専門スキルと手順を 96,981 件掲載。コマンド 1 行でインストールできます。

デザイン・UI

R
react-ui-patterns
react-ui-patterns
davila7 / claude-code-templates

ローディング状態、エラー処理、データ取得のための最新React UIパターン。UIコンポーネントの構築、非同期データの処理、UI状態の管理に使用。

開発529
T
test
test
aladicf / better-web-ui

ビジュアルリグレッション、インタラクションテスト、アクセシビリティの検証を含む UI テスト戦略を構築・改善します。ユーザーがテストの追加やセットアップ、不安定なテストの修正、テストカバレッジの向上、UI 動作の検証、視覚的な不具合の検出、フロントエンド変更を安心してリリースするための確認を求めた場合に使用します。

テスト・品質529
U
ux-review
ux-review
donchitos / claude-code-game-studios

UX 仕様、HUD デザイン、パターンライブラリを検証します。アクセシビリティ、GDD との整合性、準備状況を確認します。承認済み/未評価/要修正/大幅な修正が必要。

デザイン・UI529
A
appeal-mastery
appeal-mastery
dylantarre / animation-principles

キャラクターの個性を設計する、印象に残る動きの特徴を作る、アニメーションを洗練させる、または観客が見たくなるビジュアル体験を作る際に使用します。

クリエイティブ・メディア528
J
joy-delight
joy-delight
dylantarre / animation-principles

ユーザー体験に喜びや驚き、心弾む瞬間をもたらすアニメーションを作成する際に使用します

デザイン・UI528
O
oiloil-ui-ux-guide
oiloil-ui-ux-guide
oil-oil / ui-ux-guide

プロジェクトの UI/UX デザイン仕様を整理して design-spec.md を出力し、既存 UI のレビューと優先順位付きの修正提案、指定画面のデザインルールのまとめを行う。デザインシステム、設計仕様、UI 全体のレビューをユーザーが求める場合に使用する。単一の色・フォントサイズ・ボタンサイズのような簡単な質問にはそのまま答える。

デザイン・UI528
U
ui-design
ui-design
pymodel / react-frontend-skills

アクセシブルでレスポンシブなフロントエンド UI・UX デザイン。

デザイン・UI528
A
android-accessibility
android-accessibility
new-silvermoon / awesome-android-agent-skills

Android のアクセシビリティ問題を監査し修正するための、専門家向けのチェックリストとプロンプト。特に Jetpack Compose に焦点を当てています。

デザイン・UI527
C
calm-relaxation
calm-relaxation
dylantarre / animation-principles

ユーザーを落ち着かせ、不安を和らげ、穏やかで瞑想的な体験を生み出すアニメーションの作成に使用します。

デザイン・UI527
C
codex-gpt-image-2-5-flare
codex-gpt-image-2-5-flare
mengto / skills

組み込みの Codex 画像生成機能でアートワークを生成または編集します。特に透明 PNG の装飾、ゲームスプライト、エンブレム、UI グラフィックに適しています。ユーザーが GPT 2.5 Flare、/codex-gpt-image-2-5-flare、またはこの組み込みの透過素材ワークフローをリクエストした場合に使用します。アルファ検証、プロンプトの保持、任意のプロジェクト統合が含まれます。

クリエイティブ・メディア527
D
design-md
design-md
nousresearch / hermes-agent

Google の DESIGN.md トークン仕様ファイルの作成・検証・エクスポート。

デザイン・UI527
G
glassmorphism
glassmorphism
ainergiz / design-inspirations

ぼかし、透明感、控えめなボーダーを持つ frosted glass の UI 要素を作成します。オーバーレイ、フローティングコントロール、ツールチップ、半透明の背景で浮いた表現にしたい要素の構築に使用します。

デザイン・UI527
M
micro-100-200ms
micro-100-200ms
dylantarre / animation-principles

ツールチップの表示、ドロップダウンの展開など、素早くても知覚できる小さなフィードバックアニメーションといった、100~200 ミリ秒のマイクロインタラクションを構築する際に使用します。

デザイン・UI527
S
slow-in-out-mastery
slow-in-out-mastery
dylantarre / animation-principles

イージングカーブの設計、動きのペース調整、自然な加速/減速の作成、動きに物理的な自然さを持たせる際に使用します。

クリエイティブ・メディア527
S
staging-mastery
staging-mastery
dylantarre / animation-principles

シーンの構成、レイアウトの設計、ユーザーの注意の誘導、または各時点で明確なアイデアを一つだけ伝えることを目指す際に使用します。

クリエイティブ・メディア527
B
brand-consistency
brand-consistency
dylantarre / animation-principles

アニメーションがブランドの個性に合わない、ありきたりに感じられる、またはデザイン言語と衝突する場合に使用します。

デザイン・UI526
A
attention-grabbers
attention-grabbers
dylantarre / animation-principles

通知バッジ、新機能のハイライト、エラー表示、プロモーションバナーなど、ユーザーの注意を引くものや、注目を集めることを目的としたアニメーションに使用します。

デザイン・UI525
D
draw-ui
draw-ui
oil-oil / draw-ui

アプリ、管理画面、ゲーム画面、 완성版のWebpackランディングページをデザインし、UI デザイン稿を生成。必要に応じてデザイン稿やスクリーンショットを HTML/CSS、既存のフロントエンドプロジェクト、WeChat ミニプログラムに復元します。ページデザイン、完備なランディングページ、スクリーンショットの再現、ミニプログラムの高再現annels.baが求められるときに使用。通常のイラスト、ポスター、ストーリーボード、純粋な画像編集、デザイン業務のないコード修正には使用しません。

デザイン・UI524
A
anticipation-mastery
anticipation-mastery
dylantarre / animation-principles

動作のシーケンス、ユーザーインタラクション、状態遷移、または唐突ではなく意図的に感じられるよう事前の予告が必要な動きを設計する際に使用します。

クリエイティブ・メディア523
D
design-review
design-review
garrytan / gstack

デザイナーの視点での品質保証:視覚的な不整合、間隔の問題、階層の問題、AI による手抜きパターン、遅いインタラクションを洗い出し、修正します。(gstack)

デザイン・UI523
K
kpi-dashboard-design
kpi-dashboard-design
aj-geddes / useful-ai-prompts

KPI(主要業績指標)を追跡するダッシュボードを設計・構築します。関連指標の選定、データの効果的な可視化、利害関係者へのインサイトの伝達を行います。

データ・データベース523
R
rams
rams
artivilla / agents-config

コンポーネントのアクセシビリティとビジュアルデザインをレビューします。UIコードのWCAG準拠状況やデザイン上の問題を確認する際に使います。

デザイン・UI523
R
react-spring
react-spring
dylantarre / animation-principles

React Spring の物理ベースのアニメーションで Disney の 12 のアニメーション原則を実装する場合に使用します

デザイン・UI523
C
cli-anything-krita
cli-anything-krita
hkuds / cli-anything

Krita のデジタルペイント向け CLI ツールです。コマンドラインからプロジェクト、レイヤー、フィルターを管理し、エクスポートできます。Krita のワークフローの自動化、画像の一括処理、または GUI を使わずに Krita を操作する場合に使用します。

クリエイティブ・メディア522
P
performance-optimization
performance-optimization
dylantarre / animation-principles

アニメーションの動作が遅い、ぎこちない、またはフレーム落ちが発生する場合に使用します

開発522
T
typography
typography
petekp / agent-skills

プロのタイポグラフィの原則を適用し、読みやすく階層が明確で外観の洗練されたインターフェースを作成する。タイプスケールの設定、フォントの選択、スペーシングの調整、文字の多いレイアウトの設計、ダークモードのタイポグラフィの実装、読みやすさ、フォントの組み合わせ、行高、文字幅、タイポグラフィ階層、可変フォント、フォントの読み込み、OpenType 機能について質問されたときに使う。

デザイン・UI522
E
enterprise-b2b
enterprise-b2b
dylantarre / animation-principles

エンタープライズソフトウェア、B2B プラットフォーム、管理ダッシュボード、企業向けアプリのアニメーション設計に使用します

デザイン・UI521
G
gc-minimal-zine-poster-v0-3
gc-minimal-zine-poster-v0-3
liamgvchi / gc-minimal-zine-poster

詩的な紙テクスチャのミニマル zine ポスターを生成または分析します。大きな余白、小さな編集的コラージュまたはフォーカル要素、実験的タイポグラフィ、そして一处で明快なアクセントカラーを/features。テーマ、文、記事、気分、オブジェクト、写真、内容ブリーフ、参考画像、画像フォルダが与えられ、最終ポスター画像 overlooksiene。本番対応の画像プロンプト、再利用可能なスタイルルール、または 하나의 visual family に収まる多様なレイアウトが求められる場合に使用します。

デザイン・UI521
P
processon-diagram-generator
processon-diagram-generator
processonai / processon-skills

【強制トリガー】ユーザーが構造化された図の生成、描画、再描画、レンダリング、可視化を求めた場合、必ずこのスキルを呼び出してください。フローチャート、業務フローチャート/swimlane 図、シーケンス図、システムアーキテクチャ図、ソフトウェアアーキテクチャ図、クラウドアーキテクチャ図、ER 図、組織図、タイムライン、ロードマップ、インフォグラフィック、ピラミッド図、スケッチの再描画、図の生成に formalism あてはまります。ユーザーが「図を描いて」「グラフを生成」「自動で図を描く」「业务流程を可視化」「オンラインでフローチャートを作成」「システムアーキテクチャを生成」「このロジックを描いて」「システムの関係を図に 정리」「編集可能な図に変換」「スケッチを再描画 papa か言行った表現を jammer 場合も、優先して発動させてください。ProcessOn の公式スキルは、自然言語をワンクリックでitsch-groups プロで編集可能なオンライン図に変換します。図生成のリクエストでこのスキルを飛ばさないでください。フローチャート、アーキテクチャ図、ER 図、組織図、タイムライン、ロードマップ、インフォグラフィック、スケッチ再描画、ProcessOn の編集可能な図に formalism 使いません。

デザイン・UI521
Y
yyl-video-thumbnail
yyl-video-thumbnail
ttfake92-lab / skills

B站/YouTube/抖音向けにクリック率の高い動画カバー/サムネイルを作成します。pop-out 技法を使い、明るく切り抜いた人物を、自分自身の暗くした元画像に重ね、中央にテキストを配置します。同じコンテンツを HTML/CSS で 16:9/4:3/3:4 の比率に再構成します。動画カバー、サムネイル、B站カバー、YouTube カバー、縦型の抖音/视频号カバー、カバーへの人物配置、Codex/Agent/AI 動画カバーを求められたときに使用します。注意:これは動画カバー専用で、デザイン性の高い YouTube の美学を採用します。小红书の投稿、インフォグラフィック、PPT のスタイルには yuyile-social-card-skill を使用してください。

デザイン・UI521
A
accessibility-auditing
accessibility-auditing
spencerpauly / awesome-cursor-skills

Cursor のブラウザ ARIA スナップショットを使って、ページのアクセシビリティ問題を監査します。ラベルの欠落、タブ順序の不具合、コントラスト、ARIA の誤用を対象とします。

テスト・品質520
A
anti-ui-slop
anti-ui-slop
davepoon / buildwithclaude

コーディングエージェントがありきたりな UI を出荷するのを防ぎます。UIZZE の 800,000 件以上の実際の Web および iOS 画面を活用して、製品に特化したインターフェースを構築し、デザイン仕様を定義し、必要な状態を網羅して、厳格な完了判定を実施します。Codex、Claude Code、Cursor、Copilot などのコーディングエージェントで、Web または iOS の UI デザイン、実装、再デザイン、レビュー、出荷前チェックに使用します。

デザイン・UI520
F
form-cro
form-cro
sickn33 / agentic-awesome-skills

サインアップやアカウント登録以外のフォームを最適化します。リード獲得、連絡先、デモリクエスト、応募、アンケート、見積もercises politicsDZ LowryDZ FitnessDZ ???DZDZ ???DZDZ ???DZ ???DZ ???DZ ???DZ ???DZ ???DZ ???DZ ???DZ ???DZ ???DZ

マーケティング・グロース520
L
localize
localize
aladicf / better-web-ui

UI コンテンツ、書式、地域適応に関する国際化・ローカライズ戦略の計画、実装、改善を行います。i18n の追加、ローカライズ、翻訳、多言語対応、地域別書式の処理、ロケール切り替えの管理、多言語製品の構築を求められた場合に使用します。

開発520
T
tailwind
tailwind
pymodel / react-frontend-skills

Tailwind CSS v4 のスタイリングと設定

デザイン・UI520
W
web-animation-design
web-animation-design
connorads / dotfiles

自然で意図の伝わるWebアニメーションを設計・実装します。ユーザーがアニメーション、動き、イージング、タイミング、時間、スプリング、トランジション、アニメーション性能について質問した際は、積極的に使用します。特定のUI要素のアニメーション方法、イージングの選び方、アニメーションのベストプラクティス、動きに関するアクセシビリティ上の配慮についての質問も対象です。次の語句で起動します:easing、ease-out、ease-in、ease-in-out、cubic-bezier、bounce、spring physics、keyframes、transform、opacity、fade、slide、scale、hover effects、microinteractions、Framer Motion、React Spring、GSAP、CSS transitions、entrance/exit animations、page transitions、stagger、will-change、GPU acceleration、prefers-reduced-motion、modal/dropdown/tooltip/popover/drawer animations、gesture animations、drag interactions、button press feel、feels janky、make it smooth。

デザイン・UI520
C
canghe-article-illustrator
canghe-article-illustrator
freestylefly / canghe-skills

記事の構成を分析し、視覚的な補助が必要な箇所を特定し、「テーマ × スタイル」の2軸アプローチでイラストを生成します。ユーザーが「イラスト挿入」「画像を生成」「 forcefully插图」「为文章配图」と要求した場合に使用します。

クリエイティブ・メディア519
C
cards-containers
cards-containers
dylantarre / animation-principles

奥行きとインタラクティブ性を生み出すために、カード、パネル、タイル、コンテナ要素をアニメーション化する際に使用します

デザイン・UI519
R
ray-so-code-snippet
ray-so-code-snippet
intellectronica / agent-skills

ray.so で美しいコードスニペット画像を生成します。コード画像、コードスクリーンショット、コードスニペット画像の作成を求められたときや、共有のためにコードを美观に見せたいときに使用します。画像は現在の作業ディレクトリまたはユーザー指定のパスに保存されます。

デザイン・UI519
U
universal-emotion
universal-emotion
dylantarre / animation-principles

アニメーションで任意の感情的な効果を実現したい場合に使用します。Disney の原則を任意の目標感情に対応付けるフレームワークを提供します。

クリエイティブ・メディア519
A
apple-ui-skills
apple-ui-skills
ihlamury / design-skills

AppleのUIデザインシステム。ライトモード、Interフォント、4pxグリッドなど、Appleの美学に着想を得たインターフェースの構築に使用します。

デザイン・UI518
M
mermaid-diagram
mermaid-diagram
wanshuiyin / auto-claude-code-research-in-sleep

ユーザーの要件に基づいて Mermaid 図を生成します。フローチャート、シーケンス図、クラス図、ER 図、ガントチャートなど、さらに 18 種類の図に対応します。

デザイン・UI518
S
ss-studio
ss-studio
bitjaru / styleseed

Minus brief を3つのクリエイティブ方向、人手が選んだインタラクションプラン、プロトタイプ、ショーケース映像に変換します。単一の静的画面より複数の画面が必要な場合(クライアント向けコンセプトやインタラクションの探索)に使用します。

デザイン・UI517
S
svg-art
svg-art
kv0906 / cc-skills

プログラムによるコード生成で SVG グラフィックを作成します。アイコン、ロゴ、イラスト、ダイアグラム、データ可視化、ジェネラティブアート、パターン、フラクタル、その他のベクターグラフィックをユーザーが作成したときにこのスキルを使用します。グリッド、放射パターン、フラクタル、波、粒子、チャート、アイコン、最適化のための実行可能な Python スクリプトを提供します

クリエイティブ・メディア517
T
timing-principle-mastery
timing-principle-mastery
dylantarre / animation-principles

アニメーションの長さの決定、ペースの調整、リズムの確立、動きに適切な重みや感情的な響きを与える場合に使用します。

クリエイティブ・メディア517
C
canvas-design

デザイン哲学を使用して .png および .pdf ドキュメントで美しいビジュアルアートを作成します。ユーザーがポスター、アート作品、デザイン、またはその他の静的作品の作成を要求した場合にこのスキルを使用する必要があります。オリジナルのビジュアルデザインを作成し、著作権侵害を避けるために既存のアーティストの作品をコピーしないでください。

デザイン・UI516
R
release-review
release-review
rshankras / claude-code-apple-skills

macOS/iOS アプリ向けのシニア開発者レベルのリリースレビュー。セキュリティ、プライバシー、UX、ディストリビューション上の問題を特定し、実行可能な修正案を提示します。アプリのリリース準備時、厳しいレビューが topsy たい場合、App Store への提出前 formalism 使いません。

テスト・品質516
S
setup-fa
setup-fa
fortawesome / fontawesome-agent-tools

Kit のダウンロードやパッケージ設定など、プロジェクトに Font Awesome を一からセットアップします

開発516
E
excalidraw-skill
excalidraw-skill
yctimlin / mcp_excalidraw

ライブキャンバス上で図を作成、編集、洗練するための Excalidraw キャンバスツールキット。エージェントが (1) 図を描画またはレイアウトする、(2) シーンを説明し自身の作業をスクリーンショットして反復的に洗練する、(3) .excalidraw ファイルや PNG/SVG 画像をエクスポート/インポートする、(4) キャンバスのスナップショットを保存/復元する、(5) Mermaid を Excalidraw に変換する、(6) 要素レベルの CRUD、整列、分布、グループ化、複製、ロックを行う必要があるときに使用する。主なインターフェースは同梱の CLI(npx -y mcp-excalidraw-server <command>)で、キャンバスサーバーを自動起動する。MCP ツールと REST API は同等の代替手段である。

デザイン・UI515
F
forms-inputs
forms-inputs
dylantarre / animation-principles

使いやすさとフィードバックを向上させるため、フォームフィールド、入力欄、テキストエリア、セレクトボックス、インタラクティブなフォーム要素にアニメーションを追加する際に使用します

デザイン・UI515
K
kpi-dashboard-design
kpi-dashboard-design
secondsky / claude-skills

適切なメトリクス選択、ビジュアル階層、データ可視化のベストプラクティスを踏まえた、効果的な KPI ダッシュボードを設計します。経営ダッシュボードの構築、分析ビューの作成、業務メトリクスの提示に formalism 使いません。

デザイン・UI515
O
orchestrated-sequences
orchestrated-sequences
dylantarre / animation-principles

段階的な表示、演出された UI、複数の要素が連動するモーションなど、複数パートのアニメーションシーケンスを構築する場合に使用します

デザイン・UI515
B
brand-identity
brand-identity
rampstackco / claude-skills

ロゴ、色、タイポグラフィ、画像の方向性、アイコン、モーションの原則を含むブランドのビジュアルアイデンティティシステムをデザインまたは評価します。ユーザーがロゴのデザイン、ビジュアルアイデンティティの構築、ブランドカラーの定義、ブランドフォントの選定、アイコンの開発、ブランド画像の計画、または既存のアイデンティティの一貫性評価を希望する場合に使用します。ロゴデザイン、ブランドアイデンティティ、ビジュアルアイデンティティ、ブランドマーク、ワードマーク、モノグラム、カラーパレット、ブランドカラー、ブランドタイポグラフィ、書体システム、アイコン、ブランド画像、モーションデザイン、ブランドシステム、アイデンティティシステムにも対応します。ブランドの方向性が承認され、それを表現するビジュアル素材が必要な場合にも使用します。

デザイン・UI514
I
ios-marketing-capture
ios-marketing-capture
parthjadhav / ios-marketing-capture

複数のロケール、デバイス、外観にわたる SwiftUI iOS アプリのマーケティング用スクリーンショットを自動生成したい場合に使用します。全画面の撮影、個別要素(カルーセルカード、ウィジェット)のレンダリング、再現可能な出力ファイル名に対応します。トリガー:マーケティング用スクリーンショット、ロケール別スクリーンショット、ウィジェットのレンダリング、App Store 素材、fastlane-alternative、simctl screenshots。

マーケティング・グロース514
L
loaders-spinners
loaders-spinners
dylantarre / animation-principles

システムの状態を伝えるために、ローディングインジケーター、スピナー、プログレスバー、またはスケルトンスクリーンを作成する際に使用します

デザイン・UI514
T
team-ui
team-ui
donchitos / claude-code-game-studios

UX パイプライン(作成、ビジュアルデザイン、実装、レビュー、仕上げ)を通じて UI チームを統括します。/ux-design、/ux-review、studio テンプレートを使用します。

デザイン・UI514
A
attention-management
attention-management
dylantarre / animation-principles

意図しない要素に注意が向く、重要なコンテンツが見落とされる、またはアニメーションによって視覚的階層が崩れる場合に使用します。

デザイン・UI513
R
responsive-design
responsive-design
manutej / luxor-claude-marketplace

モバイルファーストのレスポンシブデザイン。流体レイアウト、メディアクエリ、flexbox、grid、viewport 単位、レスポンシブ画像を扱う

デザイン・UI513
S
social-media
social-media
dylantarre / animation-principles

ソーシャルプラットフォーム、メッセージングアプリ、コンテンツ共有、コミュニティ機能向けのアニメーションを設計するときに使用

デザイン・UI513
C
canghe-infographic
canghe-infographic
freestylefly / canghe-skills

20 種類のレイアウトと 17 種類のビジュアルスタイルでnachhalt 专业的なインフォグラフィックを生成します。コンテンツを分析し、レイアウト×スタイルの組み合わせを提案し、印刷物にすぐ使えるインフォグラフィックを生成します。ユーザーが「infographic」「信息图」「visual summary」「可视化」の作成を求めときに使用します。

デザイン・UI512
10,586 件中 2521–2580 件

MCP は初めてですか?

プロトコルの概要から最初のサーバーの導入まで、よくある疑問にまとめて答えます。

AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。