mcpField

Skills

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

デザイン・UI

T
tuzi-xhs-images
tuzi-xhs-images
tuziapi / tuzi-skills

10 種類のビジュアルスタイルと 8 種類のレイアウトで、小紅書向けインフォグラフィックシリーズを生成します。コンテンツを 1~10 枚のカートゥーン風画像に分割し、小紅書でのエンゲージメントに合わせて最適化します。「小紅書の画像」「XHS画像」「小紅書での紹介」に言及した場合や、中国語圏のソーシャルメディア向けインフォグラフィックが必要な場合に使用します。

マーケティング・グロース169
W
web-prototype-taste-editorial
web-prototype-taste-editorial
nexu-io / open-design

エディトリアル・ミニマリストのWebプロトタイプ。温かみのあるモノクロのキャンバス、セリフ体のディスプレイ書体とグロテスク体の本文書体、1pxの極細ボーダー、彩度を抑えたパステルカラーのチップ、ゆとりある大きな余白、雰囲気のある微細な動きを備えます。Leonxlnx/taste-skill `minimalist-skill`から抽出。

デザイン・UI169
W
wireframe-skill
wireframe-skill
podo / design-agent-skills

自然言語の説明からワイヤーフレームを生成し、機械可読なJSON(.wireframe.json)と、ドラッグ&ドロップでの並べ替えや取り消し/やり直しに対応する単体のインタラクティブHTMLプレビューを出力します。Python 3とブラウザーが必要です。デザインツールのアカウントは不要です。

デザイン・UI169
A
android-ux
android-ux
rcosteira79 / android-skills

Android UI の設計またはレビュー時に使用します。タッチターゲット、間隔、ナビゲーションパターン、アクセシビリティ、アニメーションのタイミング、プラットフォームの慣習を含む Material Design 3 の UX 原則を適用します。画面を10カテゴリで評価する M3 準拠監査を含みます。デザインレベルの判断により compose スキルを補完します。

デザイン・UI168
A
anydesign
anydesign
uxkero / anydesign

スクリーンショット、ウェブサイト URL、Figma ファイルのデザインを、トークン、コンポーネント、レイアウト、ブランドルールを含む design.md に抽出します。または、要素(ナビゲーションバー、カード、イラスト)を1つ選び、再構築用または画像生成用プロンプトとともに element.md にまとめます。ユーザーがビジュアルデザインの記録、再現、監査、リバースエンジニアリング(デザインシステム、配色、タイポグラフィ、スタイル)を希望する場合に使用します。

デザイン・UI168
B
blossom-carousel-vue

Blossom Carousel Vue または Nuxt の統合に関する作業に使用します。インストール、コンポーネント登録、スタイル設定、使用例、Tailwind の例、アクセシビリティや a11y のガイダンス、ルート要素のカスタマイズ、ナビゲーションコントロール(BlossomPrev、BlossomNext、BlossomDots、BlossomDot)、コマンドイベント、オーバースクロールイベント、Vue 固有のカルーセル実装が対象です。

開発168
C
chat-ui
chat-ui
101-skills / superpowers

ui.inference.sh が提供する React/Next.js 向けチャット UI のビルディングブロック。コンポーネント:コンテナ、メッセージ、入力、入力インジケーター、アバター。機能:チャットインターフェース、メッセージリスト、入力処理、ストリーミング。用途:カスタムチャット UI の構築、メッセージングインターフェース、AI アシスタント。トリガー:chat ui、chat component、message list、chat input、shadcn chat、react chat、chat interface、messaging ui、conversation ui、chat building blocks

デザイン・UI168
C
claude-design-critic
claude-design-critic
onewave-ai / claude-skills

ウェブサイトや UI を監査して AI 生成らしさを取り除きます。デザインとコピーの両面から、テンプレート生成に見せるパターンを見つけ、編集的で上質、人の手で作られた印象に近づけるための具体的で優先順位付きの修正案を提示します。レイアウト、色、書体、余白、動き、アクセシビリティ、そして文章をレビューします。フロントエンドの構築・生成後や、サイトが「悪くないがありきたり」に見える理由が分からないときに使用します。

デザイン・UI168
D
data-viz-agent
data-viz-agent
podo / design-agent-skills

D3.js、Chart.js、Matplotlib、Plotlyを使うデータ可視化エンジニアエージェントです。知覚上の正確さに基づいて視覚表現を選び、WCAG AAのコントラスト、色覚多様性に配慮した配色、キーボードとスクリーンリーダーへの対応を徹底します。データの関係性に適したチャートタイプも選択します。上流版はClaude Codeのサブエージェント定義で、ここではスキルとしてインストールされます。

データ・データベース168
D
design-with-claude
design-with-claude
podo / design-agent-skills

決定論的なデザインシステム監査と、スラッシュコマンドとして使えるデザイン専門家一式を提供します。`npx dwic-audit`はWCAGのコントラスト計算とトークン解析を使い(LLMは不使用)、色、タイポグラフィ、余白、アクセシビリティ、フォーム、ナビゲーション、モーション、コピーなどのカテゴリでプロジェクトをスキャンし、検出事項を修正担当の専門家に振り分けます。専門分野は、視覚的階層、インタラクションデザイン、デザインシステム設計、タイポグラフィ、色、余白、モーション、フォーム、ナビゲーション、ダッシュボード、モバイル、ランディングページ、認証UX、ヘルスケアUX、B2B SaaS、Eコマース、ダークモード、エラー処理、オンボーディング、データ可視化です。Claude Codeプラグインとしてインストールされ、コマンドは実行時依存関係のない純粋なMarkdownです。

デザイン・UI168
G
google-stitch-skills
google-stitch-skills
podo / design-agent-skills

デザインからコードへのパイプライン向けGoogle Stitch公式スキルです。Stitch画面の生成と編集、DESIGN.mdとSITE.mdの管理、プロンプトの強化、React / React Native / shadcn/uiコンポーネントの生成、コードからデザインへのアップロード、反復的なStitch構築ループを扱います。

デザイン・UI168
I
implementing-mcp-ui-apps
implementing-mcp-ui-apps
posthog / posthog

MCP UI アプリの追加ガイドです。Claude Desktop などの MCP クライアントでツールの結果を表示するインタラクティブな可視化を扱います。MCP ツールに新しい詳細ビューやリストビューを追加する場合、products/*/mcp/apps/ にビューコンポーネントを作成する場合、または YAML でツールを UI アプリにリンクする場合に使用します

開発168
I
interfaces-that-feel
interfaces-that-feel
podo / design-agent-skills

技術的には正しいものの平板な UI を、感情的な共鳴という視点から捉えます。ユーザーの感情を、具体的なコピー、モーション、インタラクションの変更に落とし込みます。

デザイン・UI168
J
journey-mapping
journey-mapping
cuellarfr / design-skills

カスタマージャーニーマップ、サービスブループリント、エクスペリエンスマップ、共感マップなどの合意形成用図表を作成します。図の種類の選定、内容構成、図示の記法、合意形成ワークショップをガイドします。

デザイン・UI168
M
make-interfaces-feel-better
make-interfaces-feel-better
boraoztunc / skills

インターフェースを洗練させるためのデザインエンジニアリング原則です。UIコンポーネントの構築、フロントエンドコードのレビュー、アニメーション、ホバー状態、シャドウ、ボーダー、タイポグラフィ、マイクロインタラクション、表示・終了アニメーションなど、あらゆるビジュアル調整に使用します。UIの磨き込み、デザインの詳細、「もっと良い感じに」「何か違和感がある」、段階的なアニメーション、角丸、視覚的な位置合わせ、フォントスムージング、等幅数字、画像の輪郭、ボックスシャドウなどで使用します。

デザイン・UI168
M
marp-slides
marp-slides
podo / design-agent-skills

厳選されたプレゼンテーション例、SVG チャート、ダッシュボードコンポーネント、ダーク/ライトテーマのライブラリを備えた Marp プレゼンテーションスキル。Marp フレームワークでレンダリングする Markdown プレゼンテーションのスライド構成とビジュアル品質のパターンを学べます。

ドキュメント168
M
micro-interactions
micro-interactions
solinkz / micro-interactions-skill

モバイルアプリ、Web アプリ、レスポンシブウェブサイト向けのマイクロインタラクションの専門家です。マイクロインタラクション、アニメーション、トランジション、モーションデザイン、ジェスチャーフィードバック、ハプティクス、ローディング状態、スケルトンスクリーン、プルして更新、スワイプ操作、スクロールアニメーション、ボタン状態、フォーム検証フィードバック、トースト通知、モーダル、ドロップダウン、トグル、進捗インジケーター、共有要素トランジション、ばね物理、イージング曲線、モーショントークン、またはユーザー操作に視覚・触覚・聴覚フィードバックを提供するインタラクションの追加、構築、修正、監査、相談をユーザーが求めた場合に使用します。次の語句に反応します:“micro-interaction”“animation”“transition”“motion”“easing”“spring”“gesture”“haptic”“feedback”“loading state”“skeleton”“shimmer”“pull to refresh”“swipe”“drag”“hover effect”“press state”“focus ring”“scroll animation”“parallax”“stagger”“orchestration”“reduced motion”“View Transitions”“layout animation”“shared element”“hero animation”“morphing”“Framer Motion”“GSAP”“Lottie”“Rive”“React Spring”“anime.js”、またはインターフェースを「使いやすく」「生き生きと」「きびきびと」「レスポンシブに」「洗練された」ものにしたいという依頼。

デザイン・UI168
M
motion-and-haptics
motion-and-haptics
zakariaf / flutter-skills

フレームワークのデフォルトではなく、設計されたインタラクションフィードバックを強制する。コミットを伴うすべてのインタラクションは同一フレーム内で確認され、モーションは状態を装飾するが状態そのものにはならない(アニメーションをオフにしても最終状態は同一)。設計時に、各モーメントがトリガー、duration ロール、ハプティクス枠、縮小モーション時のフォールバックを宣言する命名済みカタログを用意する。ハプティクスは HapticTheme のイベントから強度へのマップとして、コミットフレームでちょうど一度だけ発火する(アニメーションフレームごと、合流した入力ごとには決して発火せず、エラーに heavyImpact は使わない)。単一の中央トグルで制御する。すべてのアニメーションは中断可能で、タップすると最終状態に解決される。祝祭演出は有界で一度だけ再生され、ループも入力のブロックもしない。すべての繰り返しアニメーションには明示的な停止条件がある(ルート離脱、バックグラウンド、縮小モーション)。フィードバックを複数チャネルで提供し、縮小モーションでもハプティクスと音が生き残るようにする。アニメーション、成功・エラー状態、ハプティクス、祝祭演出、画面遷移を追加または調整するときに使用する。

デザイン・UI168
P
pixel-art-infographic-creator
pixel-art-infographic-creator
curiositech / some_claude_skills

レトロな16ビットSNES風のピクセルアート図表やインフォグラフィックを生成します。回復教育用ビジュアル、フローチャート、データ可視化、ディザリングと限られたパレットを使ったプロセス図に対応します。

クリエイティブ・メディア168
S
syncfusion-react-daterangepicker
syncfusion-react-daterangepicker
syncfusion / react-ui-components-skills

日付範囲の選択、予約システム、レポート画面向けにSyncfusion React DateRangePickerコンポーネントを実装します。予約、イベントのスケジュール設定、日付フィルタリング、休暇申請などの日付範囲選択に使用します。日付範囲の検証、プリセット範囲、書式のカスタマイズ、イベント処理、フォーム連携を扱います。

開発168
U
ui-ux-pro-max
ui-ux-pro-max
pedronauck / skills

UI/UXデザインのインテリジェンス。50種類のスタイル、21種類の配色、50種類のフォントペア、20種類のチャート、9種類の技術スタック(React、Next.js、Vue、Svelte、SwiftUI、React Native、Flutter、Tailwind、shadcn/ui)を提供します。操作:計画、構築、作成、デザイン、実装、レビュー、修正、改善、最適化、強化、リファクタリング、UI/UXコードのチェック。プロジェクト:ウェブサイト、ランディングページ、ダッシュボード、管理パネル、EC、SaaS、ポートフォリオ、ブログ、モバイルアプリ、.html、.tsx、.vue、.svelte。要素:ボタン、モーダル、ナビゲーションバー、サイドバー、カード、テーブル、フォーム、チャート。スタイル:グラスモーフィズム、クレイモーフィズム、ミニマリズム、ブルータリズム、ニューモーフィズム、ベントーグリッド、ダークモード、レスポンシブ、スキューモーフィズム、フラットデザイン。トピック:カラーパレット、アクセシビリティ、アニメーション、レイアウト、タイポグラフィ、フォントペア、余白、ホバー、シャドウ、グラデーション。統合:コンポーネント検索とサンプル表示に shadcn/ui MCP を使用

デザイン・UI168
U
ux-designer-skill
ux-designer-skill
podo / design-agent-skills

Nielsenのヒューリスティック、Laws of UX、WCAG 2.2に基づき、現代の2026年のベストプラクティスを取り入れた、インターフェースの構築、レビュー、批評のためのUX/UIデザインガイダンスです。インタラクションパターン、フォーム、ナビゲーション、アクセシビリティ、UXライティング、オンボーディング、AI・チャットインターフェース、i18n/RTLなどを扱い、参照ファイルは必要に応じて読み込みます。

デザイン・UI168
V
visual-explainer

ユーザーが問題、issue、PR、機能をインフォグラフィックとして説明するよう求めたときに使用する。ユーザーのコードや操作を起点に、明確な問題/解決の境界、シンタックスハイライトされたスニペット、焦点を絞った図を備えた段階的な可視化説明を作成する。単体の教育用 PDF と Markdown 優先の PR 説明をサポートし、複雑な図にのみ任意の画像を用いる。リポジトリの PR writer から明示的に呼び出された場合にも適用する。

デザイン・UI168
W
windows-95-web-designer
windows-95-web-designer
curiositech / some_claude_skills

本格的な Windows 95 の美学を取り入れたモダンな Web アプリケーション。グラデーションのタイトルバー、スタートメニューのパラダイム、タスクバーのパターン、3D の浮き彫り風クローム。Win95 のスタイルを AI チャットボット、モバイル UI、レスポンシブデザインに展開

デザイン・UI168
2
20-andruia-niche-intelligence
20-andruia-niche-intelligence
sickn33 / agentic-awesome-skills

プロジェクトの業種を定めた後に使用します。背景、適用される規制、UX パターン、リスクを含む資料をスペイン語で作成し、検証済みの情報源と仮説を区別します。

生産性167
A
accessibility-general
accessibility-general
mgifford / accessibility-skills

プロジェクトにACCESSIBILITY.mdファイルが含まれている場合、またはmgifford/ACCESSIBILITY.mdリポジトリに貢献する場合は、直ちにこのスキルを読み込んでください。変更を提案または記述する前に、必ずACCESSIBILITY.mdを読んでください。ACCESSIBILITY.mdファイルが存在する場合、いかなる状況でもこのスキルを省略しないでください。このスキルは、他のすべてのアクセシビリティ関連スキルをいつ、どのように読み込むかを定めます。

デザイン・UI167
C
content-catalogue
content-catalogue
podo / design-agent-skills

プレゼンテーション、図、ワイヤーフレーム、データ可視化、デザインレビュー、プロダクト戦略、コピーライティング、UX ライティング、コンテンツデザイン、デザインリサーチの各スキルを案内するドメインナビゲーターです。スライド、チャート、UX 戦略、PM フレームワーク、メール、マイクロコピー、プロダクトコピー、ユーザーリサーチ、デザインスプリントに適したスキルへ案内します。

エージェントワークフロー167
C
coreyhaines-marketing
coreyhaines-marketing
podo / design-agent-skills

Corey HainesによるCRO(コンバージョン率最適化)スキルです。登録後のオンボーディングと利用開始を最適化し、マーケティングページやフォームのコンバージョン率を改善し、登録とトライアル利用開始のフローを最適化します。より大規模なマーケティングスキルライブラリの一部で、ここではこの3つのみインストールされています。

マーケティング・グロース167
C
custom-canvas-and-gestures
custom-canvas-and-gestures
zakariaf / flutter-skills

CustomPainter/Canvas の規律を徹底する — View/Painter/Scene の分割と、単一の不変な Scene 値型を渡される単純な painter、単一値比較としての shouldRepaint を AnimationController による再描画アニメーション経路と厳密に分離すること、painter とヒットテスターの両方が読む単一の共有アフィン変換(toCanvas/toLogical は正確な逆演算で、スケールを再導出しない)、ジオメトリのヒットテスト(整数格子またはラスタライズされた region-ID バッファ、Path.contains は決して使わない)、ゼロアロケーションの paint()、純粋なトランスレーターとしてのジェスチャが Notifier に型付きコマンドを発行すること(ハンドラー内で状態を変更しない)、表示値を読み上げる ExcludeSemantics + 兄弟 Semantics と冗長な非色エンコーディング、実測による TextPainter のフィッティング、ファーストパーティの RoundedSuperellipseBorder、物理ピクセルのヘアライン、Directional のみのジオメトリ。CustomPainter/CustomPaint の作成・レビュー、キャンバス上のジェスチャ、タップ/ドラッグのヒットテスト、キャンバスアニメーション、実測テキストフィッティング、カスタム描画ピクセル上の Semantics を扱うときに使用する。

開発167
F
figma
figma
acedatacloud / skills

Figma REST API を介して、Figma のデザインファイル、ノード、レンダリング画像、コメントを読み取ります。ユーザーが Figma、figma.com のファイルリンク、デザインのコード実装、デザイントークン/色/間隔の抽出、デザインコメントの要約に言及した場合に使用します。

デザイン・UI167
H
htmlcsstoimage
htmlcsstoimage
okou-ai / okou-skills

説明はまだありません

クリエイティブ・メディア167
M
mck-ppt-design

python-pptx と McKinsey スタイルのデザインを使用し、プロフェッショナルでコンサルタント品質の PowerPoint プレゼンテーションをゼロから作成します。スライド、ピッチデッキ、ビジネスプレゼンテーション、戦略資料、四半期レビュー、取締役会用スライドなど、プロ品質の PPTX 作成をユーザーが依頼したときに使用します。36 種類のレイアウトパターンと一貫したタイポグラフィを備えた、すっきりとしたフラットデザインのプレゼンテーションを生成し、ファイル破損を防ぎます。

ドキュメント167
O
og-image-design
og-image-design
101-skills / superpowers

Open Graph とソーシャル共有画像のデザイン。プラットフォームの仕様、テキスト配置、ブランディングを扱います。OG meta タグ、Twitter カード、LinkedIn プレビュー、動的生成をカバーします。用途:ソーシャル共有画像、ブログのサムネイル、リンクプレビュー、ソーシャルカード。トリガー:og image、open graph、social sharing image、twitter card、social card、link preview image、og meta、sharing preview、social thumbnail、meta image、og:image、twitter:image、linkedin preview。

デザイン・UI167
O
om-ux-design
om-ux-design
open-mercato / skills

仕様書または選択したバックログの範囲に基づき、リポジトリのデザインシステムと既存コンポーネントを使って、詳細な画面と連携するプロトタイプを設計します。洗練された UI フロー、レスポンシブな画面設計、実装への引き継ぎに使用します。中立的な探索実験には om-mockup-prototype を使用します。

デザイン・UI167
S
software-ux-research
software-ux-research
podo / design-agent-skills

UXリサーチでプロダクトの意思決定リスクを軽減します。手法の選択、調査設計、知見の統合、リサーチ運営(インタビュー、ユーザビリティテスト、アンケート、リサーチリポジトリ、同意取得の実務)を扱い、参考ガイドとテンプレートのライブラリも備えています。

デザイン・UI167
S
syncfusion-react-datetimepicker
syncfusion-react-datetimepicker
syncfusion / react-ui-components-skills

Syncfusion React DateTimePicker コンポーネントの実装ガイド。React アプリケーションで日付と時刻の複合入力、日時の書式設定、ローカライズ、キーボードで操作できる UI を扱う際に使用します。コンポーネントのセットアップ、イベント処理、アクセシビリティのパターンを解説します。

開発167
S
syncfusion-react-timepicker
syncfusion-react-timepicker
syncfusion / react-ui-components-skills

時間選択、スケジュール管理インターフェース、予約に使用する Syncfusion React TimePicker コンポーネントを実装します。予約システム、スケジュール管理アプリ、時間ベースのフィルタリング、シフト管理、時間範囲の選択に時間選択入力が必要な場合に使用します。インストール、時間形式のカスタマイズ、最小値/最大値の制約、イベント処理、フォーム連携、検証パターン、モバイル対応を扱います。

開発167
S
syncfusion-wpf-carousel
syncfusion-wpf-carousel
syncfusion / wpf-ui-components-skills

ナビゲーションに対応した回転型またはカスタムパスのインターフェースで項目を表示する Syncfusion WPF Carousel を実装します。画像カルーセル、回転ギャラリー、テンプレートとデータバインディングを使ったカスタムパス上の項目表示を構築する際に使用します。

デザイン・UI167
A
anygen-slide
anygen-slide
anygenio / anygen-skills

ユーザーが独立したファイルまたは埋め込みコンテンツとして、スライドプレゼンテーションを作成・デザイン・制作したい場合は、いつでもこのスキルを使用します。ピッチデッキ、スライド資料、基調講演、研修資料、プロジェクト提案書、四半期レビュー、週次報告スライド、投資家向けピッチ、新製品発表、チームキックオフ、事業計画、オンボーディング資料、戦略プレゼンテーション、営業ピッチ、カンファレンストーク、「slides」や「PPT」に関する依頼が対象です。「做PPT」「做个汇报」「写个演示文稿」「季度汇报」「竞品分析报告(要PPT)」「产品发布会」「培训材料」「周报」と言われた場合も起動します。スライドやプレゼンテーションを制作する必要がある場合は、このスキルを使用してください。

ドキュメント166
A
apply-typography-scale
apply-typography-scale
gnurio / refactoring-ui-plugin

細かく調整したフォントサイズ、ウェイト、色を使って、明確なタイポグラフィの階層を作成します

デザイン・UI166
C
components-build
components-build
nolly-studio / components-build-skill

components.build の仕様に従って、モダンで合成可能かつアクセシブルな React UI コンポーネントを構築します。コンポーネントライブラリ、デザインシステム、再利用可能な UI コンポーネントの作成、レビュー、リファクタリングに使用します。コンポーネント API、合成パターン、アクセシビリティ、スタイリングシステム、TypeScript の props に関するタスクで使用します。

開発166
C
custom-visualization-builder
custom-visualization-builder
splunk / splunk-agent-skills

dashboard-studio-extension フレームワークを使って、カスタム可視化をスキャフォールド、ビルド、パッケージ化し、Splunk にインストールする。ユーザーが新しいカスタム可視化を作成したいとき、既存プロジェクトに可視化を追加したいとき、またはレガシーなカスタム可視化を移行したいときに使用する。

開発166
D
design-for-ai
design-for-ai
podo / design-agent-skills

Design for Hackersを基盤とするClaude Code向けデザイン基礎システムです。4段階のワークフロー(調査、計画、モック作成、構築)、シード済みのデザインDNAディーラー、二重盲検レビュー、ユーザビリティ、データ可視化、プロトタイピングの原則スキルを備えています。

デザイン・UI166
D
drawio-feishu

説明はまだありません

デザイン・UI166
D
ds-ascii
ds-ascii
bradfrost / skills

UI ワイヤーフレームを、各領域が YOUR デザインシステムの実在コンポーネントに対応するラベル付き ASCII アートとして描画する。ASCII プロトタイプ、テキストワイヤーフレーム、等幅モックアップを求められたとき、またはデザインツールを開かずにチャット、PR、issue、Slack スレッド内でページレイアウトをスケッチしたいときに使用する。トリガーには「…の ASCII プロトタイプを作って」「これをテキストでワイヤーフレーム化して」「…のホームページをスケッチして」「これを ASCII でモックアップして」「このページを ASCII で見せて」が含まれる。デザインシステムのコンポーネント語彙のワンタイムプロファイルを作成し、それに基づいて描画する。タイポグラフィの階層は説明ではなく描画される。

デザイン・UI166
F
frontend-design
frontend-design
factory-ai / factory-plugins

見栄えのよいウェブインターフェースを構築します。次の場合に使用します。- ウェブアプリ、ウェブサイト、ランディングページ、HTML ページの構築を依頼されたとき - 単発のツール、ユーティリティ、デモアプリを求められたとき - 新しいフロントエンドプロジェクトを始めるとき - 見た目の改善を求められたとき - UI、デザイン、スタイリング、見栄えの改善について言及されたとき。これは「デザイン」タスクに限らず、あらゆるフロントエンド作業に適用されます。シンプルなアプリでも基本的なデザイン原則が役立ちます。

デザイン・UI166
L
localization-design
localization-design
podo / design-agent-skills

翻訳、RTL スクリプト、文化の違いに対応できるインターフェースを設計します。言語ごとのテキスト拡張表、RTL の完全なミラーリング規則、非ラテン文字のタイポグラフィ、論理 CSS プロパティ、文化に関わる色やアイコンの注意点を含みます。

デザイン・UI166
M
markdown-viewer-skills
markdown-viewer-skills
podo / design-agent-skills

docu.mdパイプラインによる、Markdown内のテキスト駆動型ビジュアル向けルーティングスキルです。チャートと分析(Vega-Lite、ECharts)、UML、BPMN、ArchiMate、クラウド・ネットワーク・セキュリティアーキテクチャ(PlantUML)、インフォグラフィック、HTML/CSSによるシステムアーキテクチャのレイアウトやカードに対応します。図はMarkdown内のテキストとして記述され、ビューアーでリアルタイムに描画されます。

ドキュメント166
M
microsoft-skills
microsoft-skills
podo / design-agent-skills

Microsoft公式のフロントエンドスキルを2つ収録。独自性がありデザインシステムに準拠したインターフェースのフロントエンドデザインレビューと、TailwindおよびFramer Motionアニメーションを使ったダークテーマのReactです。どちらも、強いビジュアルアイデンティティを持つ本番品質のUIを目指します。

デザイン・UI166
M
motion-design-patterns
motion-design-patterns
dylanfeltus / skills

React 向けの Framer Motion (Motion) アニメーションパターン。スプリング、スタッガー、レイアウトアニメーション、マイクロインタラクション、スクロールエフェクト、ページ遷移を扱います。UI アニメーションの構築や改善、仕上げの追加、インターフェースの高級感を高める場合に使用します。

デザイン・UI166
N
nimbalyst-skills
nimbalyst-skills
podo / design-agent-skills

Nimbalystワークスペースに組み込まれたビジュアル出力スキルです。MCPツールに対応したExcalidraw図、UIワイヤーフレームのモックアップ、データベースERD設計を利用できます。これらはNimbalystアプリ内のスラッシュコマンドであり、単体でインストールできるスキルではありません。

デザイン・UI166
P
paw-mkt-cro
paw-mkt-cro
pawbytes / skill-suites

ランディングページ、サインアップフロー、オンボーディングのコンバージョンを最適化します。ユーザーが「CRO」「コンバージョン率」「ランディングページ」「サインアップフロー」「A/B テスト」「フォーム最適化」「離脱ポップアップ」「ユーザーアクティベーション」を求めた場合に使用します。

マーケティング・グロース166
S
screen-reader-testing
screen-reader-testing
sickn33 / agentic-awesome-skills

スクリーンリーダーを使って Web アプリケーションをテストし、アクセシビリティを包括的に検証する実践ガイド

テスト・品質166
S
self-media-wechat-publisher
self-media-wechat-publisher
yanhua1010 / self-media-content-workflow

確認済みの公式アカウント用最終稿 Markdown を整形し、WeChat公式アカウントの下書きに保存します。「公式アカウントに投稿」「下書きに保存」「公式アカウント向けに整形」「別のテーマに変更」「小绿书の画像メッセージを送信」などの依頼で使用します。カバー画像と本文中の画像を自動アップロードし、複数のテーマ、カスタム CSS、複数アカウント、server モードに対応します。下書きの作成のみで、一斉送信はしません。認証情報は環境変数からのみ提供します。アダプターツールがインストールされていない場合は、手動投稿用パッケージを提供します。

マーケティング・グロース166
S
service-blueprint
service-blueprint
podo / design-agent-skills

専門的なサービスブループリント(NN/g、GDS、Practical Service Design)を生成します。5 つのスイムレーン、インタラクションライン/可視性ライン/内部インタラクションラインに加え、JSON schema とレンダリングパイプラインを扱います。

デザイン・UI166
S
slide-authoring
slide-authoring
open-slide / open-slide

open-slide ページを書いたり編集したりするための技術リファレンス — ファイル契約、1920×1080 キャンバス、タイプスケール、レイアウト、パレット/ビジュアルの方向性、アセット、スピーカーノート、段階的な表示、ページトランジション、モーフトランジション。`slides/<id>/` 配下のファイルを書いたり変更したりする直前に参照する。`create-slide` や `apply-comments` のワークフロー内からでも、その場限りのスライド編集でも同じ。「edit slide」「tweak this page」「fix the layout」「change the palette」「reveal one by one」「add a transition」「morph transition」「write the speaker notes」「generate the script / talk track」「preview / screenshot a page」「check how it looks」「investigate the slide framework」「how do slides work here」といったフレーズでトリガーする。

ドキュメント166
S
sn-ppt-standard
sn-ppt-standard
opensensenova / sensenova-skills

`sn-ppt-entry` と `sn-ppt-story` が絶対パスの `DECK_DIR` と `outline.md` を準備した後にのみ使用します。各スライドの個別 HTML(1600×900)、レンダリング済み PNG、スライドごとの発表原稿、`present.html` を生成し、`static_postprocess` の指定に従って Standard 独自の exporter で変換した PPTX を生成します。**`present.html` は常に必須成果物です。欠落は技術的障害であり、納品してはいけません。`static_postprocess` に `pptx` が含まれる場合、PPTX も必須成果物(いずれかの欠落は技術的障害)で、Standard 独自の exporter のみで生成してください。ユーザーが HTML のみを明示的に要求した場合(`static_postprocess` が `[]`)に限り、PPTX を省略できます。**

ドキュメント166
S
softaworks-agent-toolkit
softaworks-agent-toolkit
podo / design-agent-skills

softaworks agent toolkitから選んだデザイン関連スキルです。mermaid-diagrams、excalidraw、draw-io、c4-architecture、marp-slide、database-schema-designer、design-system-starterを収録しています。リポジトリにはほかにも多くのスキル(jira、codex、gemini、コミットツールなど)がありますが、このポインターではインストールされません。

デザイン・UI166
S
styleseed
styleseed
podo / design-agent-skills

データだけでなく、デザイン判断力をエージェントに教えるデザイン手法エンジンです。単一のエントリースキルから、セットアップ、構築、レビュー、採点、レンダリング検証、トークン、モーション、アクセシビリティ、コピー、更新の各内部ワークフローに振り分けます。デザインロック(STYLESEED.md)からプロジェクト固有のルールをコンパイルし、ブランドスキンと構造レシピを用意。採点してから修正する品質ゲートも備えます。Claude Code、Codex、Cursorに対応します。

デザイン・UI166
S
swiftui-patterns
swiftui-patterns
podo / design-agent-skills

SwiftUIのビューとコンポーネントに関するベストプラクティスと例中心のガイダンスです。タブ構成、ナビゲーション階層、画面構成、カスタムビューモディファイア、レスポンシブレイアウトを扱い、AppleプラットフォームアプリのSwiftUIコードを慣用的で保守しやすい状態に保ちます。

開発166
10,672 件中 4861–4920 件

MCP は初めてですか?

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

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