mcpField

Skills

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

デザイン・UI

U
ui-visual-validator
ui-visual-validator
rmyndharis / antigravity-skills

UI テストを専門とする厳密な視覚検証のエキスパート、

テスト・品質82
U
ui4-review
ui4-review
payloadcms / payload

UI4 の CSS 移行におけるトークンの適切な使用をレビューする。ハードコードされた値ではなく CSS 変数が使われているかを確認する。

デザイン・UI82
V
view-transitions
view-transitions
itallstartedwithaidea / agent-skills

View Transitions は、UI の状態とルート間のシームレスなアニメーション遷移のために React View Transition API を実装する。

デザイン・UI82
W
web-design-guidelines
web-design-guidelines
hainrixz / claude-webkit

Web インターフェースガイドラインへの準拠についてUI コードを確認します。「UI をレビューしてください」「アクセシビリティをチェックしてください」「デザイン監査」「UX をレビューしてください」または「ベストプラクティスに照らしてサイトをチェックしてください」と求められた場合に使用します。

デザイン・UI82
A
absence-audit
absence-audit
dragoon0x / taste-skills

デザインから意図的に省かれているものに気づく。抑制はセンスのシグナルである。ミニマルな製品を研究するとき、デザインの成熟度を評価するとき、削ぎ落とすことの力を理解したいときに使う。

デザイン・UI81
A
Academic Figure Prompt
Academic Figure Prompt
ligphidonk / academic-skills

ユーザーが AI 画像生成ツール(NanoBanana / Gemini / DALL-E / Midjourney)向けの詳細な英語プロンプトを要求し monetizeテ adopters學に公认トップ会議品質の学術図 版を求めている場合、このスキルを使用してください。対象にはフレームワーク図、ネットワーク構成図、パイプラインフロー図、モジュール詳細図、比較/アブレーション図、データパターングリッドが含まれます。特にユーザーが「論文配图提示词」「生成论文配图」「学術論文の図生成」「アーキテクチャ図のプロンプト」「フレームワーク図のプロンプト」「トップ会議スタイルの図」「CVPR スタイルの図」「NeurIPS スタイルの図」「paper figure prompt」「academic diagram prompt Gomesposer」と言った場合や、LaTeX/PDF/Word の論文を提示して図のプロンプトを求めた場合に合 mag。カラースキームが指定されていない場合は、プロンプトを生成する前に、8種類のプリセットパレットとカラーツールのリンクを提示します。

デザイン・UI81
A
adobe-xd
adobe-xd
partme-ai / full-stack-skills

Adobe XD での UI/UX デザイン、インタラクティブ プロトタイプ、再利用可能なコンポーネント、デザイン仕様の作成をガイドする。使用場面:ユーザーが Adobe XD のアートボード、プロトタイプ リンク、リピートグリッド、コンポーネントの状態、デザイントークンのエクスポート、開発者への引き継ぎについて尋ねたとき。

デザイン・UI81
A
animate-ui
animate-ui
prototyperai / prototyper-ui

Prototyper UI のアニメーション規約。アニメーション/トランジションのコードを書く、レビューする、デバッグするときに使用:新しいコンポーネントへのアニメーション追加、transition クラスの変更、イージングや時間の選択、オーバーレイの enter/exit の実装、押下フィードバックの追加、パフォーマンスの評価、prefers-reduced-motion の処理。

デザイン・UI81
A
animation-performance-retro
animation-performance-retro
theorcdev / 8bitcn-ui

8 ビットアニメーションを滑らかなパフォーマンスに最適化する。アニメーションするピクセルアート、ゲーム UI エフェクト、その他レトロ調のアニメーションを作成する際に適用する。

デザイン・UI81
A
atomic-design-organisms

ヘッダー、フッター、商品カード、サイドバーなどの分子と原子から複雑なオーガニズムを構築するときに使用する。オーガニズムは独立した UI セクションである。

デザイン・UI81
B
building-glamorous-tuis
building-glamorous-tuis
dicklesworthstone / meta_skill

Charmbracelet(Bubble Tea、Lip Gloss、Gum)でターミナル UI を構築します。使用場面:Go TUI、シェルのプロンプト/スピナー、「CLI をもっと見やすく」、適応型レイアウト、非同期レンダリング、フォーカス状態マシン、スパークライン、ヒートマップ、カンバンボード、SSH アプリ。

デザイン・UI81
D
dashboard-designer
dashboard-designer
nickcrew / claude-cortex

データダッシュボードを設計するときに使用するスキル——KPI の選定、レイアウトの構成、視覚的階層の適用、どの BI ツールを使うかの判断。トリガーフレーズ:''design a dashboard''、''build a KPI dashboard''、''what should my dashboard show''、''help me layout a dashboard''、''dashboard for monitoring''。チャートコードをゼロから書く場合(chart-builder を使用)、SQL クエリを書く場合(sql-analyst を使用)、マーケティングのランディングページを設計する場合には使用しない。

デザイン・UI81
D
data-dashboard-design
data-dashboard-design
asgard-ai-platform / skills

適切な KPI 階層、チャートタイプの選択、インタラクティブ機能を備えた効果的なデータダッシュボードを設計する。ユーザーがダッシュボードを作成する、適切な可視化を選ぶ、異なる対象者向けに指標を整理する、ダッシュボードツールを評価する必要があるときにこのスキルを使用する — 'build a dashboard'、'our reports are confusing'、'which chart should I use'、'executives can't find the metrics they need' と言った場合でも。

データ・データベース81
D
design-foundation
design-foundation
sanky369 / vibe-building-skills

カラースキーム、タイポグラフィ、スペーシング、角丸、シャドウからなるデザイントークンの基盤を、実際のトークンファイル(CSS 変数および Tailwind テーマ)として作成または抽出し、現在のハードコード値からの移行マップを添える。ユーザーが「デザインシステムを構築して」「スタイルが不統一」「同じ青が 50 段階ある」「デザイントークンを追加して」「デザインを正式化して」「新機能を合わせて」と言ったとき、または画面を作る前に基盤が必要な新規フロントエンドを始めるときに使う。他のデザイン作業がアドホックな値と衝突し続けるときの最初のステップでもある。トークンファイル、ダークモードに対応させたグローバル→セマンティックトークン構造、優先して移行すべき乖離の短いリストを生成する。

デザイン・UI81
D
displaying-timelines
displaying-timelines
ancoleman / ai-design-components

タイムライン、アクティビティフィード、ガントチャート、カレンダーインターフェースを通じて、時系列のイベントやアクティビティを表示する。履歴イベント、プロジェクトスケジュール、ソーシャルフィード、通知、監査ログ、時間ベースのデータを表示するときに使用する。垂直/水平タイムライン、インタラクティブな可視化、リアルタイム更新、アクセシビリティ(WCAG/ARIA)に対応したレスポンシブデザインの実装パターンを提供する。

デザイン・UI81
D
drawio-mcp-diagramming
drawio-mcp-diagramming
thomast1906 / github-copilot-agent-skills

Draw.io MCP サーバーを使って、あらゆる形状やベンダーの図を作成・編集します。用途:図の作成、アーキテクチャ図の作成、図への Azure/AWS/GCP/Cisco/Kubernetes アイコンの追加、Mermaid から draw.io への変換、矢印の重なりの修正、.drawio ファイルの編集、ネットワークトポロジ図、CI/CD パイプライン図、認証フロー図。XML、Mermaid、CSV に対応します。drawio/search_shapes を使って、すべてのベンダーおよびアイコンライブラリから 10,000 種類以上の形状を検索します。Excalidraw 出力には使用しないでください(excalidraw-mcp-diagramming スキルを使用してください)。

デザイン・UI81
F
flutter-animation
flutter-animation
thienqo / flutter-skills

暗黙的・明示的・ルート・Hero・スタッガード・物理ベースのアニメーションで Flutter のモーションを実装または診断する。タイミング、トランジション、モーションの挙動が求められたときや壊れているときに使う。光学マテリアル、シェーダー、一般的なレイアウト、パフォーマンスプロファイリングは各専門家に委ねる。

開発81
F
focus-attention-design
focus-attention-design
owl-listener / inclusive-design-skills

持続的な集中を支え、気を散らす要素を減らすインターフェースを設計する。ADHD、注意困難、不安を抱えるユーザー向けの設計や、集中が重要なあらゆる場面——ダッシュボード、読書体験、タスクフロー、フォーム、学習インターフェース——で使用する。トリガー:focus、distraction、ADHD、attention、too busy、cluttered、visual noise、autoplay、notifications、pop-ups、interruptions。

デザイン・UI81
F
form-cro
form-cro
borghei / claude-skills

リード獲得、問い合わせ、デモ申請、応募、チェックアウトの各フォームの最適化。フィールドコスト分析、マルチステップフォーム設計、バリデーション UX、モバイル最適化、A/B テストのフレームワークを扱います。

マーケティング・グロース81
F
frontend-design
frontend-design
luongnv89 / skills

独自の美意識を備え、動作するコードによる本番品質のフロントエンドインターフェースを構築します。UI コンポーネント、ページ、フロントエンド機能に使用します。バックエンド/API の作業やユーザビリティのみの監査には使用しません。

デザイン・UI81
F
frontend-magic-ui
frontend-magic-ui
app-builders-club / mvp-builder

ドキュメント駆動開発フレームワーク。構造化された仕様、TDDサイクル、フィードバックループ、スキルシステムを備える

デザイン・UI81
F
frontend-skill
frontend-skill
julianromli / ai-skills

視覚的に優れたランディングページ、ウェブサイト、アプリ、プロトタイプ、デモ、ゲーム UI の制作を求められた場合に使用します。節度ある構成、画像を軸とした階層、一貫したコンテンツ構造、洗練されたモーションを徹底し、ありきたりなカード、弱いブランディング、UI の雑然さを避けます。

デザイン・UI81
F
frontend-ui-workflow
frontend-ui-workflow
aircury / ai-framework

製品の実際のデザインシステムを維持または拡張する必要があるフロントエンド UI 作業にこの skill を使用する:新しい画面/コンポーネント、ハイファイ再現、リスタイル、非自明なフォーム、ロール制限付き UI、大きな挙動変更、またはレイアウト、体験、スタイルガイド、クリーンな実装計画、最終的なコード生成を必要とする UI 実装。インストールすべき唯一のフロントエンド skill であり、自己完結していて、同梱のリファレンスを用いて軽量な UI 編集とフルフロントエンドワークフローの間をルーティングする。

デザイン・UI81
G
game-design
game-design
saschb2b / skills

クロスゲームのパターンカタログと設計フレームワーク(MDA、コアループ、フロー、ゲームフィール、エコノミー)に基づいて、ビデオゲームのメカニクス、システム、インターフェースを分析、設計、批評、バランス調整、作り直す。設計に触れる変更や議論の最初の窓口であり、Godot などのエンジンでの実装途中も含む。使用場面:メカニクス、進行、エコノミー、ロードアウト、インベントリ、ルート、ショップ、敵や難易度のスケーリング、報酬、メニュー、UI システムの設計、バランス調整、ブレインストーミング、作り直し。ドロップ率、価格、カーブ、スケーリングの調整。面白いか、グラインドが過剰か、支配的な戦略があるかを問うとき。メニュー、HUD、トランジション、オンボーディング、対話、ガイダンス、入力プロンプト、アクセシビリティの設計。ゲームのアイデア、コンセプト、ビジョン、設計の柱、GDD の記録、ピッチ、反復を、生きたコンセプトバンドルとして永続化するとき。またはゲームシステムを構築しながら自らそれらを執筆するとき。godot と並走し、godot がエンジンコードを書き、本スキルがそのコードが何をすべきかを決める。

クリエイティブ・メディア81
I
ink-component-patterns

React ベースのコマンドラインアプリケーション向けに、Ink コンポーネントパターンでターミナル UI を構築する際に使用する。

開発81
I
interaction-design
interaction-design
rastian / interaction-design-skills

インタラクションデザイン(IxD)の原則とフレームワークをプロダクトおよびサービスのデザイン業務に適用する。インタラクションフロー、マイクロインタラクション、フィードバック機構、アフォーダンス、メンタルモデル、コンポーネントの状態、応答時間、アニメーションとトランジション、エラー回復、入力検証、タスクフロー、ナビゲーションパターンを設計または評価するときにこのスキルを使用する。主な対象:デジタルプロダクトとサービスに携わるプロダクトデザイナー、UX デザイナー、UI デザイナー、サービスデザイナー、インタラクションデザイナー。トリガー:インタラクションフロー、マイクロインタラクション、アフォーダンス、フィードバックデザイン、状態設計(hover/focus/error/loading/empty)、応答時間、トランジション、アニメーション、メンタルモデル、タスクフロー、ユーザーフロー、ナビゲーションデザイン、インタラクション仕様、ハンドオフ注釈、ジェスチャー、入力検証、エラー状態、ローディング状態、空状態、システムフィードバック、シグニファイア、デザインレビュー、インタラクション監査、IxD 原則。

デザイン・UI81
K
kitchen-sink-design-system
kitchen-sink-design-system
genericservice / claude-skills

スクリプトファーストのデザインシステムワークフロー。決定論的な監査スクリプトでフレームワークを検出し、コンポーネントを棚卸しし、デザインのドリフト(ハードコードされた hex、任意の Tailwind)を検出する。エージェントが判断して Kitchen Sink ページを実装するための明確なレポートを提供する。

デザイン・UI81
L
laws-of-ux
laws-of-ux
rolemodel / rolemodel-skills

UX の 21 の法則を用いて UI 実装をレビューし導く。確立された認知・視覚・行動の原則を適用して、HTML、CSS、JavaScript のユーザビリティ問題を特定する。UI コードのレビュー、新しいインターフェースの構築、ユーザー体験の監査に使用する。

デザイン・UI81
L
laws-of-ux
laws-of-ux
rolemodel / skills

RoleModel Softwareでの業務を中心にしたエージェントスキル集

デザイン・UI81
L
lovstudio-event-poster
lovstudio-event-poster
lovstudio / skills

ブリーフからイベントポスター、展覧会ポスター、チラシ、プロモーション用グラフィックを作成する。印刷可能な高解像度 PNG を出力する。トリガーワード: 海报, poster, event poster, 展览海报, 展架, 活动海报, 宣传图, promotional, banner, flyer

デザイン・UI81
N
niko-table-best-practices
niko-table-best-practices
semkoo / niko-table-registry

Niko Table(TanStack Table を使った shadcn 互換のデータテーブル)と編集可能な Data Grid を統合して使用する。ユーザーが Niko Table、niko-table.com、shadcn のデータテーブル、TanStack Table、並べ替え・絞り込み可能なテーブルの構築、ファセットフィルター、高度なフィルターメニュー、行・列のドラッグ&ドロップ、サーバーサイドページネーション、サーバーサイドグリッド、無限スクロール、Drizzle ORM、nuqs、URL 状態、共有・ブックマーク可能なテーブル、行の展開、ツリーテーブル、行選択、編集可能なスプレッドシートグリッド、useDataGrid、DataGrid のセルエディター、クリップボード/フィルハンドル、useGridChanges、その他 shadcn 互換のデータグリッドに言及した場合に使用——Niko Table と明示していなくてもよい。タスクが React/shadcn プロジェクトのデータテーブルや編集可能なグリッドに関わる場合は常にこのスキルを優先し、モデルが Niko Table の構造、インポート、パターンに従うようにする。

開発81
P
psd-slicer
psd-slicer
xiao0916 / lm-skills

Photoshop(.psd)ファイルのすべてのレイヤーを個別の PNG 画像として書き出す。PSD ファイルからレイヤー画像を抽出する場合、Web 開発用のスライスを生成する場合、他のツール用にレイヤー素材を用意する場合に適する。レイヤー名の処理を自動化し、非表示レイヤーをスキップし、ネストしたレイヤーグループを再帰的に書き出す。

デザイン・UI81
R
responsive-accessibility
responsive-accessibility
owl-listener / inclusive-design-skills

画面サイズ、ズームレベル、向きをまたいでアクセシビリティを保つレスポンシブレイアウトを設計する。レスポンシブなインターフェースの設計、ズーム動作のテスト、デバイスをまたいだレイアウトのレビューを行うときに使用する。トリガー:レスポンシブ、ズーム、リフロー、ブレークポイント、モバイルのアクセシビリティ、画面サイズ、向き、ビューポート、200% ズーム、テキスト拡大、レイアウトシフト、横スクロール。

デザイン・UI81
S
salla-addon-purchase-embedded
salla-addon-purchase-embedded
sallaapp / salla-partners-agent-kit

埋め込み Salla アプリ内でのアプリ内アドオン購入 UX——アプリのアドオンを一覧表示し、ネイティブのチェックアウトを開き、埋め込み SDK の Checkout モジュール(`embedded.checkout.getAddons` / `.create` / `.onResult`)で支払い結果を受け取ります。課金は Salla が担います。iframe 内で支払いを回収しないでください。埋め込みページで購入/アップセル UI を構築する場合や、チェックアウトの受け渡しを配線する場合に使用します。埋め込みフローの一部 → salla-embedded-app。購入後の有効化とエンタイトルメントのライフサイクル → salla-addon-purchase。

開発81
S
salla-storefront-ui
salla-storefront-ui
sallaapp / salla-partners-agent-kit

Salla アプリの STOREFRONT(ストア)UI をネイティブにする——Twilight テーマ上の購入者向けページ。Storefront JS SDK で駆動するネイティブ `<salla-*>` Web コンポーネントで構築し、Twilight CSS トークンを継承し、Salla Icons(`sicon-*`)を使用し、ページの余白に合わせ、アラビア語優先/RTL で記述し、インストール済みのデモストア(`url`)で LIVE スクリーンショットにより検証する。スニペットが可視 UI を描画する場合に使用。注入レシピ → salla-snippets。埋め込み/ダッシュボード UI → salla-embedded-ui。

デザイン・UI81
S
sb-audit
sb-audit
strongeron / storybook-workbench

定期的な Storybook 監査 - 命名のドリフト調査、アーカイブ/意思決定ボードのレビュー、ライフサイクルのタグ付け、利用状況の更新。'audit my Storybook'、'find drift'、'show pending decisions'、または定期的なカタログ健全性チェックに使用します。

テスト・品質81
S
screenshot-surgery
screenshot-surgery
dragoon0x / taste-skills

あらゆるデザインの解剖構造を注釈付けし、マッピングする。冷静な分析を通じて、視覚的階層、スペーシングシステム、色の役割、緊張点を特定する。正式なデザイン監査を行うとき、デザイン分析を教えるとき、または構造化された観察スキルを養うときに使用する。

デザイン・UI81
S
shadcn-ui
shadcn-ui
hainrixz / claude-webkit

Tailwind CSS に対応した React 用 shadcn/ui コンポーネントライブラリ。コピーして使えるアクセシブルなコンポーネントを、コードの完全な所有権とともに提供します

デザイン・UI81
S
show-before-after
show-before-after
wkentaro / agent-skills

番号付きの注釈を添えた before/after の並列 HTML ページを作成し、UI、チャート、図、レンダリングされたドキュメント、画像出力、ターミナル出力といった視覚的な変更を示す。ユーザーが before/after、視覚的な diff、計画や変更の視覚的な確認を求めたときに使用する。PR のスクリーンショットは before-and-after に含まれる。

デザイン・UI81
S
skillui
skillui
roentek / claude_code_boilerplate_framework

skillui コマンドラインを使って、あらゆるウェブサイト、ローカルディレクトリ、公開 GitHub リポジトリから完全なデザインシステムを抽出する。Claude が自動的に読み取る SKILL.md、DESIGN.md、トークンファイル(colors.json、spacing.json、typography.json)を生成する。UI を構築する前に既存のサイトやコードベースからデザインシステムやデザイントークンを抽出したい場合、照合するための参照デザインシステムが欲しい場合、'extract the design system from'、'get the tokens from'、'pull styles from this site'、'clone the look of' などと言った場合、または URL/リポジトリを提示してそのビジュアル言語に合わせたい場合に使用。

デザイン・UI81
S
survey-design
survey-design
infrasity-labs / dev-gtm-claude-skills

仮説を検証しユーザーの態度を大規模に測定するために、信頼性が高く偏りのない定量データを収集する調査を設計する。

デザイン・UI81
S
svg-creator
svg-creator
upbrew-tech / svg-creator-skill

アイコン、イラスト、ロゴ、図、インフォグラフィック、パターン、アニメーション、抽象アートを含む高品質な SVG グラフィックを作成します。ユーザーが SVG 画像、ベクターグラフィック、アイコン、ロゴ、バッジ、図、フローチャート、インフォグラフィック、パターン、アニメーショングラフィックの作成・描画・デザイン・生成を求めたときはいつでもこの Skill を使用します。また、ユーザーが「draw me」「make an SVG」「create a graphic」「design an icon」「vector illustration」と言った場合や、SVG ファイルとして出力するのが最適な視覚成果物を求めた場合にもトリガーします。この Skill は、単一要素のシンプルなグラフィックと、アニメーションを伴う複数レイヤーの複雑なコンポジションの両方を扱います。

デザイン・UI81
S
syncfusion-winforms-border-layout
syncfusion-winforms-border-layout
syncfusion / winforms-ui-components-skills

Syncfusion Windows Forms BorderLayout を実装し、子コントロールを境界(North、South、East、West)と中央に配置します。BorderLayout を扱う場合、コントロールを境界領域に配置する場合、ドッキングの代替手段を使う場合、Windows Forms アプリでコンテナのレイアウトとコントロールの間隔を構成する場合に使用します。

デザイン・UI81
S
syncfusion-winforms-button-edit
syncfusion-winforms-button-edit
syncfusion / winforms-ui-components-skills

埋め込みボタン付きのテキスト入力を作成するための Syncfusion WinForms ButtonEdit コントロールを実装する。ファイル/フォルダーブラウザー、ドロップダウンコントロール、アクションボタン付きのカスタム入力コントロールを構築する必要があるときにこの skill を使用する。アセンブリの設定、デザイナー/コードによる方法、外観のカスタマイズ、子ボタンの構成、イベント、インタラクションパターンを含む。

開発81
S
syncfusion-winforms-combobox
syncfusion-winforms-combobox
syncfusion / winforms-ui-components-skills

データバインディング、オートコンプリート、複数選択、フィルタリング、トークンを備えた Syncfusion Windows Forms SfComboBox コントロールを実装・カスタマイズする。Windows Forms アプリケーションで WinForms コンボボックス、ドロップダウン、SfComboBox、オートコンプリートテキストボックス、複数選択ドロップダウン、トークン入力、コンボボックスのデータバインディング、ドロップダウンのフィルタリング、コンボボックスのカスタマイズを扱うときに使用する。

デザイン・UI81
S
syncfusion-winforms-datetimepicker
syncfusion-winforms-datetimepicker
syncfusion / winforms-ui-components-skills

Syncfusion Windows Forms SfDateTimeEdit を実装します — 日付と時刻を編集するための高度な DateTime ピッカーコントロール。日時入力、日付範囲の検証、カスタム表示パターンを扱う際に使用します。編集モード(テキスト/マスク)、日付検証、WinForms アプリケーションにおけるグローバリゼーション対応を扱います。

デザイン・UI81
S
syncfusion-winforms-diagram
syncfusion-winforms-diagram
syncfusion / winforms-ui-components-skills

インタラクティブな作図アプリを作成するための Syncfusion Windows Forms Diagram コントロールを実装する。フローチャート、組織図、ネットワーク図、ノードベースの可視化を作成するときに使用する。このコントロールは、ドラッグアンドドロップ編集、シンボルパレット、コネクタ管理、図のシリアライズを提供し、Windows Forms で Visio ライクなアプリを構築できる。

開発81
S
syncfusion-winforms-numeric-textbox
syncfusion-winforms-numeric-textbox
syncfusion / winforms-ui-components-skills

Windows Forms での書式設定、検証、カスタマイズを伴う数値入力向けに Syncfusion SfNumericTextBox を実装します。通貨書式、パーセント値、数値検証、小数書式を備えた数値入力コントロールを作成する際に使用します。数値書式のオプション、値の範囲検証、検証機能を備えた書式付き数値データ入力について説明します。

開発81
S
syncfusion-winforms-treeview
syncfusion-winforms-treeview
syncfusion / winforms-ui-components-skills

Windows Forms アプリで階層ツリー構造、ファイルエクスプローラー、組織図、ネストしたデータを表示するための Syncfusion TreeViewAdv コントロールを実装する。階層データ、親子関係、展開可能なノード、ファイルブラウザーインターフェース、フォルダー構造を扱うときに使用する。このスキルは、データバインディング、ドラッグアンドドロップ、ノードのカスタマイズ、編集機能、WinForms のツリー構造のパフォーマンス最適化を扱う。

開発81
T
touch-target-design
touch-target-design
owl-listener / inclusive-design-skills

運動機能の困難、振戦、巧緻性の制限がある人や、支援ポインティングデバイスを使用する人に適したタッチターゲットとポインタ操作を設計する。ボタン、リンク、フォームコントロール、モバイルインターフェース、その他クリック/タップ可能な要素を設計する場合に使用する。トリガー:touch target、tap target、button size、too small to tap、fat finger、motor disability、dexterity、tremor、pointer、click area、hit area、mobile buttons。

デザイン・UI81
T
tui-visual-design
tui-visual-design
josiahsiegel / claude-plugin-marketplace

ユーザーがターミナル UI を美しく、洗練された、読みやすい、プレミアム、現代的、ブランドらしい、または視覚的に際立つものにしたいと求めたときに使用するスキル。視覚的階層、余白、タイポグラフィ、境界線、カラーパレット、チャート、進捗表示、アイコン、プロンプト、フォーム、ダッシュボード、フレームワークのスタイリングを改善する。以下で積極的に有効化:TUI のビジュアルデザイン、美的な磨き込み、レイアウト構成、ターミナルのタイポグラフィ、カラーシステム、罫線描画、チャートのスタイル、アニメーション、グリフ/アイコンの使用、プロンプトのスタイル、デザイン批評、視覚的なアンチパターン、フレームワーク固有のスタイリング指針。提供:ターミナルデザインの原則、磨き込みチェックリスト、ビジュアルレシピ、アクセシビリティに配慮した美学。

デザイン・UI81
T
type-selection
type-selection
dragoon0x / taste-skills

流行ではなく、トーンや文脈に基づいて書体を選びます。プロジェクトのフォント選定、書体の選択肢の評価、または文字が読まれる前に書体が伝える印象を理解する場合に使用します。

デザイン・UI81
T
type-systems
type-systems
dragoon0x / taste-skills

サイズ、ウェイト、行送り、トラッキングを一貫したシステムとして扱う。タイプスケールを構築するとき、タイポグラフィの一貫性を監査するとき、テキストがどこかしっくりこない理由を診断するときに使う。

デザイン・UI81
U
uiux-excellence-guide
uiux-excellence-guide
jpkovas / uiux-excellence-guide

UI/UX の設計、再設計、監査、実装を行う場合に使用。デザインシステム、アクセシビリティ、レスポンシブ挙動、マイクロコピー、モーション、Web Vitals の改善にも使用。

デザイン・UI81
U
user-flow-diagram
user-flow-diagram
infrasity-labs / dev-gtm-claude-skills

パス、判断、分岐ロジックを示すユーザーフロー図を作成する。

デザイン・UI81
U
user-persona
user-persona
infrasity-labs / dev-gtm-claude-skills

調査データから、デモグラフィック、目標、不満、行動パターンを備えた洗練されたユーザーペルソナを作成する。ユーザー調査を、デザイン判断に使えるペルソナプロファイルに統合するときに使用する。

デザイン・UI81
U
ux-persuasion-engineer
ux-persuasion-engineer
sickn33 / agentic-awesome-skills

レイアウト、デフォルト設定、手順の順序によって適切な判断が妨げられている場合に、意思決定の障壁を監査し、明快でアクセシブルな UX フローを提案します

デザイン・UI81
V
vision-skills
vision-skills
anionex / agent-vision-toolkit

ローカルビジョン CLI:glance(画像の説明/質問/OCR)、ground(ターゲットの位置特定、ピクセルボックス)、detect(要素の一覧)、trace(画像から SVG ジオメトリへ)、crop(ピクセルボックスをファイルに切り出す)、および scripts/html_shot.py(HTML ファイルから画像へ)。画像を扱うあらゆるタスクに使用する — 質問、テキスト、長いスクリーンショットやチャット履歴の分割と文字起こし、要素の特定、比較、HTML/SVG としての再構築、スケッチや図のデジタル化、グラフからの値の読み取り、スクリーンショットからの GUI 操作 — また、与えられた説明に詳細が欠けている場合に自分で画像を再確認するためにも使用する。

クリエイティブ・メディア81
W
web-components
web-components
manzdev / web-core

モジュール型 ES モジュール(ESM)を用いて、バニラの HTML/CSS/JavaScript(フレームワークなし)を作成または変更する。バニラ技術を用い、クリーンで読みやすいコードを、本番投入可能な形(トランスパイルなし)で書く。軽量で高性能なページ、依存関係のない UI ウィジェット、標準的な JavaScript のリファクタリング、React、Angular、Vue などのフレームワークを使わない迅速なプロトタイピングに有用。

開発81
W
wp-accessibility-review
wp-accessibility-review
jorgerosal / wordpress-skills

テーマ、ブロック、プラグイン、管理画面を対象とした WordPress アクセシビリティレビュー。キーボードナビゲーション、フォーカス動作、セマンティック HTML、ARIA の使用、フォームのラベル付け、スクリーンリーダー対応、コントラストに関連する実装問題のレビュー時、またはユーザーが「accessibility review」「a11y」「キーボードナビゲーション」「フォーカス管理」「スクリーンリーダー」「ARIA」「セマンティック HTML」「アクセシブルなフォーム」「アクセシブルなブロック」に言及した場合に使用する。フロントエンド出力、ブロックのマークアップ、管理画面、インタラクティブな UI 動作における実装レベルのアクセシビリティ問題を検出する。

テスト・品質81
10,627 件中 6841–6900 件

MCP は初めてですか?

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

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