mcpField

Skills

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

デザイン・UI

C
core-components
core-components
sickn33 / agentic-awesome-skills

コアコンポーネントライブラリとデザインシステムのパターン。UI の構築、デザイントークンの利用、コンポーネントライブラリの操作時に使用します。

デザイン・UI546
D
delight
delight
aladicf / better-web-ui

基本機能がすでに動作している段階で、成功状態、空状態、読み込み時の演出、ホバー時の詳細、祝賀的な仕上げを通じて、喜びや個性、驚きを加えます。ユーザーが楽しさ、魅力、個性、記憶に残るマイクロインタラクションを求める場合に使用します。基本的な整理や、より強い視覚的インパクトが主なニーズの場合には使用しません。

デザイン・UI546
S
stardust
stardust
adobe / skills

4 つのフェーズからなるパイプラインで、既存のウェブサイトをガイド付きのマルチページ再デザインに導きます — extract(現在のサイトをクロールして取得)、direct(ビジュアル方針の設定)、prototype(再デザインした HTML の生成)、migrate(デプロイ可能な静的サイトの出力)。stardust/state.json にページごとの進捗を段階的に記録するため、再モデルは中断から再開できます。ページごとの設計のクラフト(タイポグラフィ、間隔、色、レイアウト、モーション)は impeccable skill に委譲します。ユーザーが URL で既存サイトを指定して再デザイン、リニューアル、モダナイズ、スタイル変更を希望する場合、extract/direct/prototype/migrate フローを実行する場合、またはマルチページの再デザインや移行を再開する場合に使用します。同じデザインを維持する移行フロー(replica)や参照元デザインを使うフロー(reskin)にも誘導します。ゼロから新しいサイトを設計する場合や、単一コンポーネントの一度きりの修正には使えません。

デザイン・UI546
U
ui-ux-polish
ui-ux-polish
oakoss / agent-skills

ウェブアプリケーション向けの反復的な UI/UX 磨きワークフロー。ビジュアルの品質向上、デスクトップとモバイルの UX を個別に最適化、反復的な改善サイクルの実行、glassmorphism や bento グリッドなどのデザイン패턴の適用、アクセシビリティと WCAG 準拠の監査に使用します。Stripe レベルのビジュアル品質、レスポンシブ最適化、デザインシステムとの一貫性の実現にnetsuje。

デザイン・UI546
U
using-ui-stack
using-ui-stack
spencerpauly / awesome-cursor-skills

UI を生成する際に、設定駆動のデザインシステムを強制適用します。すべての AI 生成コンポーネントで、间距、色、タイポグラフィ、ダークモード、インタラクション、アクセシビリティが一貫するようにします。

デザイン・UI545
D
design-code
design-code
plugin87 / ux-ui-agent-skills

あらゆるフレームワーク(React+Tailwind、Next.js、SwiftUI、Vue、Svelte、Angular、Solid、Web Components/Lit、React Native、Flutter、Jetpack Compose、バニラCSS、CSS-in-JS)向けに、本番環境で使えるアクセシブルなトークン駆動型コンポーネントコードを生成します。特定のスタックで動作するコンポーネントや画面のUIコードが必要な場合に使用します

デザイン・UI544
D
design-taste-frontend
design-taste-frontend
bnd-1 / taste-skill

シニア UI/UX エンジニア。LLM のデフォルトの偏りを覆すデジタルインターフェースを設計する。メトリクスに基づくルール、厳格なコンポーネントアーキテクチャ、CSS ハードウェアアクセラレーション、バランスの取れたデザインエンジニアリングを遵守する。

デザイン・UI544
I
icons-badges
icons-badges
dylantarre / animation-principles

アイコン、バッジ、アバター、ステータスインジケーター、小さなビジュアル要素にアニメーションを付け、個性とフィードバックを加えるときに使用

デザイン・UI544
S
showcase
showcase
aladicf / better-web-ui

シネマティックなトランジション、高度なモーション、大規模なレンダリングなど、意欲的な実装によって、際立って技術的にも野心的なインターフェースを作成します。ユーザーが驚きや感動を与えること、全力で取り組むこと、機能を一般的な UI の仕上げ以上に高めることを望む場合に使用します。視覚的な印象を少し高めるだけ、または通常の整理で十分な場合には使用しません。

デザイン・UI544
S
solid-drawing-mastery
solid-drawing-mastery
dylantarre / animation-principles

次元的な接地が必要なモーションの作成、オブジェクトの整合性を保つ変形の設計、アニメーションが構造的に確-solid|Cohesive|なAbradedTech|なFeel|な体験|довольств|な体の感じ|0900123456789012

クリエイティブ・メディア544
E
extract
extract
aladicf / better-web-ui

再利用可能なコンポーネント、プロダクトパターン、デザイントークンを抽出し、共有 API、文書化されたデフォルト、より高い再利用性を備えた、より明確なデザインシステムを構築します。繰り返し使われる UI のリファクタリング、ボタン/カード/フォーム/セクションの統合、コンポーネントライブラリの構築、一度限りの値の再利用可能なトークン化を行う場合に使用します。

デザイン・UI543
F
figma-design
figma-design
manutej / luxor-claude-marketplace

Figma Plugin API のドキュメントに基づく、Figma のワークフロー、コンポーネント、自動レイアウト、制約、プロトタイピング、デザインシステム、プラグイン開発

デザイン・UI543
F
figma-generative-plugins
figma-generative-plugins
figma / mcp-server-guide

**必須の前提条件** — `create_generative_plugin` または `update_generative_plugin` を呼び出す前に、このスキルを読み込みます。再利用可能な生成型 Figma プラグインの作成、実装、変更、修正、拡張をユーザーが求めた場合に使用します。

開発543
I
ios-ux-design
ios-ux-design
mosif16 / codex-skills

iOS アプリの UI/UX の分析、iOS デザインパターンの評価、iOS インターフェースの改善提案、iOS 実装仕様の作成を行うときにこのスキルを有効化します。Apple Human Interface Guidelines、SwiftUI のパターン、ネイティブ iOS コンポーネント、アクセシビリティ標準、iOS 特有のインタラクションパラダイムについて深い専門知識を提供します。

デザイン・UI543
B
brand-guidelines
brand-guidelines
billevansonline / brand-guidelines

Anthropic の公式ブランドカラーとタイポグラフィを、Anthropic のビジュアルスタイルが適したあらゆる制作物に適用します。ブランドカラーやスタイルガイド、ビジュアルフォーマット、企業のデザイン基準が関係する場合に使用します。

デザイン・UI542
C
canghe-cover-image
canghe-cover-image
freestylefly / canghe-skills

記事カバー画像を 5 つのディメンション(タイプ、パレット、レンダリング、テキスト、ムード)で生成し、9 種類のパレットと 6 種類のレンダリングスタイルを組み合わせる。シネマティック(2.35:1)、ワイドスクリーン(16:9)、正方形(1:1)のアスペクトに対応。「カバー画像を生成して」「記事カバーを作って」「カバーを作って」といった依頼のときに使う。

クリエイティブ・メディア542
B
block-kit
block-kit
slackapi / slack-skills-plugin

開発者がSlackメッセージ、モーダル、Homeタブ向けのBlock Kitレイアウト(メッセージレイアウト、モーダル/フォーム/ダイアログ、Homeタブのインターフェース、インタラクティブなボタンやメニュー)の作成または検証を行う場合、あるいは既存のBlock Kit JSONを変更する場合に使用します。SlackのUIコンポーネント(セクション、アクション、入力、ヘッダー、アラート、テーブル、カルーセル)、「blocks」や「Block Kit Builder」という語、レンダリング済みブロックのプレビュー依頼、「type」: 「section」のようなJSONの貼り付けもトリガーになります。blocks.validate APIメソッドで検証します。

デザイン・UI541
B
brochure-design-generation
brochure-design-generation
eachlabs / skills

each::sense AI を使って professionally な desenvolv 传的 design を生成します。三つ折、二つ折、企業、旅行、商品、不動産、医療、教育、イベント、サービス向けのパンフレットを、印刷可能なレイアウトで作成します。

デザイン・UI541
F
fintech-banking
fintech-banking
dylantarre / animation-principles

銀行アプリ、決済システム、投資プラットフォーム、金融ダッシュボードのアニメーションを設計するときに使用

デザイン・UI541
G
gaming-entertainment
gaming-entertainment
dylantarre / animation-principles

ゲームアプリ、配信プラットフォーム、エンタメポータル、インタラクティブメディアのアニメーションを設計するときに使用します

デザイン・UI541
G
gesture-responses
gesture-responses
dylantarre / animation-principles

タッチやクリックの操作に応答するときに使用 - ボタン押下、ドラッグフィードバック、スワイプ応答、タップのリップルなど、直接操作アニメーション全般。

デザイン・UI541
J
jmbos-front-generating-component

説明はまだありません

開発541
J
jmbos-front-saving-menu

説明はまだありません

開発541
D
design-component
design-component
plugin87 / ux-ui-agent-skills

社内品質基準に沿ってUIコンポーネントの仕様(構造、バリエーション、サイズ、8つの状態、トークンの対応付け、アクセシビリティ)を設計します。コードを書く前またはコード作成と並行して、コンポーネント(ボタン、入力欄、タブ、トースト、コンボボックス、日付ピッカー、モーダルなど)を仕様レベルで設計・文書化する場合に使用します。フレームワークコードの生成にはdesign-codeを使用します

デザイン・UI540
F
frontend-slides-editable
frontend-slides-editable
archlizheng / frontend-slides-editable

Codex/Claude Code向けの編集可能なHTMLプレゼンテーションスキル。ドラッグによるサイズ変更、スライドの並べ替え、ローカル保存・エクスポート、PPTXからWebへの変換に対応。@zarazhangruiに感謝。

ドキュメント540
A
accessibility-advocate
accessibility-advocate
dylantarre / animation-principles

インクルーシブなアニメーションの設計、前庭障害やモーション感度への対応、アニメーションのアクセシビリティ準拠の確認で使用。

デザイン・UI539
D
design-system-creation
design-system-creation
aj-geddes / useful-ai-prompts

コンポーネント、パターン、ガイドラインを含む包括的なデザインシステムを構築し、設計の一貫性、開発のスピード、チーム間のコラボレーション Avery 向上させます。

デザイン・UI539
J
jmbos-front-generating-menu-item

説明はまだありません

デザイン・UI538
N
nurb

nurb を使って 3D プリント可能な部品を Python 関数として設計します。ユーザーが 3D プリント用の部品(ブラケット、マウント、ホルダー、エンクロージャー、シェルフ、または造形可能な STL/STEP)の設計・変更・チェックを希望する場合、および parts/ フォルダーがある任意のディレクトリで使用します。ユーザーが部品を説明し、ブラウザ上で評価する。あなたはそれをモデル化します。

デザイン・UI538
P
paper-illustration
paper-illustration
wanshuiyin / auto-claude-code-research-in-sleep

Gemini の画像生成を使い、学術論文向けの出版品質 AI イラストを作成。アーキテクチャ図や手法の図解を、Claude が監督する反復的な改良ループで生成。ユーザーが「生成图表」「画架构图」「AI绘图」「paper illustration」「generate diagramuthoritativeION said」、または論文のための図が必要_wp_code witch ときに使用。

クリエイティブ・メディア538
P
presentation-skill
presentation-skill
siril9 / presentation-skill

コンテンツ主導の編集可能なPowerPoint資料を作成する、MITライセンスのエージェントスキルとCodexプラグイン。JSONから再構築でき、ネイティブのグラフやテーブル、レンダリング後のビジュアルQAに対応。

ドキュメント538
D
drawio-reconstruction
drawio-reconstruction
hkustdial / supervisor-skills

参照画像を、高精細で編集可能な Draw.io ファイルに再構成し、レンダリング済みプレビューを作成します。テキストと構造には Draw.io のネイティブ要素を使い、参照画像に合うシンプルなアイコンには SVG を、複雑なビジュアルには切り抜きまたは透過 PNG を使用します。図の画像、研究用の図、アーキテクチャ図、スライド、UI スクリーンショット、画像フォルダーを `.drawio` XML に変換したい場合に使用します。バッチ処理では、可能な場合は並列数を制限したマニフェストを使い、それ以外の場合は完全な忠実度を保って順次処理します。

デザイン・UI537
F
frontend-ui-ux-design
frontend-ui-ux-design
dauquangthanh / hanoi-rainbow

ユーザーインターフェース、設計システム、コンポーネントライブラリ、レスポンシブレイアウト、アクセシビリティ対応を含む包括的なフロントエンド UI/UX デザインを作成する。ワイヤーフレーム、モックアップ、設計仕様、実装ガイドラインを成果物として出す。UI デザイン、UX デザイン、インターフェースデザイン、デザインシステム、ユーザー体験、フロントエンドのデザインパターンの設計、または利用者が同类の用語を挙げた場合に使う。

デザイン・UI537
Q
quieter
quieter
aladicf / better-web-ui

階層と個性を保ちながら、視覚的な強さ、彩度、ノイズを抑えます。構造はおおむね適切でも、デザインが騒がしい、強すぎる、けばけばしい、攻撃的、または刺激が強すぎる場合に使用します。実際の問題が構造の煩雑さ、機能の多さ、個性の不足である場合には使用しません

デザイン・UI537
F
flutter-improve-design
flutter-improve-design
kamranbekirovyz / skills

Flutter コードをレビューして UI/UX の改善点を見つけ、選択した改善案の実装計画を作成します。

デザイン・UI535
O
onboard
onboard
aladicf / better-web-ui

ユーザーがすばやく価値を得られるオンボーディングとアクティベーションのフローを設計します。オンボーディング、利用開始、初回ユーザー、アクティベーション、アハ体験、新規ユーザーフローに言及した場合に使用します。作業が空状態の画面自体に限られる場合は使用しません。

デザイン・UI535
U
ux-writing
ux-writing
plugin87 / ux-ui-agent-skills

トーン&マナー(明確、簡潔、有用、人間味があり、誠実)に沿い、「何が→なぜ→どうする」のエラー形式とインクルーシブな表現のルールを用いて、UIコピー(ボタン、エラー、空状態、マイクロコピー、通知、ラベル)を作成またはレビューします。インターフェースのコピー、エラーメッセージ、空状態のテキストが必要な場合や、コピーのレビューを行う場合に使用します

デザイン・UI535
A
accessibility-compliance-accessibility-audit
accessibility-compliance-accessibility-audit
sickn33 / agentic-awesome-skills

宣言された WCAG の適用範囲に照らして、ページとユーザーフローを監査します。キーボード操作、スクリーンリーダー、フォーカス、コントラストの障壁を特定し、検証済みの改善策を計画する場合に使用します。

テスト・品質534
B
best-practices
best-practices
mobbin / skills

Mobbin でできることとできないこと、Mobbin スキル同士の連携方法をエージェントに伝え、適切なスキルを選ぶか、Mobbin が適切なツールではない場合にその旨を説明できるようにします。ユーザーが Mobbin やその接続について尋ねる場合、または Mobbin が役立つ可能性のあるデザイン作業(規模が大きすぎるものや Mobbin の対象外のものを含む)を始める場合は、他の Mobbin スキルやツールより先に読みます

デザイン・UI534
D
design-qa
design-qa
plugin87 / ux-ui-agent-skills

トークンとハードコード値の lint、自動アクセシビリティテスト(axe)、コントラスト、バリエーション/状態/テーマ/RTLをまたぐビジュアルリグレッション、手動のアクセシビリティチェックリストに対するデザインQAゲートを設定または実行します。CI品質ゲートの導入、デザインのリグレッション防止、リリース前のコンポーネントや画面のQAに使用します

テスト・品質534
E
entrance-animations
entrance-animations
dylantarre / animation-principles

要素が画面に表示される必要があるときに使用—ページの読み込み、モーダルの開閉、項目の追加、コンテンツの表示、あるいは「視界に入る」あらゆるアニメーション。

デザイン・UI534
J
jmbos-front-generating-codestep

説明はまだありません

開発534
J
jmbos-front-generating-page-config

説明はまだありません

開発534
M
modals-dialogs
modals-dialogs
dylantarre / animation-principles

モーダル、ダイアログ、ポップオーバー、オーバーレイ表示のコンテンツをアニメーションさせる際に使用しスムーズな出現と消失を実現する

デザイン・UI534
S
security-ux
security-ux
aladicf / better-web-ui

ユーザーを不快にさせずに保護する、安全性を重視したインターフェースを設計します。MFA、パスワード UX、侵害通知、信頼性の表示、安全なフォーム、アカウント復旧について、またはセキュリティに安心感を持たせる方法について尋ねられたときに使用します。

デザイン・UI534
C
canghe-markdown-to-html
canghe-markdown-to-html
freestylefly / canghe-skills

Markdown を WeChat 互換テーマのスタイル付き HTML に変換する。コードハイライト、数式、PlantUML、脚注、アラート、インフォグラフィックに対応。ユーザーが「markdown to html」「convert md to html」「md转html」を求める場合や、Markdown からスタイル付き HTML が必要なときに使う。

ドキュメント533
P
prototype
prototype
adobe / skills

現在のサイトのあるページの再設計案を、自己完結型の静的 HTML ファイルとしてレンダリングし、impeccable craft ループで反復します。ページ単位&idempotent で、古い状態の検出にも対応しています。再設計のプロトタイプ、前後の比較、cosmetic design プレビュー、ページモックアップ、再設計のビジュアル差分、または `$stardust prototype`(Claude Code の `/stardust:prototype`)の呼び出しをユーザーが求めた場合 formalism 使いません。

デザイン・UI533
U
ux-researcher
ux-researcher
dylantarre / animation-principles

アニメーションのユーザビリティ評価、モーション研究、アニメーションがユーザーの認識やタスク完了に与える影響の調査を行う際に使用する。

デザイン・UI533
W
web-accessibility
web-accessibility
akillness / jeo-skills

ルーティングを軸とした web アクセシビリティの修正と検証のためのスキル。主な仕事が、どのアクセシビリティ面的層が壊れているかを分類すること(セマンティクス、キーボード/フォーカス、ラベル/読み上げ、視覚認識/リフロー、メディアの代替手段、またはルーティング型アプリのナビゲーションフィードバック)であり、曖昧な監査、WCAG、axe/Lighthouse、「これをアクセシブルにして」といった依頼を、具体的な修正パッケージ 1 件に変えるときに使用します。階層、仕上げ、リリース準備に関する広い UI レビューもここに該当します。コンポーネント API アーキテクチャとシステムガバナンスは `design-system` へ、レスポンシブレイアウト戦略は `responsive-design` へルーティングしてください。

デザイン・UI533
A
arc-mastery
arc-mastery
dylantarre / animation-principles

モーションパス、キャラクターの移動軌跡、ジェスチャーアニメーションなど、機械的ではなく自然に感じられる動きを設計する際に使用します。

クリエイティブ・メディア532
E
excitement-energy
excitement-energy
dylantarre / animation-principles

熱意を生み出し、期待感を高め、高エネルギーな体験を作るアニメーションを制作するときに使用。

デザイン・UI532
P
primevue
primevue
kindy / skills

Vue/Vite プロジェクトで PrimeVue の UI コンポーネントライブラリをセットアップし、利用します。自動インポート、テーマ、コンポーネント設定を扱います。PrimeVue のコンポーネントを扱う、Vue プロジェクトに PrimeVue を導入する、テーマ(Aura、Lara など)を設定する、PrimeVue コンポーネントの自動インポートを実装するときに使用します。

開発531
T
the-loop
the-loop
oxbshw / watch-skill

ユーザーが UI、アニメーション、ゲーム、生成動画などのビジュアル要素を作成または変更し、検証を求める場合や、「UI の見た目がおかしい理由」「修正が実際に機能したか」「アニメーションに不具合があるか」と尋ねる場合に使用します。実行中の製品を録画し、平易な合格基準に照らして評価し、変更前後の証拠を示しながら合格するまで反復します。

テスト・品質531
V
video-talkcraft
video-talkcraft
vincentwei1021 / video-talkcraft

Claude Code / Codexを、ナレーション主体の解説動画向けモーションデザインスタジオにするエージェントスキル。単語単位のナレーション同期、109種類のモーションレシピカード、スライドショーに頼らないカメラシステム、Remotionレンダリングに対応。

クリエイティブ・メディア531
C
cli-anything-mermaid
cli-anything-mermaid
hkuds / cli-anything

Mermaid Live Editor のコマンドラインインターフェース。ステートフルなプロジェクトファイルと mermaid.ink レンダラーの URL を利用して、Mermaid 図の作成・編集・レンダリングを行う。GUI なしでフローチャート、シーケンス図その他の可視化ięgeneraする必要がある AI エージェントとパワーユーザー向けに設計。

デザイン・UI530
D
drawio
drawio
ilteoood / harness

draw.io 図を .drawio ファイルとして生成し、XML を埋め込んだ PNG/SVG/PDF にエクスポート

デザイン・UI530
I
iphone-duo-react-native
iphone-duo-react-native
mirzaaghazadeh / iphone-duo-skills

React Native または Expo アプリを iPhone Duo(Apple 初の折りたたみ式 iPhone)に適合させます。非対称のセーフエリアインセット、サイズ変更の処理、ネイティブモジュールを介して iOS 27.1 の予約領域およびヒンジ API を公開する方法を扱います。React Native、Expo、または JS ベースの iOS アプリで折りたたみ式 iPhone のサポートが必要な場合に使用します。

開発530
R
react-flow-architecture
react-flow-architecture
existential-birds / beagle

React Flow でノードベースの UI を構築するためのアーキテクチャ指針。フローベースのアプリの設計、状態管理や統合パターンの判断、React Flow がユースケースに適しているかの評価時に使用します。

開発530
B
brandkit
brandkit
plugin87 / ux-ui-agent-skills

ブリーフをもとに、プリミティブ→セマンティック→コンポーネントのDTCGトークン(カラー、タイポグラフィ、間隔、角丸、シャドウ、モーション)で、アクセシブルなブランドデザインシステムを一式生成します。ライト/ダーク、単一のtheme.cssを含み、WCAGに照らして検証します。ブランド/デザイン基盤をゼロから作る、新しい配色とタイポグラフィシステムを用意する、または製品用のテーマ対応トークンキットを作成する場合に使用します

デザイン・UI529
P
pinterest-search
pinterest-search
postplusai / postplus-skills

キーワードから Pinterest の公開画像を探し、ムードボードやビジュアルのアイデアに使えるようにする。使える画像リンク、元の Pin、タイトルを返す。

クリエイティブ・メディア529
10,586 件中 2461–2520 件

MCP は初めてですか?

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

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