mcpField

Skills

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

デザイン・UI

A
animation-best-practices
animation-best-practices
aidenybai / react-scan

レスポンシブで洗練されたインターフェースのためのCSSおよびUIアニメーションパターンです。ホバー効果、ツールチップ、ボタンのフィードバック、トランジションの実装や、ちらつき・揺れなどのアニメーション問題の修正に使用します。

デザイン・UI46
A
app-permission-ux-review
app-permission-ux-review
sylphxai / skills

権限リクエストの UX、同意のタイミング、プライバシーの説明、拒否後の回復、設定への導線、OS のプロンプト、通知のオプトイン、位置情報/カメラ/マイク/写真/連絡先へのアクセス、トラッキングのプロンプト、モバイル・デスクトップ・Web・ゲーム向けの信頼文案を設計・監査する。製品が機微なアクセスを必要としつつ、コンバージョン、審査の承認、アクセシビリティ、ユーザーの信頼を損なってはならないときに使用する。

デザイン・UI46
A
appdrag
appdrag
membranedev / application-skills

AppDrag 連携。Organization を管理する。ユーザーが AppDrag のデータを扱いたい場合に使用する。

デザイン・UI46
A
apply-tweaks
apply-tweaks
bluzir / claude-code-design

pending.yaml のバッファリングされた調整をソース HTML ファイルに適用する。ユーザーが「調整を保存」「調整を適用」「パネルの変更を永続化」と言うか、/apply-tweaks を実行したときに呼び出される。

デザイン・UI46
A
asc-screenshots
asc-screenshots
keremerkan / asc-screenshots

App Store のスクリーンショットページを構築するとき、iOS アプリや iPad アプリ向けの書き出し可能なマーケティング用スクリーンショットを生成するとき、Next.js でプログラムによるスクリーンショット生成器を作成するときに使用する。トリガー:app store、screenshots、marketing assets、html-to-image、device mockup、frameme、asc-client、asc-screenshots。

マーケティング・グロース46
A
autopilot-cad-builder
autopilot-cad-builder
openagentsinc / openagents

openagents の CAD ツールと pane ツールを用いた Autopilot Chat 向けの決定論的 CAD ビルドオーケストレーション。第 1 週の gripper フローを含む。

デザイン・UI46
A
awesome-design-md
awesome-design-md
bighardperson / computer-science-skills-collection

開発者向けの実在するウェブサイト(Vercel、Stripe、Linear、Notion、Figma など)から抽出した 54 個の DESIGN.md ファイルを厳選して収録しています。特定ブランドのデザインシステムに合った UI を作りたい場合、DESIGN.md テンプレートが必要な場合、有名な製品のデザイントークン、カラーパレット、タイポグラフィについて尋ねられた場合、または「[ブランド]風にして」と言われた場合に使用します。一致する参照ファイルを読み込み、デザイン仕様として使用します。

デザイン・UI46
B
beautiful-mermaid
beautiful-mermaid
tdimino / claude-code-minoan

Mermaid ダイアグラムをターミナル表示用の ASCII/Unicode アート、または SVG ファイルとしてレンダリングする。フローチャート、ステートマシン、シーケンス図、クラス図、ER 図の可視化に使用。17 種類のテーマ(vellum、tokyo-night、catppuccin、nord、dracula、github など)に対応し、--colors JSON でカスタムカラーも指定できる。

デザイン・UI46
C
canva
canva
okou-ai / okou-skills

説明はまだありません

デザイン・UI46
C
challenge
challenge
tranz007 / ux-skills

実行前に UX のアイデア、要件、フロー、機能、設計方針を問いただす。デザイナーが挑戦を求めている、前提を明らかにしたい、前提のレッドチームレビューを望む、または提案された作業がそもそも存在すべきかを試す厳しい問いを必要とする場合に使用する。

デザイン・UI46
C
ck:frontend-development
ck:frontend-development
binjuhor / shadcn-lar

モダンなパターンで React/TypeScript フロントエンドを構築。コンポーネント、Suspense、遅延読み込み、useSuspenseQuery、MUI v7 スタイリング、TanStack Router、パフォーマンス最適化に使用。

開発46
C
creative-tim-ui

Creative Tim UI ブロックライブラリのアシスタント。creative-tim.com/ui から UI ブロック/コンポーネント/ページを追加、生成、変更する際に使用。設計思想(ミニマリズム、95% ルール、リサーチ優先)、ブロックの探索、2 種類の CLI インストール方法、PRO API キーの設定、Creative Tim のデザインルール(オレンジのブランド、shadcn/ui ベース、Tailwind v4)を扱う。意図的に抑制されたブロックを生成し、過剰にはしない。

デザイン・UI46
C
css-grid-math
css-grid-math
lvtd-llc / skills

グリッド座標、ライン配置、span、負のインデックス、fr 単位、minmax()、fit-content()、repeat()、auto-fill、auto-fit の CSS Grid レイアウト計算を導出・デバッグする。グリッドシステムの構築、トラックサイズ計算の説明、fr 配分のトラブルシューティング、ライン番号によるアイテム配置、レイアウトスケッチの CSS Grid 数式への変換に用いる。

デザイン・UI46
C
Customer Journey Mapper
eddiebe147 / claude-settings

顧客のジャーニーを可視化し、タッチポイントと体験を最適化します

マーケティング・グロース46
D
d2-00-angular-tailwind-init
d2-00-angular-tailwind-init
softinter-chiangrai / up-ai-skill-training

up-app(Angular 22 + Tailwind CSS)をスキャフォールドする。CRUD ドリル Day 2 ステップ 0。トリガー:'day2 step0'、'create up-app'。

開発46
D
design
design
nicohodt / claude-code-ui-ux-skill

包括的なデザインスキル:ブランドアイデンティティ、デザイントークン、UI スタイリング、ロゴ生成(55スタイル、Gemini AI)、コーポレートアイデンティティプログラム(50種類の成果物、CIP モックアップ)、HTML プレゼンテーション(Chart.js)、バナーデザイン(22スタイル、ソーシャル/広告/ウェブ/印刷)、アイコンデザイン(15スタイル、SVG、Gemini 3.1 Pro)、ソーシャル写真(HTML→スクリーンショット、複数プラットフォーム対応)。操作:ロゴのデザイン、CIP の作成、モックアップの生成、スライドの作成、バナーのデザイン、アイコンの生成、ソーシャル写真やソーシャルメディア画像の作成、ブランドアイデンティティ、デザインシステム。プラットフォーム:Facebook、Twitter、LinkedIn、YouTube、Instagram、Pinterest、TikTok、Threads、Google Ads。

デザイン・UI46
D
design-review
design-review
bitwarden / ai-plugins

Bitwarden デザインチームの行動規範と 30/60/90 クリティークフレームワークを組み合わせたもの — 段階に応じたクリティーク、デザイナーではなくプロダクトに焦点を当て、60% と 90% の段階ではコンテンツをビジュアルデザインと並行して評価する。

デザイン・UI46
D
design-sprint
design-sprint
wdavidturner / product-skills

「デザインスプリントを実施」「5 日間のスプリント」「1 週間でプロトタイプを作成」「構築前にアイデアをテスト」「Jake Knapp sprint」と依頼された場合に使用します。チームが 5 日間で課題からテスト済みのプロトタイプまで進めるのを支援します。Google Ventures の Jake Knapp が作成した Design Sprint フレームワークは、数か月分の作業を集中した 1 週間に凝縮します。

デザイン・UI46
D
design-system
design-system
nicohodt / claude-code-ui-ux-skill

トークンアーキテクチャ、コンポーネント仕様、スライド生成。3 層のトークン(primitive→semantic→component)、CSS 変数、間隔/タイポグラフィのスケール、コンポーネント仕様、戦略的なスライド作成を扱います。デザイントークン、体系的なデザイン、ブランドに準拠したプレゼンテーションに使用します。

デザイン・UI46
D
design-system
design-system
sickn33 / agentic-awesome-skills

フロントエンドデザインにおける機械的な実装不変条件:トークンアーキテクチャ、タイポグラフィの階層、読み込み順序、FOUT の防止、クロームの安定性、モーションのタイミング、色の意味体系。コンポーネント、ページ、デザインシステムの構築時にデザインと併用します。

デザイン・UI46
D
design-variations
design-variations
aa-on-ai / agentic-design-system

UI の方向性やインタラクションの選択が未確定なとき、または選択肢を求められたときに、意味のある代替案を検討する。確定済みの方向性や小さな修正は対象外。

デザイン・UI46
D
docx-design-agent
docx-design-agent
tivojn / docx-design-agent

python-docx と AppleScript を用いた macOS 向けのエキスパート Word 文書デザインエージェント。高いデザイン品質を備えた魅力的でプロフェッショナルな文書を作成・編集する。使用場面:(1) python-docx で新しい Word 文書をゼロから作成する、(2) 既存の .docx ファイルを編集または再設計する、(3) カスタムデザイン(表紙ページ、スタイル付き表、コールアウトカード、プルクォート、サイドバー、KPI パネル)を備えた文書を構築する、(4) AppleScript IPC 経由で文書をライブ編集する(テキスト、フォント、段落、検索/置換、フィールド、目次)、(5) macOS 上で AppleScript 経由でフィールドや目次を更新し、または PDF にエクスポートする、(6) 文書の表紙とコンテンツ用の AI 画像を生成する、(7) デザインのベストプラクティスを踏まえた python-docx コード生成を必要とするあらゆるタスク。

ドキュメント46
D
dojo-steve-jobs
dojo-steve-jobs
philipjoubert / dojo-public

1 名の専門家によるカスタムパネル — 厳選された名簿。ユーザーが「ask dojo」と言う、Jobs を名指しする、または担当領域について質問するときに使用。ロード済み: Steve Jobs(プロダクト、デザイン、採用、ポジショニング)。

デザイン・UI46
D
draggable-dom-with-lit
draggable-dom-with-lit
rodydavis / skills

CSS transforms と slots を使った Lit web component で、インタラクティブにドラッグできる DOM を作成する方法を学ぶ。キャンバスのような環境で HTML や SVG 要素を操作できる。

開発46
D
draw-io

draw.io 図の作成、編集、レビュー。.drawio XML の編集、PNG 変換、レイアウト調整、AWS アイコンの利用。

デザイン・UI46
E
editorial-pptx-deck
editorial-pptx-deck
sharonzhang98 / editorial-pptx-deck

エディトリアルでミニマルなスタイルの、編集可能なビジネス向け PPTX デッキを作成します。白い背景、Georgia のセリフ体タイトル、赤いアクセントバー 1 本、全高の写真セクション区切りを使用します。HTML スライドから、ネイティブテキストボックスを備えた実際に編集可能な .pptx を出力します。このすっきりとしたエディトリアルスタイルまたは「写真区切り」スタイルのビジネスレポート、ピッチデッキ、PPT、PPTX をユーザーが求めている場合、またはこのスキルに言及した場合に使用します。

ドキュメント46
E
elite-accessibility
elite-accessibility
rshvr / elite-web-design

ウェブアニメーションのモーションアクセシビリティと WCAG 準拠。重要:アニメーションを実装する際は、このスキルを elite-gsap または elite-css-animations と併せて読み込むこと。prefers-reduced-motion(CSS と GSAP のパターン)、WCAG のコントラスト要件、APCA、フォーカス管理、キーボードナビゲーション、タッチ操作パターン、スクリーンリーダーへの配慮を扱う。以下について尋ねられたときに使用:モーションの低減、モーション感受性、前庭障害、アクセシビリティ、a11y、WCAG、コントラスト比、フォーカススタイル、タッチターゲット、セーフエリア、ジェスチャーのアクセシビリティ、アニメーションをアクセシブルにすること。モバイル向けのタッチ操作パターンも扱う。

デザイン・UI46
E
elite-ux-strategy
elite-ux-strategy
rshvr / elite-web-design

プレミアムサイト向けのコンバージョン最適化と UX 戦略。以下の場合に使用:コンバージョン率最適化(CRO)、サインアップフロー、チェックアウト最適化、料金ページ、CTA、ヘッドライン、コピーライティング、A/B テスト、リード獲得、カート放棄、オンボーディング、リテンション、ソーシャルプルーフ、 testimonial、トラストシグナル、緊急性、希少性、成長、バイラルループ、ナビゲーションパターン、フォームバリデーション、トースト通知、エラー処理、空の状態、またはビジネス成果に影響する設計判断を行う必要がある場合。このスキルは設計上の選択の背後にある「why」を提供する。視覚的階層については elite-design-core を参照。フォーム実装時のフォーカス管理と aria パターンには elite-accessibility を読み込む。

マーケティング・グロース46
E
evangelion-design
evangelion-design
ckorhonen / claude-skills

NERV 風の司令センター、HUD、心理グラフ、シンクモニター、侵入警告、タイトルカードの表現を取り入れた、Evangelion に着想を得たオリジナルのウェブ・モバイルインターフェースをデザインします。鋭い幾何学形状、戦術的なタイポグラフィ、整理された情報密度、危険を優先する配色、ワイヤーフレームの分析フォーム、反復する計器配列、機械的なアニメーションを用います。Evangelion、NERV、アニメの管制室 UI、SF 軍事計器、診断オーバーレイ、心理グラフ表示、シンクモニター、カウントダウン画面、またはプロダクト UI のドラマチックなシステム状態アニメーションを求められた場合に使用します。

デザイン・UI46
E
excalidraw
excalidraw
bahayonghang / my-ai-cli-toolkit

commandsやskillsなどを含む、私のAIエージェント設定

デザイン・UI46
E
extract-design-md
extract-design-md
nathanonn / agent-skills

ウェブサイトのデザインシステムを DESIGN.md ファイル(google-labs-code/design.md 形式)に抽出する。ユーザーがサイトの URL を提示し、その視覚的アイデンティティ——色、タイポグラフィ、角丸/余白のスケール、コンポーネント、ブランドの印象——を捕捉、リバースエンジニアリング、クローン、または文書化したい場合に使用する。次のような表現でトリガーされる:「<url> からデザインシステムを抽出して」「<site> から DESIGN.md を作って」「<site> のデザイントークンを取得して」「<site> のカラーパレット / フォントは?」「自分の UI を <site> のようにしたい」。playwright-cli で実際のページをいくつかサンプリングし、CSS カスタムプロパティ + 計算済みスタイルを読み取り(正確で低コスト)、文章用に明るいスクリーンショットを撮り、公式リンターで検証する。再利用可能なデザイン仕様が目的の場合は、スクリーンショットを目視で確認するよりもこれを優先する。

デザイン・UI46
F
figma-pixel-implement
figma-pixel-implement
fudesign2008 / open-skills

エクスポート結果に忠実なアセット、画面×状態のインベントリ、出荷対象の親コンポーネント内で測定したコントロール、対象リポジトリ内の永続的な living spec(状態/モード/根拠、必須の Assets サブセクション)を用いて Figma UI を実装します。コンポーネントワークベンチ(Storybook など)がある場合は、インベントリを網羅するストーリーと仕様を固定するテストも提供します。Figma の URL/ノードからの実装や、ピクセルレベルの再現に使用します。ファイルにモードがあるか、プロジェクトにテーマ切り替え機能がある場合は、ライト/ダークも対象です。同じ実行内で figma-pixel-verify を使ってレイアウト済みフレームを測定し、合格するまで続けます。反復の間に人が介在する必要はありません。トリガー — 「像素级还原」「按稿实现」「Figma 对齐实现」「还原 Figma」「figma 保真实现」「暗黑模式还原」「多主题保真实现」 / implement from Figma、pixel restore、dark mode implement、multi-theme fidelity。コード→Figma のキャンバス書き込み、デザインのない自由な UI、実装後の整合性確認のみには使用しないでください(figma-pixel-verify を使用)。

デザイン・UI46
F
figma-pixel-verify
figma-pixel-verify
fudesign2008 / open-skills

実行中の UI のレイアウト済みフレームを、Figma の living artifact(インベントリ + 仕様 + Verify セクション)と照合して測定します。実装後のピクセル単位の整合性確認 / Figma との照合に使用します。ライト/ダークやホバー/バリアント状態も対象です(テーマと状態を切り替え、各行を測定)。ドキュメント以外の UI には layout-probe を使用します。ソース定数の比較は合格になりません。人に確認せず、同じ実行内で全体が PASS になるまで修正と再測定を行います。重要な行が未測定の場合、全体は失敗です。チェッカーは終了コード 0 で終了する必要があります。layout probe は出荷対象の親コンポーネントをマウントします。開けるチャネルでは、保存済みの空でないスクリーンショットファイルを示す必要があります。layout-probe は not-openable としても構いません。トリガー — 「检查像素对齐」「对照 Figma 验收」「设计保真检查」「是否对齐稿面」「figma 保真检查」「暗黑模式验收」「多主题保真检查」 / verify Figma fidelity、pixel check、dark mode fidelity check、multi-theme verify。主要な実装ワークフローとしては使用しないでください(figma-pixel-implement を使用)。コード→Figma にも使用しないでください。

テスト・品質46
F
flutter-design
flutter-design
musabekisakov-imj / flutter-design-engineer

リポジトリの調査からレンダリング検証まで、プロダクトを考慮した Flutter UI の設計と再設計を統括します。新しい Flutter 画面、複数画面のフロー、大幅なビジュアル刷新、デザイン主導の実装、または監査、デザインシステム、実装、モーション、アクセシビリティ、ビジュアル QA の各ワークフローを振り分ける必要がある曖昧な Flutter UI の依頼に利用します。

デザイン・UI46
F
form-cro

サインアップ/登録以外のフォームを最適化したい場合に使用します。リード獲得フォーム、問い合わせフォーム、デモ依頼フォーム、応募フォーム、アンケートフォーム、購入フォームなどが対象です。「フォーム最適化」「リードフォームのコンバージョン」「フォームの摩擦」「フォーム項目」「フォーム完了率」「問い合わせフォーム」などの言及がある場合にも使用します。サインアップ/登録フォームには signup-flow-cro を、フォームを含むポップアップには popup-cro を参照してください。

マーケティング・グロース46
F
frontend-design
frontend-design
answerzhao / agent-skills

UI スタイルの要件を、体系的なデザイントークン、アクセシビリティ準拠、創造的な実装を備えた本番運用可能なフロントエンドコードに変換する。Web サイト、Web アプリ、React/Vue コンポーネント、ダッシュボード、ランディングページ、その他デザインの一貫性と美的品質の両方が求められる Web UI を構築するときに使用する。

デザイン・UI46
G
gluestack-components

gluestack-ui コンポーネントで UI を構築する際に使用します。コンポーネントのコンポジション、バリアント、サイズ、状態、アクセシビリティ属性、React および React Native のプラットフォーム固有の考慮事項を扱います。

デザイン・UI46
G
goose-graphics
goose-graphics
gooseworks-ai / goose-skills

Agent Skills エコシステム(Claude Code、Claude Desktop、Claude Cowork、Claude Design、Goose、Cursor、Codex)向けのポータブルなビジュアルスキルパック。gooseworks コマンドラインでコミュニティ公開のスタイルとフォーマットを検出し、参照画像に対して extract-style ワークフローを実行し、Playwright でレンダリング済み PNG を書き出します。

デザイン・UI46
H
handoff
handoff
tranz007 / ux-skills

ユーザーインテント、挙動、状態、デザインシステムの使用、アクセシビリティ要件、依存関係、受け入れ時の挙動、未解決の疑問を保持して、UX の作業をエンジニアリング向けに準備する。デザイナーが「get this ready for engineering」と言ったとき、ハンドオフ、ビヘイビアコントラクト、実装可能なチケット内容が必要なとき、またはエンジニアリングに推測させたくないときに使用する。

デザイン・UI46
H
hierarchy-of-engagement
hierarchy-of-engagement
wdavidturner / product-skills

「define our core action」「North Star metric」「accruing benefits」「improve retention mechanics」「hierarchy of engagement」「Sarah Tavel framework」と尋ねられた場合に使用します。消費者向け製品が、長期的な継続利用を促す行動と便益を特定するのに役立ちます。Benchmark の Sarah Tavel が作成した Hierarchy of Engagement フレームワークは、コアアクションから損失の拡大に至る進展を示します。

マーケティング・グロース46
I
icon-generation
icon-generation
michaelboeding / skills

透明な背景を持つアプリアイコンを生成します。トリガーには "generate icon"、"create icon"、"make icon"、"app icon"、"favicon"、"icon for"、"logo icon"、"icon set"、"icon pack"、"transparent icon" が含まれます。アプリアイコン、favicon、UI 要素に適した透明な背景の正方形 PNG アイコンを生成します。

デザイン・UI46
I
imagegen
imagegen
ckorhonen / claude-skills

ユーザーが OpenAI Image API 経由で画像の生成または編集を依頼したときに使用(例: 画像生成、編集/インペイント/マスク、背景の削除または置換、透過背景、商品画像、コンセプトアート、カバー、バッチバリエーション)。同梱の CLI(`scripts/image_gen.py`)を実行し、実際の呼び出しには `OPENAI_API_KEY` が必要。

クリエイティブ・メディア46
I
init-pure-admin-iconify
init-pure-admin-iconify
ruan-cat / monorepo

vite+vue3 プロジェクトに pure-admin スタイルの iconify アイコン描画体系(オフライン + オンライン + useRenderIcon による統一描画)を初期化する。ユーザーが「初始化 iconify」「pure-admin 图标方案」「ReIcon/useRenderIcon」「离线图标接入」「后台项目图标基础设施」に言及したときにこのスキルを使う。

開発46
I
interface-design
interface-design
master5d / claude-design-skills

このスキルは、ダッシュボード、管理パネル、アプリ、ツール、インタラクティブな製品などのインターフェース設計向けです。マーケティングデザイン(ランディングページ、マーケティングサイト、キャンペーン)には使用しません。

デザイン・UI46
L
lavish-axi
lavish-axi
kunchenguid / lavish-axi

lavish-axi CLI を使って、複雑または視覚的なエージェントの応答を、ユーザーが注釈を付けてフィードバックを送れるリッチでレビュー可能な HTML アーティファクトに変換する。計画、比較、図、表、コード diff、レポートなど、文章よりも視覚的に把握しやすいものを提示する直前に使用する。

ドキュメント46
M
markdown-content
markdown-content
joyco-studio / skills

Next.js で fumadocs-mdx、rehype-pretty-code、shiki を使って markdown コンテンツページ(ブログ、法務、変更履歴)を構築するためのガイド。MDX コレクション、自己完結した本文タイポグラフィ、シンタックスハイライトされたコードブロック、レンダリングされた markdown とカスタム React コードコンポーネントの見た目を揃えるコンポーネントマッピングを扱う。ドキュメント UI フレームワークは不要。

開発46
M
mgdis-stencil-components

説明はまだありません

開発46
M
minoan-frontend-design
minoan-frontend-design
tdimino / claude-code-minoan

独自性の高いプロダクション品質のフロントエンドインターフェースを構築する — ウェブサイト、ランディングページ、ダッシュボード、React コンポーネント、HTML/CSS レイアウト、奥行きパララックス付きのエディトリアルヒーロー(Astryx パターン)、ポインター反応型の流体エフェクト、ピクセルグリッチの canvas ヒーロー、ターミナル風ツールパネルのジオラマ(Composio パターン)。ありきたりな AI 的な美観を避ける。web UI、styling、beautify、frontend design、dashboard、landing page、React component、editorial hero、glitch hero、dev-tool landing page でトリガーする。

デザイン・UI46
M
moai-design-tools
moai-design-tools
modu-ai / moai-adk

Figma MCP、Pencil レンダラー、Pencil からコードへのエクスポートを扱うデザインツール連携のスペシャリスト。Figma からデザインコンテキストを取得するとき、Pencil デザインをレンダリングするとき、React/Tailwind コードへエクスポートするときに使用。

デザイン・UI46
M
multi-touch-canvas-with-flutter
multi-touch-canvas-with-flutter
rodydavis / skills

マルチタッチに対応した Flutter キャンバスを作成し、パン、ズーム、オブジェクト操作を実現して、よくあるジェスチャー認識の競合を克服する方法を学ぶ。

開発46
O
oma-design
oma-design
gracefullight / stock-checker

ビジュアルシステム、DESIGN.md、リデザインの方針を定義またはレビューします。タイポグラフィ、レイアウト、配色、モーション、インタラクションデザインの意思決定に使用します。

デザイン・UI46
P
paper2reel
paper2reel
microsoft / researchstudio

paper2poster の出力を sidecar content_alignment.json を介して slide/video deck のフレームと整列させるインタラクティブな HTML ビューアを構築する。元の poster、PPTX、blog の成果物は変更しない。

ドキュメント46
P
planning-a11y-improvement
planning-a11y-improvement
masup9 / a11y-specialist-skills

組織のアクセシビリティ成熟度を評価し、ロードマップ、KPI、ステークホルダー向け資料を含む長期的な改善計画を作成する。特定サイトの WCAG 監査の実行計画には planning-wcag-audit を使用する。

デザイン・UI46
P
polar-elements
polar-elements
crafter-station / elements

Elements レジストリから Polar のマネタイズコンポーネントをインストールする。価格カード、スポンサーグリッド、サブスクリプションバッジ、収益表示、ライセンスキー入力が必要な場合に使用する。"polar"、"monetization"、"pricing card"、"subscription badge"、"sponsor grid"、"license key"、"revenue card"、"sponsorship"、"pricing page" でトリガーする。

デザイン・UI46
P
popup-cro

ポップアップ、モーダル、オーバーレイ、スライドイン、バナーを目的とされた変換のために作成・最適化したいときに使います。「exit intent」「popup conversions」「modal optimization」「lead capture popup」「email popup」「announcement banner」「overlay」への言及ABOUTfirmwhen 発動します。ポップアップ以外のフォームについては form-cro を、ページ全体の変換最適化については page-cro を参照してください。

マーケティング・グロース46
P
power-bi-report-design
power-bi-report-design
datacoolie / powerbi-skills

PBIR JSON の生成前に、Power BI レポートのレイアウト設計、グラフの種類の選択、ページ構成の計画、テーマの選択、データストーリーテリングの適用を行います。`power-bi-report-authoring` に渡す設計仕様書と公式標準の `Design Brief:` 契約(設計アイデンティティ、ページアーキタイプ、機械的な layout_contract)を作成します。Microsoft の `powerbi-report-cli` の `design` モード(トーン、シグネチャー、アーキタイプルーター、グラフ選択、色、タイポグラフィ、レイアウト、インタラクティビティ、アクセシビリティ、既存レポートの再設計、事前チェックリスト)を対象とします。レポートの設計、ダッシュボードレイアウトの計画、ビジュアライゼーションやグラフ種類の選択、テーマやパレットの選択、ナビゲーションの計画、既存レポートの再設計や評価、要件に基づく設計仕様書の作成を求められた場合に使用します。PBIR JSON の生成、レポート構造の検証、セマンティックモデルの構築には使用しないでください(`power-bi-report-authoring` / `power-bi-semantic-model` を使用)。

デザイン・UI46
P
prototype
prototype
carlitose / agent-skills

本番コードに着手する前に、設計、ロジック、データモデル、状態機械、UI のいずれか 1 つの疑問に答えるための使い捨てプロトタイプを作成する。プロトタイプ作成、アプローチの妥当性確認、UI のモックアップ、設計案の検討、フローの比較、使い捨てのコードによる不確実性の低減をユーザーが求めたときに使用する。

開発46
P
prototype
prototype
jayden-dang / skills

設計上の問いに実行可能な答えが必要なときに使う — ユーザーが望んでいるのは

開発46
P
prototype-web
prototype-web
nexu-io / html-anything

ナビゲーション、ヒーローセクション、機能セクション、CTA を含む、クリック可能な機能的な Web プロトタイプ

デザイン・UI46
R
radix-primitives
radix-primitives
yonatangross / orchestkit

ダイアログ、ポップオーバー、ドロップダウンなど向けの Radix UI のスタイルなしアクセシブルプリミティブ。カスタムのアクセシブルコンポーネントを構築するとき、shadcn の内部を理解するとき、または多態的なコンポジションが必要なときに使用する。

デザイン・UI46
10,586 件中 9421–9480 件

MCP は初めてですか?

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

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