mcpField

Skills

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

デザイン・UI

F
figma-generate-library
figma-generate-library
nexu-io / open-design

コードベースをもとに、Figma でプロフェッショナル品質のデザインシステムライブラリを構築または更新します。Figma の信頼できる唯一の情報源を、リリース済みのコンポーネントと同期させるのに役立ちます。

デザイン・UI2.7k
P
philosopher
philosopher
ghaida / intent

デザインの問題を急いで解決する前に、じっくり考えるための横断的な思考モードです。Intent デザイン戦略システムの一部です。発散的なブレインストーミングを促し、連想力を高め、初心者の視点を保ち、分野横断のパターン認識を行い、アイデアを早まって退けることを抑えます。すべての Intent スキルと連携します。strategize はブリーフの再構成に、blueprint は構造上の前提への問い直しに、journey はインタラクションモデルの再考に、specify は仕様のストレステストに活用します。ユーザーが「発散モード」「哲学者モード」「これについて一緒に考えて」「ブレインストーミング」「この問題を探って」などと依頼するか、「奇抜にして」「自分を抑えないで」「どんなつながりを見落としている?」「違う視点で考えて」「行き詰まった」などと言った場合に起動します。これはキャラクターではなく推論プロトコルです。Claude の語り口は地に足の着いたまま、思考プロセスが大きく変化します

デザイン・UI2.7k
S
stitch-loop
stitch-loop
nexu-io / open-design

デザインからコードへの反復的なフィードバックループ。批評 → 調整 → リリースのサイクルで、デザイン概要と実装済み UI の視覚的な忠実度を高めます

デザイン・UI2.7k
F
figma-code-connect-components
figma-code-connect-components
nexu-io / open-design

Code Connect を使って Figma のデザインコンポーネントとコードコンポーネントを連携させ、デザインシステムの更新をコードベースに自動反映します

デザイン・UI2.7k
T
transpose
transpose
ghaida / intent

異なるプラットフォームや利用シーンのために体験を(~)——サイズを変えるだけでは(~)、(~)。Intent デザイン戦略システムの一部です。desktop から mobile、web から TV、consumer アプリから kiosk、視覚インターフェースから音声へと体験が移ると、インタラクションモデル、情報の優先順位、ユーザーの状況はすべて変わります。次のときに発動します: 新しいプラットフォームに合わせて設計を適応させる、複数デバイスにまたがる体験を(~)——(@)——計画する、クロスプラットフォームの一貫性を監査する、TV/kiosk/音声/組み込み向けに設計する、あるいは「モバイルで動くようにしてほしい」と言われた場合に「ただ縮小するだけでよい」に异议を_(+)——述べる必要があるとき。クロスデバイスの~(USER) 旅程の連続性、プラットフォーム慣習の監査、コンテキスト固有の優先順位マッピングでも発動します。

デザイン・UI2.7k
C
customer-journey-mapping-workshop
customer-journey-mapping-workshop
deanpeters / product-manager-skills

適応的な質問と成果物を使って、顧客ジャーニーマッピングワークショップを実施します。ペルソナとシナリオについて、ステージ、アクション、感情、ペインポイント、機会をマッピングしたいときに使用します。

デザイン・UI2.7k
F
figma-create-new-file
figma-create-new-file
nexu-io / open-design

新しい空の Figma Design または FigJam ファイルを作成します。スクリプト化されたデザインシステムやワークショップのワークフローの最初の手順として便利です。

デザイン・UI2.7k
C
card-xiaohongshu
card-xiaohongshu
nexu-io / open-design

小红書スタイルのナレッジカードを、スワイプ可能なマルチカードのカルーセルとして配置します。

デザイン・UI2.7k
K
k2f
k2f
suzheng / k2f

K2F を使用して、洗練された Word(docx)、編集可能な PDF、入力可能な AcroForm PDF、Adobe InDesign(IDML)ドキュメントを作成、デザイン、編集、検証、エクスポートします。メニュー、証明書、プランナー、招待状、ワークシートなど、AI エージェントで美しい Word、入力可能な PDF、AcroForm、IDML、InDesign ドキュメントを作成する場合に使用します。K2F は、AI エージェントが洗練されたドキュメントを正確かつ容易にデザイン・編集できるよう設計された成熟したファイル形式で、豊かなエコシステムを備えています。

ドキュメント2.7k
D
design-taste-frontend
design-taste-frontend
nexu-io / open-design

ランディングページ、ポートフォリオ、リデザイン向けのアンチテンプレートフロントエンドスキル。エージェントがブリーフを読み、適切なデザイン方向を推測し、テンプレートに見えないインターフェースを提供します。必要に応じて実装的なデザインシステム、リデザインでは監査優先、厳格な飛行前チェック。

デザイン・UI2.7k
M
mockup-device-3d
mockup-device-3d
nexu-io / open-design

iPhone と MacBook の 3D 風静的ショーケース。画面に実際の HTML を埋め込み、ガラスレンズの屈折と 360 度のターンテーブル構図を備えます。

デザイン・UI2.7k
W
wpds
wpds
nexu-io / open-design

WordPress デザインシステム。WordPress 公式のデザイントークン、タイポグラフィ、コンポーネントパターンをテーマやサイトに適用します

デザイン・UI2.7k
A
animate-text
animate-text
pixel-point / animate-text

見出し、ラベル、カウンター、テキスト切り替え向けの正確な JSON 仕様を収録した、厳選テキストアニメーションカタログです。エージェントが soft blur in、typewriter、shared axis、line reveal、stagger、crossfade、kinetic builds などの名称付きエフェクトを選択または変換し、WAAPI、Motion、Framer Motion、GSAP、CSS、Lottie、Rive などの技術スタックで利用する場合に使用します

デザイン・UI2.7k
P
pixelbin-media
pixelbin-media
nexu-io / open-design

Pixelbin の85以上の API を使って画像や動画を生成・編集し、視覚的に魅力的なウェブサイトページを作成します

クリエイティブ・メディア2.7k
R
resume-modern
resume-modern
nexu-io / open-design

モダンでミニマルな履歴書。A4サイズ1ページで、印刷または PDF エクスポートに対応

ドキュメント2.7k
F
figma-create-new-file
figma-create-new-file
openai / skills

新しい空の Figma ファイルを作成します。ユーザーが新しい Figma デザインや FigJam ファイルの作成を求めるとき、または use_figma を呼ぶ前に新しいファイルが必要なときに使用します。必要に応じて whoami でプランを判定します。使い方 — /figma-create-new-file [editorType] [fileName](例: /figma-create-new-file figjam My Whiteboard)

デザイン・UI2.7k
6
60fps-animation
60fps-animation
iart-ai / web-animation-skills

ユーザーが「カクつく CSS アニメーションを修正」「アニメーションを 60fps にする」「レイアウトのスラッシングを防ぐ」「width/height/top/left を滑らかにアニメーションする」「アニメーションを transform に変換」「box-shadow を効率よくアニメーションする」「height auto をアニメーションする」「FLIP アニメーション」「スクロール/ホバーのアニメーションがカクつく理由」について尋ねた場合に、このスキルを使用します。

デザイン・UI2.7k
P
playground
playground
cline / skills

インタラクティブな HTML playground を作成する——.Controls で視覚的に設定でき、ライブプレビューを確認し、プロンプトをコピーできる自己完結型の単一ファイル explorer。ユーザーが某のトピックについて playground、explorer、インタラクティブツールを作って_entropy依頼したときに使う。

開発2.7k
V
video-hyperframes
video-hyperframes
nexu-io / open-design

Hyperframes / Remotion と互換性のある連続フレームアニメーション。オートプレイに対応しています。

クリエイティブ・メディア2.7k
D
deck-swiss-international
deck-swiss-international
nexu-io / open-design

16 列グリッド、1 つの彩度の高いアクセントカラー、22 種のロックされたレイアウト(Klein Blue、Lemon、Mint、Safety Orange)。

ドキュメント2.7k
A
article-magazine
article-magazine
nexu-io / open-design

Huashu / huashu-md-html に着想を得た雑誌記事のレイアウト。Markdown やメモを洗練された長編 HTML エッセイに変換します。

デザイン・UI2.7k
A
android-native-dev
android-native-dev
minimax-ai / skills

Android ネイティブアプリ開発と UI デザインのガイド。Material Design 3、Kotlin/Compose 開発、プロジェクト設定、アクセシビリティ、ビルドのトラブルシューティングを扱う。Android ネイティブアプリの開発前に読んでおくこと。

開発2.7k
P
pptx-visual-assets
pptx-visual-assets
wshobson / agents

編集可能な PPTX デッキにおいて、承認済みの支援アイコン、画像、SVG、図版、インフォグラフィックを選択し、配置するときに使用します。

ドキュメント2.7k
C
color-expert
color-expert
meodai / skill.color-expert

カラーネーミング、色彩論、カラースペース、色の定義など、カラー知識に関わるあらゆる作業――パレット、色ランプ、グラデーション、変換、アクセシビリティ、知覚によるマッチング、顔料の混合、印刷と画面の色の違い、CSS のカラー構文、歴史的な色の用語――で使用する。ユーザーが「color theory」を明示的に言及していない場合でも、色を選ぶ・比較する・生成する・命名する・変換する・説明する際は必ずこのスキルを使う。

デザイン・UI2.7k
P
pptx-slide-specification
pptx-slide-specification
wshobson / agents

編集可能な PPTX デッキの座標明示型 JSON 仕様を作成または修正するときに использовать。

ドキュメント2.7k
L
lean-ux-canvas
lean-ux-canvas
deanpeters / product-manager-skills

チームを Leap UX Canvas v2 による引导で支援します。ビジネス課題の整理、前提の可視化、次に学ぶべきことの定義に引きcontained deliberate för 適宜使用してください。

デザイン・UI2.7k
D
deck-open-slide-canvas
deck-open-slide-canvas
nexu-io / open-design

1920x1080 固定キャンバスのスライドデッキ。React コンポーネント単位での自由な構成が可能で、固定テンプレートには縛られません。

ドキュメント2.7k
M
mantine-form
mantine-form
mantinedev / skills

@mantine/form を使ってフォームを構築します。次のいずれかに該当するときに使います:(1) useForm でフォームをセットアップする、(2) バリデーションルール、スキーマ検証(zod、valibot、arktype)、非同期検証を追加する、(3) ネストしたオブジェクトや配列フィールドを扱う、(4) createFormContext でコンポーネント間にフォーム状態を共有する、(5) 制御モードと非制御モードのどちらを選ぶか決める、(6) form.useWatchValue で描画中にフォーム値を読み取る、(7) 単独の useField フックを使う、(8) useForm、getInputProps、onSubmit、insertListItem、フォーム検証に関わるタスク。

開発2.7k
P
pptx-reference-deck-analysis
pptx-reference-deck-analysis
wshobson / agents

参照用の PPTX を読み取り専用で解析するulianBp用途:構造、テーマ、タイポグラフィ、レイアウトのリズム、診断情報、派生テンプレートカタログ、安全な OOXML パッケージの検査。

ドキュメント2.7k
U
user-story-mapping
user-story-mapping
deanpeters / product-manager-skills

アクティビティ、ステップ、タスク、リリーススライスを配置したユーザーストーマップを作成します。ユーザージャーニーを軸にワークフロー、バックログ、MVP を計画するときに使用します。

開発2.7k
F
focus-engine
focus-engine
dpearson2699 / swift-ios-skills

SwiftUI と UIKit の両方で、キーボード、方向キー、シーンレベルのフォーカス挙動を実装する。@FocusState、defaultFocus、フォーカス値、フォーカス可能なインタラクション、フォーカスセクション、tvOS のジオメトリックフォーカスと Siri Remote の操作、watchOS の Digital Crown 入力、visionOS の接続デバイスフォーカスと視線ホバー/入力ターゲットの違い、macOS の key view loop とフルキーボードアクセス、表示変更後のフォーカス復元、UIFocusGuide によるカスタムフォ lastlyルーティング、UIFocusDebugger によるフォーカスデバッグ Shapes を扱うときに使用する

開発2.7k
E
experience-lwc-base-components-integrate
experience-lwc-base-components-integrate
forcedotcom / sf-skills

特定の UI タスクに適した Lightning ベースコンポーネント(`lightning-*`)を選び、バンドル済みのコンポーネント別リファレンスから完全な API(プロパティ、メソッド、スロット、イベント)を取得し、SLDS を壊すことなく LWC(LWC の `.html`、`.js`、`.css` ファイル)に接続します。ユーザーが「Lightning のモーダル / データテーブル / コンボボックス / レコードフォームが必要」と言う、与えられたユースケースに適した `lightning-*` コンポーネントを尋ねる、LBC の候補リストを求める、ベースコンポーネントがすでに提供する UI を自前で実装しようとしている、LWC バンドルの `.html` / `.js` / `.css` を編集していてベースコンポーネントの選択や接続が必要 —— といった場合に使用してください。「Lightning base component」「LBC」「lightning-combobox」「lightning-datatable」「`lightning-` タグを使う」でも発動します。SLDS のデザイントークン、ブループリント、一般的なスタイル指針の適用には発動しないでください。それらは `design-systems-slds-apply` が扱います。このスキルは `lightning-*` ベースコンポーネントの選択と接続のみを行います。

開発2.7k
P
pptx-deck-context
pptx-deck-context
wshobson / agents

新しい編集可能な PPTX デッキのために、ストーリー、出典、デザインのコンテキストを準備するときに使用します。

ドキュメント2.7k
E
experience-lwr-site-generate
experience-lwr-site-generate
forcedotcom / sf-skills

DigitalExperience メタデータを介して Salesforce Experience Cloud LWR サイトを作成、変更、管理します。ページ、ルート、ビュー、テーマレイアウト、ブランドセットの作成・変更、サイトのプレビュー、ゲスト共有ルール(メタデータタイプ sharingGuestRules)、ゲストユーザーのアクセス権、ゲストユーザーへの共有レコードの作成・変更など、LWR サイトの設定に関わるタスクでは必ず起動します。また、005 で始まる15桁または18桁のゲストユーザー ID が提示された場合も起動します。React やその他の UI バンドルフレームワークでは絶対に起動しません。LWR サイトのみ。

開発2.7k
G
godot-ui
godot-ui
zate / cc-godot

Godot の UI システムに関する深い知識。Control ノード、テーマ、スタイリング、レスポンシブレイアウト、およびメニュー、HUD、イン벤 トリー、ダイアログシステムで一般的な UI パターンを含みます。Godot の UI/メニューの作成やスタイリングを行う場合に使用します。

デザイン・UI2.7k
S
svg-animation
svg-animation
iart-ai / web-animation-skills

ユーザーが「SVG をアニメーション化する」「線を描画するように表示する」「線の描画・署名アニメーションを作る」「形状を別の形状に変形させる」「要素をパスに沿って動かす」「アイコンやロゴをアニメーション化する」「SVG のグラデーションやフィルターをアニメーション化する」と依頼した場合に使用します。CSS、SMIL、GSAP による stroke-dashoffset の描画、パスのモーフィング、パスに沿った動き、アニメーション付きアイコン・グラデーション・フィルターを扱います。

デザイン・UI2.7k
D
drawio-diagrams
drawio-diagrams
stark-ai-de / agent-skills

編集可能なdraw.io図を作成、編集、レビュー、またはエクスポートします。.drawio形式のアーキテクチャ図、フロー図、シーケンス図、ネットワーク図などの技術図が必要な場合に使用します。データプロットやアート画像には使用しません。

デザイン・UI2.7k
O
om-ux-shape
om-ux-shape
open-mercato / skills

漠然とした製品、UI/UX、AI 機能のアイデアを明確な方向性にまとめます。機能の具体化、複雑すぎるフローの簡素化、AI を使うかどうか・どう使うかの決定、画面状態の定義、検証の計画、エンジニアリング向けのデザイン引き継ぎ準備に使用します。

デザイン・UI2.7k
A
animated-readme-logo
animated-readme-logo
stark-ai-de / agent-skills

GitHub README のロゴの作成・変形・アニメーション作成・診断と、検証済みの SVG/PNG/GIF 納品に対応。通常の README の文章やアプリ/サイトのモーションではなく、リポジトリにブランド資産が必要な場合に使用。

デザイン・UI2.7k
L
lightweight-3d-effects
lightweight-3d-effects
freshtechbro / claudedesignskills

Zdog、Vanta.js、Vanilla-Tilt.js を使い、装飾的な要素とマイクロインタラクションに軽量な 3D 効果を与えます。重いフレームワークを使わずに拟似 3D のイラスト、アニメーション背景、視差の傾き効果、装飾的な 3D 要素、控えめな奥行き効果を追加する際に使用します。Zdog の拟似 3D、Vanta.js の背景、Vanilla-Tilt の視差、カードの傾きヒーローセクションのアニメーション、軽量なランディングページのビジュアルなどに関するタスクで発動します。パフォーマンス重視のデザインに最適です。

デザイン・UI2.7k
M
minimal
minimal
bergside / awesome-design-skills

余白、すっきりしたタイポグラフィ、抑制された色使いを重視し、明瞭さと集中しやすさを最大限に高めるシンプルなデザイン。

デザイン・UI2.7k
R
rive-interactive
rive-interactive
freshtechbro / claudedesignskills

ステートマシンベースのベクターアニメーションで、実行時のインタラクティブ性とWeb連携に対応します。インタラクティブなアニメーション、状態駆動型UI、ロジックを備えたアニメーションコンポーネント、または実行時に制御できるデザイナー作成のアニメーションを作成する際に使用します。Rive、ステートマシン、インタラクティブなベクターアニメーション、入力処理付きアニメーション、ViewModelデータバインディング、React Rive連携を含むタスクで起動します。ステートマシンと双方向インタラクションが必要なアニメーション向けのLottieの代替です。

デザイン・UI2.6k
D
doc-kami-parchment
doc-kami-parchment
nexu-io / open-design

温かいパーチメントのキャンバス(#f5f4ed)、モノクロのインクブルーアクセント(#1B365D)、1 つのセリフ書体ファミリ、エディトリアル水準のタイポグラフィ。

ドキュメント2.6k
T
tailwind-v4-shadcn
tailwind-v4-shadcn
jezweb / claude-skills

@theme inline パターンと CSS 変数アーキテクチャを用いて Tailwind v4 と shadcn/ui をセットアップします。4 ステップのパターン:CSS 変数、Tailwind マッピング、ベーススタイル、動画のダークモード。文書化されている 8 種類のエラーを防ぎます。Tailwind v4 を使う React プロジェクトの初期化や、色が反映されない、tw-animate-css のエラー、@theme inline のダークモードの競合、@apply の失敗、v3 からの移行問題mz の修正に有効です。

デザイン・UI2.6k
F
frame-liquid-bg-hero
frame-liquid-bg-hero
nexu-io / open-design

WebGL スタイルの流体ディスプレイスメント背景に引用文のオーバーレイを重ねたもので、動画イントロ、ランディングページのヒーロー、ポスターに向いています。

デザイン・UI2.6k
F
frame-light-leak-cinema
frame-light-leak-cinema
nexu-io / open-design

シネマティックなオープニングや章タイトルカード向けの、フィルム調のライトリーク、グレイン、16:9 レターボックス、大きなセリフ体

クリエイティブ・メディア2.6k
F
frame-data-chart-nyt
frame-data-chart-nyt
nexu-io / open-design

NYT ニュースルームのタイポグラフィ、ずれた順序で現れるアニメーション、そして編集alupe级的チャート(折れ線、棒、区間バンド)。

データ・データベース2.6k
F
frame-flowchart-sticky
frame-flowchart-sticky
nexu-io / open-design

SVG の曲線コネクタ、付箋ノード、そしてホワイトボードのブレストストームらしいカーソル操作。

デザイン・UI2.6k
F
frame-logo-outro
frame-logo-outro
nexu-io / open-design

動画のエンディングやブランド締めのフレーム向けの、セグメント化されたロゴ合成、グロウブルーム、タグライン表示

クリエイティブ・メディア2.6k
P
problem-framing-canvas
problem-framing-canvas
deanpeters / product-manager-skills

MITRE の Problem Framing Canvas を使ってチームをガイドします。ソリューションに踏み込む前に、より明確な問題定義が必要な場合に使用します。

デザイン・UI2.6k
M
micro-interaction
micro-interaction
iart-ai / web-animation-skills

ユーザーが「ホバー/押下エフェクトを追加」「トグルやスイッチをアニメーション化」「アニメーション付きのいいねボタンを作成」「トースト/スナックバーをスライド表示」「ドロワーやモーダルをアニメーション化」「リストの並べ替えや追加/削除をアニメーション化」「共有要素のレイアウト遷移を実装」「UIフィードバックを洗練」と依頼した場合に使用します。Framer Motion(motion/react)と最新のCSSによるUIモーションを扱います。

デザイン・UI2.6k
F
frame-glitch-title
frame-glitch-title
nexu-io / open-design

動画のトランジションやサイバーパンクのヒーロー向けの、デジタルのグリッチ、色収差、データ破損风格的タイトルフレーム

クリエイティブ・メディア2.6k
T
typography-scale
typography-scale
owl-listener / designer-skills

サイズ・ウェイト・行高の関係を持つモジュール式のタイプスケールを作成します。タイポグラフィ構造を確立する場合に使います。行長のみを扱う場合は `readable-measure` を、既存の画面上のタイポを評価する場合は `critique-typography`(visual-critique)を使ってください。

デザイン・UI2.6k
S
svg-animations
svg-animations
supermemoryai / skills

美しいしかもパフォーマンスの高い SVG アニメーションとイラストを作成します。SVG グラフィック、アイコン、イラスト、アニメーションするロゴ、パスアニメーション、変形する形状、ローディングスピナーその他のアニメーション SVG コンテンツの作成を求められた場合に使用します。SMIL アニメーション、CSS 駆動の SVG アニメーション、パス描画エフェクト、シェイプモーフィング、モーションパス、グラデーション、マスク、フィルターを扱います。

デザイン・UI2.6k
C
card-twitter
card-twitter
nexu-io / open-design

投稿と組み合わせて使う Twitter の引用カードまたはデータカード。

デザイン・UI2.6k
O
onboarding-optimization
onboarding-optimization
appeeky / aso-skills

ユーザーがアプリのオンボーディング体験を改善したい、活性化率を上げたい、Day 1 の離脱を減らしたい、初回実行フローを最適化したい的时候に使う。ユーザーが "onboarding"、"first-run"、"activation"、"tutorial"、"day 1 retention"、"new user flow"、"permission prompts"、"sign-up conversion"、"onboarding funnel"、"users dropping off early" などに言及したときに使う。全体の継続戦略については retention-optimization を、ペイウォールの配置については monetization-strategy を参照。

デザイン・UI2.6k
V
vfx-text-cursor
vfx-text-cursor
nexu-io / open-design

動画イントロでワードごとに引用文をONEYLO表示之际使用的、カーソルの光跡、色収差の光線、指向性のフレア。

クリエイティブ・メディア2.6k
C
clean
clean
bergside / awesome-design-skills

十分な余白、読みやすいタイポグラフィ、限定されたカラーパレットで視覚的な雑然さを抑える、シンプルさを重視したデザイン。

デザイン・UI2.6k
S
social-x-post-card
social-x-post-card
nexu-io / open-design

リアリティのある X の投稿カード。エンゲージメント指標(いいね、リポスト、表示数)を備え、動画のオーバーレイや共有用の画像カードに適している。

デザイン・UI2.6k
F
frame-macos-notification
frame-macos-notification
nexu-io / open-design

アプリアイコン、タイトル、本文を備えたリアルな macOS 通知バナー。映像のオーバーレイや、プロダクトのティーザーに向いています。

デザイン・UI2.6k
10,561 件中 781–840 件

MCP は初めてですか?

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

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