mcpField

Skills

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

デザイン・UI

M
migrate-oxygen-to-bricks
migrate-oxygen-to-bricks
respira-press / agent-skills-wordpress

ユーザーが「migrate oxygen to bricks」「convert oxygen to bricks」「replace oxygen with bricks」と言ったときに使用します。Oxygen Builder のコンポーネントツリーを Bricks の JSON 要素にマッピングし、レビュー用の下書き複製を作成します。

開発89
M
migrate-wpbakery-to-bricks
migrate-wpbakery-to-bricks
respira-press / agent-skills-wordpress

ユーザーが「migrate wpbakery to bricks」「convert visual composer to bricks」と言ったとき、または WPBakery サイトを Bricks へモダナイズしたいときに使用します。WPBakery のショートコードを解析し、要素を対応する Bricks の相当物にマッピングし、レビュー用の下書き複製を作成します。

開発89
M
mobile-design
mobile-design
pixel-process-ug / superkit-agents

ユーザーが React Native、Flutter、SwiftUI 向けのモバイルアプリ設計・開発パターンを必要とするときに使用 — プラットフォームの HIG 準拠、ジェスチャー、オフラインファーストアーキテクチャを含みます。トリガー:ユーザーが "mobile"、"iOS"、"Android"、"React Native"、"Flutter"、"SwiftUI"、"app design"、"mobile navigation"、"touch targets"、"offline-first" と言及したとき。

デザイン・UI89
M
mobile-experience-report
mobile-experience-report
respira-press / agent-skills-wordpress

ユーザーが「my site looks bad on mobile」「check mobile layout」「responsive audit」「site broken on phones」と言ったときに使用します。ブレークポイントの問題、テキストサイズ、カラムのスタック失敗、非表示要素、ナビゲーションメニューの動作をデバイスごとに診断します。

デザイン・UI89
O
orbit-general
orbit-general
nexu-io / open-design

Open Orbit ブリーフィングスキル — ユーザーが 2 つ以上のコネクタを接続している場合に Orbit パイプラインが選択する。認証済みの各コネクタ(GitHub、Linear、Notion、Slack、飛書、Calendar、Gmail、Drive、Sentry、Vercel など)から過去 24 時間のアクティビティを取得し、「我的设计」の上部に単一の適応型 bento グリッドダッシュボードをレンダリングする。各コネクタモジュールは返されるデータの形に応じて独自の UI 形式(リスト、アバタースタック、ステータスリング、ヒートマップ、ファイルグリッド、アラートカードなど)を選ぶため、Orbit のコネクタエコシステムの成長に合わせてレイアウトが拡張される。このスキルは手動でトリガーすべきではない — Orbit のデイリーダイジェストスケジューラがユーザーのライブのコネクタデータに対して呼び出す。

生産性89
O
orbit-gmail
orbit-gmail
nexu-io / open-design

Open Orbit ブリーフィングスキル — Gmail がユーザーの唯一の接続済みコネクタである場合、またはユーザーがデイリーダイジェストの対象を Gmail に明示的に限定した場合に、Orbit パイプラインが選択する。ユーザーの認証済み Gmail 接続から過去 24 時間の受信トレイのアクティビティ(返信待ち、メンション、cc、自動分類されたバルク)を取得し、Gmail の閲覧ビュー内で開かれる Orbit Daily Digest メールとしてダイジェストをレンダリングする。このスキルは手動でトリガーすべきではない — Orbit のデイリーダイジェストスケジューラがライブの Gmail データに対して呼び出す。

生産性89
P
parallax-landing-page
parallax-landing-page
hoodini / ai-agents-skills

短い動画からスクロール駆動のシネマティックなランディングページを構築する。ユーザーが 5~15 秒の動画(多くは AI 生成)を提供し、このスキルはすべてのフレームを HD JPEG 品質で抽出したうえで、単一ヒーローの HTML ページを生成する。ユーザーのスクロール操作がその場でフレームをスクラブし(ページ自体は決してスクロールしない)、5 つのドラマチックなテキストオーバーレイがクロスフェードで出入りする —— Google Anton の見出し、Caveat の手書きアクセント、固定された本文、バーチャルスクロール。ユーザーが "turn this video into a landing page"、"make a scroll-scrub landing page"、"build a parallax hero from this clip"、"add a new landing page to the parasites showcase"、"do the same as github/lion/hope for this new video" を望む場合、または短いクリップとドラマチックなスクロール連動ストーリーテリングを組み合わせるあらゆる変種でこのスキルを使用する。ユーザーが "use my video for a landing page" とだけ言った場合でもトリガーする —— それがこのスキルである。

デザイン・UI89
P
practical-typography
practical-typography
ckorhonen / claude-skills

Matthew Butterick の Practical Typography に基づく専門的なタイポグラフィガイダンス。ドキュメントの書式、テキストレイアウト、フォントの選択、句読点、字間、その他印刷物や Web コンテンツのタイポグラフィに関するあらゆる判断を評価、批評、改善するときに使用する。

デザイン・UI89
P
principle-experience-first
principle-experience-first
mariusflorescu / pstack-t3

プロダクト、UX、機能範囲のトレードオフが生じた場合に適用します。実装のしやすさよりユーザーの満足を優先し、粗削りな機能を多く出すより、完成度の高い機能を少数リリースします。

デザイン・UI89
P
promotion-doc-designer
promotion-doc-designer
huyansheng3 / ppt-skills

企業のプレゼン基準に従うプロフェッショナルな昇進/レビュー文書デザイナー。16:9 レイアウト、戦略的な配色(メインブランドのオレンジ #fc5a1f、セカンダリのブルー #3669cd)、洗練された余白設計を備えたクリーンでミニマルな PPT/PDF 文書を作成する。ユーザーが "create promotion doc"、"design review presentation"、"make professional PPT"、"晋升文档设计"、"述职报告" を求めたり、視覚的階層とデータ可視化を備えた企業標準のプレゼン資料を必要とするときに使用。

ドキュメント89
R
react-ui-patterns
react-ui-patterns
chriswiles / claude-code-showcase

ローディング状態、エラー処理、データ取得のための最新React UIパターン。UIコンポーネントの構築、非同期データの処理、UI状態の管理に使用。

デザイン・UI89
R
revealjs

洗練されたhound_callbackabytes

ドキュメント89
S
seo-sxo
seo-sxo
infrasity-labs / dev-gtm-claude-skills

検索体験最適化:Google の SERP を逆読みしてページタイプのミスマッチを検出し、検索意図のシグナルからユーザーストーリーを導き、複数のペルソナ視点でページをスコアリングする。各キーワードに対して Google が何を評価するかを分析し、十分に最適化されたページがなぜ順位を獲得できないかを特定する。ユーザーが "SXO"、"search experience"、"page type mismatch"、"SERP analysis"、"user story"、"persona scoring"、"why isn't my page ranking"、"intent mismatch"、"wireframe" と言ったときに使用する。

マーケティング・グロース89
S
site-architecture
site-architecture
borghei / claude-skills

Web サイトの情報アーキテクチャ、URL 階層、内部リンク戦略、ナビゲーション設計、サイロ構造。アーキテクチャ監査、新規サイト計画、クロールエクイティの最適化、トピッククラスターのマッピングを扱います。

マーケティング・グロース89
S
storefront-theming
storefront-theming
finsilabs / awesome-ecommerce-skills

デザイントークンと CSS カスタムプロパティを使って、ホワイトラベル、複数ブランドのバリアント、ダークモードに対応するテーマ変更可能なストアフロントを構築する

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

デスクトップアプリ向けに Syncfusion Windows Forms の SfButton コントロールを実装・カスタマイズするよう開発者を導く。Windows Forms アプリでテキスト、画像、スタイル、テーマを備えたインタラクティブなボタンを作成するときに使用。実装、カスタマイズ、インタラクション処理を扱う。

デザイン・UI89
T
theme-factory
theme-factory
404kidwiz / claude-supercode-skills

成果物にテーマを適用してスタイルを整えるツールキットです。スライド、ドキュメント、レポート、HTML ランディングページなどに対応します。色とフォントを設定した 10 種類のプリセットテーマを作成済みの成果物に適用でき、その場で新しいテーマを生成することもできます。

デザイン・UI89
U
ui-styling
ui-styling
infrasity-labs / dev-gtm-claude-skills

shadcn/ui コンポーネント(Radix UI + Tailwind ベース)、Tailwind CSS のユーティリティファーストなスタイリング、canvas ベースのビジュアルデザインを使って、美しくアクセシブルなユーザーインターフェースを作成します。ユーザーインターフェースの構築、デザインシステムの実装、レスポンシブレイアウトの作成、アクセシブルなコンポーネント(ダイアログ、ドロップダウン、フォーム、テーブル)の追加、テーマや色のカスタマイズ、ダークモードの実装、ビジュアルデザインやポスターの生成、複数のアプリにわたる一貫したスタイルパターンの確立に使用します。

デザイン・UI89
W
web-design-guidelines
web-design-guidelines
infrasity-labs / dev-gtm-claude-skills

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

デザイン・UI89
W
webconsulting-branding
webconsulting-branding
dirnbauer / webconsulting-skills

現在の webconsulting.at デザインシステムを適用する:ボーダーレスのスクエアサーフェス、Hanken Grotesk のタイポグラフィ、teal/ink のカラートークン、請求書主導の情報階層、ヘッダーのみのブランド告知、ロゴ優先のプロジェクトアイコン、MDX パターン、ダークモード、アクセシビリティ、shadcn/ui 連携。webconsulting.at のページ、内部ツール、tracker/GitLab テーマ、プロジェクトカタログ、TYPO3 テンプレート、ブランドアセット、視覚的一貫性の構築またはレビュー時に使用する。

デザイン・UI89
W
wpf
wpf
managedcode / dotnet-skills

.NET 上で WPF アプリケーションを正しい XAML、データバインディング、コマンド、スレッド、スタイリング、Windows デスクトップ移行の判断とともに構築・モダナイズする。使用対象:WPF UI、MVVM、バインディング、コマンド、デスクトップモダナイズの作業、WPF を .NET Framework から .NET へ移行する作業、WPF アプリに新しい Windows 機能を統合する作業。使用対象外:無関係なスタック、この特定のガイダンスを必要としない一般的なタスク。呼び出し内容:リポジトリのコンテキストを調査し、対象ファイルを編集し、変更時に該当するビルド、テスト、lint、検証コマンドを実行する。

開発89
A
accessibility-testing
accessibility-testing
naodeng / awesome-qa-skills

WCAG、キーボード操作、支援技術のシナリオに基づくアクセシビリティテストを設計する場合に使用します。トリガーには 可访问性测试 と accessibility testing が含まれます。

テスト・品質88
A
android-kotlin-compose
android-kotlin-compose
drjacky / claude-android-ninja

Google 公式の Android アーキテクチャガイダンスに従い、Kotlin、Jetpack Compose、MVVM アーキテクチャ、Hilt による依存性注入、Room データベース、マルチモジュールアーキテクチャを用いて本番品質の Android アプリを作成する。Android プロジェクト、モジュール、画面、ViewModel、リポジトリの作成を依頼されたとき、または Android のアーキテクチャパターンとベストプラクティスについて尋ねられたときにトリガーする。

開発88
A
ant-design-mobile
ant-design-mobile
partme-ai / full-stack-skills

Button、Form、List、Modal、Picker、Tabs、PullToRefresh、InfiniteScroll など 50 以上のモバイル最適化コンポーネントを含む Ant Design Mobile(antd-mobile)コンポーネントで React のモバイル UI を構築する。ユーザーがモバイルファーストの React インターフェースを作成し、Ant Design Mobile でモバイルナビゲーション、フォーム、データ表示を実装する必要があるときに使用する。

デザイン・UI88
B
b24-ui-nuxt
b24-ui-nuxt
bitrix24 / b24ui

@bitrix24/b24ui-nuxt v2 で UI を構築——130+ のアクセシブルな Vue コンポーネントと Tailwind CSS テーマ。Bitrix24 アプリのインターフェース作成、フォーム構築、レイアウト構成を行うときに使用。

デザイン・UI88
B
brand-guidelines

ユーザーがあらゆる製品や会社のブランドガイドラインを適用・文書化・徹底したいときに使用します。「ブランドガイドライン」「ブランドカラー」「タイポグラフィ」「ロゴの使用」「ブランドボイス」「ビジュアルアイデンティティ」「トーン・オブ・ボイス」「ブランド基準」「スタイルガイド」「ブランドの一貫性」「会社のデザイン基準」などという言及があった場合にも使用します。色彩システム、タイポグラフィ、ロゴのルール、画像のガイドライン、トーンマトリクスをあらゆるブランドを対象に扱います。Anthropic の公式アイデンティティも対象です。

デザイン・UI88
C
card-theater
card-theater
unclecheng-li / ai_animation

サイドバーのナラティブと 3D カードカルーセルを備えたデモアニメーション HTML ページを生成する。スクロールページ送り、Coverflow 3D、Focus 展開など複数のインタラクションモードに対応し、モード切り替え(トランスポート/トンネルなど)、ハイライトマーカー、ウォーターマークアイコンなどの効果を内蔵する。プロトコルフローのデモ、製品機能の紹介、ステップごとの解説に適している。

クリエイティブ・メディア88
D
dashboard-design
dashboard-design
mckinsey / vizro

ユーザーがダッシュボード、特に Vizro ダッシュボードを設計または計画したいときに最初に使用する skill。実装前に 3 ステップのワークフロー(要件、レイアウト、可視化)を強制する。ユーザーがダッシュボードの作成、設計、計画を求めたときに有効化する。実装には、ステップ 1〜3 の完了後に dashboard-build skill を使用すること。

デザイン・UI88
D
dashboard
dashboard
starchild-ai-agent / official-skills

チャートとリアルタイムデータ更新を備えたライブ HTML、CSS、JS ダッシュボードを構築する。マルチパネルの監視ビュー(ポートフォリオダッシュボード、価格トラッカー、システムヘルスボード、マルチアセット比較など)を組み立てるときに使用。

デザイン・UI88
D
data-dashboard
data-dashboard
plugin87 / ux-ui-agent-skills

分析コンソールやトレーディングターミナルなど、情報量の多い画面を構築します。トークンから実際のチャート(ローソク足、出来高、板情報、積み上げ面、ウォーターフォール、散布図、相関行列、ドーナツ、ゲージ、スパークライン、ヒートマップ、オーダーブック)を描画します。ダッシュボード、ターミナル、監視ビュー、データコンソールなど、多数の数値を一度に表示する画面に使用します。レイアウトの手順、SVGのジオメトリ、チャート種別ごとのアクセシビリティ要件、ダークモードでのみ現れるコントラスト上の問題を扱います。

デザイン・UI88
F
flow
flow
simota / agent-skills

ホバー効果、ローディング状態、モーダルのトランジション、ジェスチャー操作のための CSS/JS アニメーションを実装する。意味のあるモーション、インタラクションのフィードバック、パフォーマンスに安全なアニメーションに使用する。

デザイン・UI88
F
frontend-a11y
frontend-a11y
mikemai2awesome / agent-skills

過剰な設計をせず、最小限でアクセシブルな Web UI を書く。プロジェクトが使う技術スタック(React、Vue、Svelte、Angular、Web Components、プレーン HTML)に適応する。マークアップやコンポーネントの作成・レビュー、フォームの構築、ボタン、ダイアログ、アコーディオン、タブなどのインタラクティブ要素の追加、コードのアクセシビリティ監査を行うすべてのプロジェクトとタスクでこのスキルを使用する。ユーザーがアクセシビリティに言及していない場合でも、フレームワーク、CMS、デザインシステムの内部であっても同様である。プロジェクトの種類、スタック、締め切りに関係なく必須である。ARIA 属性、ダイアログライブラリ、フォーカストラップパッケージ、ヘッドレス UI コンポーネントに手を伸ばそうとしている?まずこのスキルを使用する。

デザイン・UI88
G
gentleman-bubbletea
gentleman-bubbletea
gentleman-programming / engram

Gentleman.Dots インストーラーの Bubbletea TUI パターン。トリガー:installer/internal/tui/ 内の Go ファイルを編集するとき、TUI 画面を扱うとき、新しい UI 機能を追加するとき。

開発88
G
gsap
gsap
jbmanllr / agent-skills

Web アニメーション、タイムラインのシーケンス、スクロール連動アニメーション、SVG アニメーション、レイアウトトランジションの実装、または GSAP、ScrollTrigger、ScrollSmoother、SplitText、Flip、DrawSVG、MorphSVG、MotionPath、@gsap/react の useGSAP フックの使用時に使用。

デザイン・UI88
H
hmx-development-icons

説明はまだありません

デザイン・UI88
M
material-design-3-guide
material-design-3-guide
shelbeely / shelbeely-agent-skills

Material Design 3 のマスターガイド — Material You の基礎から M3 Expressive までの完全な仕様を扱う。各 Material Design 3 skill サブセット(カラー、モーション、タイポグラフィ、シェイプ、レイアウト、コンポーネント、アイコン)をいつ使うべきかを説明する。Material Design 3 のプロジェクトを始めるとき、どの M3 skill を適用すべきかを理解したいとき、またはユーザーが Material Design 3 全般について尋ねるときに使用する。

デザイン・UI88
M
media
media
danielmiessler / lifeos

ビジュアルおよび動画コンテンツの制作。AI 画像、技術図、mermaid フローチャート、インフォグラフィック、コミック、特殊効果。使用場面:アート、図、mermaid、フローチャート、インフォグラフィック、動画、アニメーション、サムネイル、可視化、画像生成、技術図。

クリエイティブ・メディア88
M
mph-synthwave-theme
mph-synthwave-theme
mphinance / alpha-skills

Michael のシグネチャーである Synthwave / TraderDaddy / Bloomberg の美学を用いて、UI コンポーネント、ダッシュボード、ページを生成する。

デザイン・UI88
N
nsfc-roadmap
nsfc-roadmap
huangwb8 / chineseresearchlatex

ユーザーが明示的に「NSFC 技術ロードマップの生成/技術ロードマップの作図/roadmap/flowchart」を求めた場合、または申請書の研究内容を「印刷可能で A4 で読める」技術ロードマップに変換する必要がある場合に使用します。既定では編集可能なソースファイル(`.drawio`)とドキュメントに埋め込めるレンダリング結果(`.svg`/`.png`/`.pdf`)を出力します。ユーザーが Nano Banana 画像モデルに言及した場合は PNG-only モードに切り替え可能で、Gemini と OpenAI `gpt-image-2` に対応します。非該当:既存の画像の形式やサイズだけを変更したい場合(画像処理スキルを使用すべき)、技術ロードマップの文章表現だけを整えたい場合(本文を直接書き換えるべき)。

デザイン・UI88
O
orbit-linear
orbit-linear
nexu-io / open-design

Open Orbit briefing スキル——Linear がユーザー唯一の接続済みコネクターである場合、またはユーザーが毎日のダイジェストを明示的に Linear に限定した場合に、Orbit パイプラインによって選択される。ユーザーの認証済み Linear 接続から過去 24 時間の issue の動き、ステータス変更、アサイン、サイクルの進捗を取得し、Linear ネイティブの Inbox + サイクル進捗のビジュアル言語でダイジェストをレンダリングする。このスキルは手動でトリガーすべきではない——Orbit のデイリーダイジェストスケジューラーがライブの Linear データに対して呼び出す。

生産性88
O
orbit-notion
orbit-notion
nexu-io / open-design

Open Orbit briefing スキル——Notion がユーザー唯一の接続済みコネクターである場合、またはユーザーが毎日のダイジェストを明示的に Notion に限定した場合に、Orbit パイプラインによって選択される。ユーザーの認証済み Notion 接続から過去 24 時間のドキュメント編集、コメント、メンション、データベース行の変更を取得し、ダイジェストをネイティブな Notion ページ(callout / toggle / database table プリミティブ)としてレンダリングする。このスキルは手動でトリガーすべきではない——Orbit のデイリーダイジェストスケジューラーがライブの Notion データに対して呼び出す。

生産性88
P
panda-css
panda-css
chakra-ui / panda

Panda CSS を使用するプロジェクトでスタイルを記述・編集する。css()、cva()、sva()、patterns、recipes、tokens、conditions、JSX style props を呼び出すコードの作成・変更・レビュー時、スタイルがクラス名を出力するのに CSS が出ない場合、またはスタイルがまったく適用されない場合に使用する。Panda v2(2.x)と v1(1.x)を対象とする。テーマの設計や、いつ recipe や slot recipe にするかの判断(panda-css-theming を使用)、v1 から v2 へのアップグレード(panda-css-migrate を使用)には使用しない。

デザイン・UI88
Q
qe-visual-accessibility
qe-visual-accessibility
proffesor-for-testing / agentic-qe

ビューポートをまたいでスクリーンショットを取得・比較し、axe-core のアクセシビリティスキャンを実行し、ピクセル差分分析で視覚的リグレッションを検出します。UI リグレッションの検出、レスポンシブレイアウトの検証、WCAG 準拠のテスト、CSS やコンポーネント変更後の視覚的一貫性の確保に使用します。

テスト・品質88
R
recharts-patterns
recharts-patterns
yonatangross / orchestkit

Recharts 3.x によるデータ可視化。レスポンシブチャート、カスタムツールチップ、アニメーション、React アプリケーションのアクセシビリティを含む。Recharts でチャートやダッシュボードを構築するときに使用。

デザイン・UI88
R
responsive-design
responsive-design
flitzrrr / frontend-design-skills

モバイルファースト戦略、ブレークポイント、流動的なレイアウト、コンテンツの構成、および CSS Grid、Flexbox、モダンなレスポンシブ手法によるクロスデバイス最適化。

デザイン・UI88
S
signup-flow-cro
signup-flow-cro
syntax-syndicate / marketing-skills

ユーザーがサインアップ、登録、アカウント作成、トライアル開始のフローを最適化したい場合に使用します。「サインアップのコンバージョン」「登録時の負担」「サインアップフォームの最適化」「無料トライアルへの登録」「サインアップ離脱の削減」「アカウント作成フロー」「登録者がいない」「サインアップの離脱」「トライアルのコンバージョン率」「登録が完了しない」「登録手順が多すぎる」「サインアップを簡略化」などに言及した場合にも使用してください。サインアップ/登録フローの成果が出ていない場合は常に使用してください。登録後のオンボーディングについては onboarding-cro、アカウント作成以外のリード獲得フォームについては form-cro を参照してください。

マーケティング・グロース88
S
spatial-rhythm
spatial-rhythm
dragoon0x / taste-skills

密度、余白、リズム、そして空間が要素間の関係をどう伝えるか。レイアウトを構築するとき、余白の一貫性を評価するとき、デザインが窮屈または空虚に感じられる理由を診断するときに使用。

デザイン・UI88
S
stl-generator
stl-generator
ihistand / claude-skills

build123d(Python CAD)で、木工用の治具・固定具、および実測したオリジナルからモデリングする交換部品向けの 3D プリント可能な STL ファイルを生成する。ユーザーが、円切り用のトラメルやランプシェードリング治具、角度ウェッジ、スペーサーやセットアップブロック、ドリルガイド、ルーターテンプレート、位置合わせや組み立て用の治具、交換用のねじ式ランプグローブやシェード、または測定値から複製した任意のカスタム 3D プリント治具・部品を求める場合に使用する。すぐに使えるスクリプトと、印刷に失敗する STL を拒否しサポートが必要なオーバーハングを検出する印刷準備チェックを同梱する。既定のビルドボリュームは Elegoo Neptune 4 Pro(使用可能 220 x 220 x 260 mm)で、プリンターごとに上書き可能。メートル法単位。

デザイン・UI88
S
storybook-args-controls

Storybook のストーリー向けにインタラクティブなコントロールと args を設定するときに使用。適切な型制約を備えた動的で探索可能なコンポーネントのデモを作成するのに役立つ。

開発88
S
storybook
storybook
fandhe-ai / agent-reference-skills

Storybook(UI コンポーネントカタログ・テストツール)リファレンス。 story, CSF (Component Story Format)、args, argTypes, decorators、 play function、interaction tests、autodocs、 main.ts / preview.ts 設定、アドオン (a11y, controls, viewport, themes)。

開発88
S
svelte-styling
svelte-styling
spences10 / skills

Svelte の CSS スタイリングパターン。スコープ付きスタイル、CSS カスタムプロパティ、style: ディレクティブ、:global、子コンポーネントのスタイリングに使用する。

デザイン・UI88
S
system-deconstruction
system-deconstruction
dragoon0x / taste-skills

デザインシステムをそれを構成する意思決定に分解し、それぞれを評価します。デザインシステムの監査、一貫性の評価、製品が大規模になっても品質を維持する方法の理解に使用します。

デザイン・UI88
T
tables
tables
mwguerra / claude-code-plugins

列、フィルター、並べ替え、検索、一括操作を備えた FilamentPHP v4 テーブルを作成する

開発88
U
ux-css-layout
ux-css-layout
microsoft / vscode

VS Code の CSS 規約、ファイル構成、クラス命名、標準サイズ、SplitView/Grid レイアウト、スクロール可能なコンテンツ、レスポンシブレイアウト、テキストのオーバーフロー/省略記号パターン。CSS の記述、レイアウトの構築、テキスト切り捨ての問題修正に使用します。

デザイン・UI88
U
ux-flow-auditor
ux-flow-auditor
heyeddi-com / heyeddi-skills

Playwright でユーザーのタスクフローを追跡する: クリック深度、ステップ成功率、摩擦ポイント。レポートを .heyeddi/docs/ux-flows/ に書き出す。使いやすさ、タスク完了までのクリック数、オンボーディングの摩擦を測定するときに使用する。静的な視覚レビュー(heyeddi-design critique を使用)やレイアウトのスクリーンショット(visual-auditor を使用)には適さない。

デザイン・UI88
U
ux-theming
ux-theming
microsoft / vscode

VS Code のテーマ設定、カラートークン、ウィジェットのスタイル、フォーカスインジケーター、ハイコントラストテーマのサポート。色の登録、テーマトークンによるウィジェットのスタイル設定、HC/フォーカス準拠の確保に使用。

デザイン・UI88
W
web-artifacts-builder
web-artifacts-builder
snyk / agent-scan

React、Tailwind CSS、shadcn/ui などの最新フロントエンド web 技術を使用して、claude.ai 内に複雑で多くのコンポーネントを持つ HTML artifacts を作成するツールスイート。状態管理、ルーティング、または shadcn/ui コンポーネントが必要な複雑な artifacts に使用します。シンプルな単一ファイルの HTML/JSX artifacts には適しません。

デザイン・UI88
W
web-design-guidelines
web-design-guidelines
andrelandgraf / fullstackrecipes

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

デザイン・UI88
W
web-design-guidelines
web-design-guidelines
itallstartedwithaidea / agent-skills

Web Design Guidelines は、アクセシビリティ、フォーカス状態、フォーム、アニメーション、タイポグラフィ、画像、パフォーマンス、ナビゲーション、ダークモード、タッチターゲット、国際化をカバーする 100 以上のルールをエンコードしている。

デザイン・UI88
W
web-performance-seo
web-performance-seo
zhanlincui / agent-skills-hunter

コントラスト監査の失敗(CSS フィルター、OKLCH/OKLAB、低い不透明度、グラデーションテキスト、画像背景)によって生じる PageSpeed Insights/Lighthouse のアクセシビリティ "!" エラーを修正する。アクセシビリティを起点とした SEO/パフォーマンスのデバッグと改善に使用する。

デザイン・UI88
10,627 件中 6541–6600 件

MCP は初めてですか?

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

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