ダッシュボードデザイン向けの Agent Skills

ダッシュボード、プロダクトUI、階層、アクセシビリティ、テーマ設定、デザインシステムを扱うフロントエンドインターフェース設計スキル。クラフト重視のワークフロー。ダッシュボード設計に広く関連するが、ダッシュボード専用ではない。

提供元：pbakaus/impeccable

• Layout & hierarchy

前提条件（自己申告）: Node.js

ダッシュボードを含むユーザー向けインターフェースにおける、容赦ない削減とクラフトのためのデザインセンススキル。トークン、階層、状態、モーションを扱う。ダッシュボードのクラフトに関連するが一般的なインターフェースデザイン。

提供元：deeflect/mies

デザインシステム、ダッシュボード、フォーム、ナビゲーション、アクセシビリティ、プラットフォームガイドラインを網羅するPenpotの包括的UI/UXデザインガイド。ダッシュボードも設計できるが、汎用的なPenpot UI/UXガイド。

提供元：github/awesome-copilot

• Color & access

HTML/CSS/JS/Reactで洗練されたブラウザレンダリングのビジュアル成果物を構築します。ダッシュボード、プロトタイプ、データビジュアライゼーションを含みます。ダッシュボードも構築できますが、幅広いWebデザインエンジニアリングスキルです。

提供元：conardli/garden-skills

ダッシュボードを含むプロダクションUIのフロントエンドデザイン方向性を設定。階層、タイポグラフィ、色、モーション、非汎用パターンをカバー。ダッシュボードのビジュアル方向性に関連しますが、一般的なフロントエンドデザインです。

提供元：affaan-m/ecc

• Layout & hierarchy
• Color & access

新規UI構築時や既存UI再形成時に、際立った意図的なビジュアルデザインを導く。美的方向性、タイポグラフィ、テンプレート然としない選択を支援。

提供元：anthropics/skills

• Color & access

硬質なグリッド、極端なタイプスケール、データ重視ダッシュボード向けの実用主義的な配色を備えた、インダストリアル・ブルータリストかつタクティカルなテレメトリUIデザインシステム。ダッシュボードの美学に直接対応するが、特定のビジュアルスタイル。

提供元：leonxlnx/taste-skill

• Color & access

スペーシング、階層、タイポグラフィ、レイアウトの問題を修正する、意見の強いUIベースラインを徹底し、AI生成インターフェースの雑さを防ぎます。ダッシュボードの洗練と階層に関連しますが、一般的なUIクリーンアップです。

提供元：ibelick/ui-skills

ログ、メトリクス、トレーシング、アラートでコードを計装し、本番の挙動を可視化します。ダッシュボードのメトリクスとアラートの側面に関連しますが、計装に関するものでダッシュボード設計ではありません。

提供元：addyosmani/agent-skills

構造化ログ、Prometheusメトリクス、OpenTelemetryトレーシング、アラート、GrafanaダッシュボードをカバーするGoの可観測性。メトリクスとアラートの側面に関連するが、Go固有で計装に焦点を当てている。

提供元：samber/cc-skills-golang

MRR、チャーン、CAC/LTV、バーンレートなどのスタートアップKPIを追跡・計算し、投資家・取締役会向けダッシュボードに反映。ダッシュボードの指標面に関連するが、指標フレームワークでありダッシュボードデザインではない。

提供元：wshobson/agents

Firecrawlブラウザで分析ダッシュボードや社内ウェブツールから指標を取得し、構造化された指標サマリーを生成します。ダッシュボードデータの抽出に関連しますが、ダッシュボードの設計ではありません。

提供元：firecrawl/firecrawl-workflows

• Metrics

Nuxt UI v4コンポーネントとTailwindテーマでUIを構築します。サイドバーとパネルを備えたダッシュボードレイアウトを含みます。ダッシュボード実装に関連しますが、コンポーネントライブラリのスキルです。

提供元：onmax/nuxt-skills

• Color & access

アプリケーションのページ、ビュー、または複数セクションのレイアウトをFigmaへ変換するタスクでは、figma-useと併用してこのスキルを使用します。トリガー例:「Figmaに書き出して」「コードからFigmaで作成して」「ページをFigmaにプッシュして」「このアプリ/ページをFigmaで構築して」「画面を作成して」「Figmaでランディングページを構築して」「コードに合わせてFigma画面を更新して」。ユーザーがコードや説明からFigmaで完全なページ、画面、ビューを構築または更新したいときは常に、このワークフロースキルが推奨されます。search_design_systemでデザインシステムのコンポーネント、変数、スタイルを発見し、それらをインポートし、ハードコードされた値ではなくデザインシステムのトークンを使ってセクションごとに画面を段階的に組み立てます。

提供元：openai/skills

Figma MCPサーバーを使用して、Figmaからデザインコンテキスト、スクリーンショット、変数、アセットを取得し、Figmaノードを本番コードに変換します。タスクにFigma URL、ノードID、デザインからコードへの実装、またはFigma MCPのセットアップとトラブルシューティングが含まれる場合にトリガーされます。

提供元：openai/skills

前提条件（自己申告）: Node.js

ユーザーのコードベース向けにカスタムデザインシステムルールを生成します。ユーザーが「create design system rules」「generate rules for my project」「set up design rules」「customize design system guidelines」と言った場合や、Figma-to-codeワークフロー向けのプロジェクト固有の規約を確立したい場合に使用します。Figma MCPサーバー接続が必要です。

提供元：openai/skills

前提条件（自己申告）: MCP server

Figmaデザインを1:1の視覚的忠実度で本番投入可能なアプリケーションコードに変換します。FigmaファイルからUIコードを実装する場合、ユーザーが「デザインを実装」「コードを生成」「コンポーネントを実装」と言及した場合、Figma URLを提供した場合、またはFigma仕様に一致するコンポーネントの構築を求めた場合に使用します。`use_figma`によるFigmaキャンバスへの書き込みには`figma-use`を使用します。

提供元：openai/skills

前提条件（自己申告）: Node.js

PenpotファイルからDESIGN.mdデザインドキュメントファイルを抽出する：design-md形式のポータブルなMarkdown仕様（色・タイポグラフィ・角丸・スペーシング・コンポーネントのトークンマップを含むYAMLフロントマター＋Overview、Colors、Typography、Layout、Shapes、Components、Do's & Don'ts、Iteration Guide、Known Gapsの散文セクション）。ファイルの実際のトークン、ライブラリアセット、サンプリングしたコンポーネントスタイルに基づき、決して創作しない。キャンバスは読み取り専用で、ローカルのMarkdownファイルを1つ書き出す。トリガー：'generate DESIGN.md'、'create a design.md'、'document the design system as markdown'、'export design guidelines'、'extract design documentation'、'design system spec file'、'make a style guide file from this design'。

提供元：penpot/penpot-ai-kit

Penpotデザインを実装コード（ソースコンポーネントまたはStorybookストーリー）と照合してレビューし、構造化されたDRIFTレポートを出力します。エンジニアがビルドがデザインと一致するか確認する必要があるときに使用します。選択範囲からHTML/CSSを抽出し、そのトークン/構造/状態をコードコンポーネントにマッピングし、差分を取り、各側に欠けているものを重大度と調整案とともに列挙します。コードソースが提供されない場合は、デザインシステムトークンのチェックに優雅にフォールバックします。トリガー: 'design to code review'、'does my code match the design'、'design code parity'、'compare Penpot to my component'、'check this against Storybook'、'extract HTML/CSS from this selection'、'find design drift'、'design implementation diff'。

提供元：penpot/penpot-ai-kit

Penpotデザインのデザインシステム／トークンガバナンス問題（アクセシビリティとは別）を監査する：トークンが存在するのにハードコードされた色、グリッドから外れた間隔、孤立／未解決／未使用のトークン、重複した値、コンポーネントインスタンスであるべき分離されたパーツ。重大度レポートを生成し、セマンティックトークンへの置き換えを提案する。トリガー：「audit tokens」「find hardcoded colors」「token governance」「check design system consistency」「find off-grid spacing」「detect raw values」「are we using tokens correctly」。

提供元：penpot/penpot-ai-kit

テーマで成果物をスタイリングするためのツールキット。成果物はスライド、ドキュメント、レポート、HTMLランディングページなど。色やフォントを設定した10個のプリセットテーマがあり、作成済みの任意の成果物に適用できるほか、その場で新しいテーマを生成することも可能。

提供元：anthropics/skills

• Color & access

Anthropicの公式ブランドカラーとタイポグラフィを、Anthropicのルックアンドフィールが役立つあらゆる成果物に適用します。ブランドカラーやスタイルガイドライン、視覚的フォーマット、企業のデザイン標準が該当する場合に使用します。

提供元：anthropics/skills

読み取り専用スクリプトで、アラームルール、アラーム履歴、ダッシュボードを含むHuawei Cloudの監視リソースを照会する。監視ダッシュボードに関連するがHuawei専用で照会のみ。

提供元：huaweicloud/huaweicloud-skills

>- 解決済みのPromQLまたはListTimeSeriesクエリから、Google Cloud MonitoringのServer-Driven UI（SDUI）WidgetおよびXyChart Protocol Buffer textprotoを生成します。使用する場合: - Cloud Monitoring Dashboards API、gcloud CLI、または宣言型ダッシュボード定義で使用するため、PrometheusQueryまたはTimeSeriesFilterデータセットを含む有効なgoogle.monitoring.dashboard.v1.Widget textprotoを生成するとき。- PrometheusまたはListTimeSeriesクエリ向けにServer-Driven UI（SDUI）ウィジェットのタイトル、軸ラベル、プロットタイプを合成するとき。使用しない場合: - メトリクスの探索やPromQLクエリの生成。これらのタスクにはcloud-monitoring-metric-selectionまたはcloud-monitoring-promql-queryスキルを使用してください。

提供元：google/skills

> 高いデザイン品質とデザインシステム準拠を備えた、際立つプロダクショングレードのフロントエンドインターフェースをレビューし作成する。3つの柱で評価する：摩擦のないインサイトからアクションへの流れ、品質あるクラフト、信頼できる構築。USE FOR: PRレビュー、デザインレビュー、アクセシビリティ監査、デザインシステム準拠チェック、クリエイティブなフロントエンドデザイン、UIコードレビュー、コンポーネントレビュー、レスポンシブデザインチェック、テーマテスト、記憶に残るUIの作成。DO NOT USE FOR: バックエンドAPIレビュー、データベーススキーマレビュー、インフラまたはDevOps作業、UIを伴わない純粋なビジネスロジック、フロントエンド以外のコード。

提供元：microsoft/skills

• Color & access

シニアビジュアルデザイナーとして、ブリーフからPenpotで本番品質の画面を設計します — 既存のデザインシステム（トークン＋コンポーネント）を再利用し、セクションごとに組み立て、決して一発で仕上げません。説明から画面/ページ/ランディング/ダッシュボードを作成する際に使用します。既存コードの変換には使用しません（penpot-build-from-codeを使用）。トリガー：「ダッシュボードをデザインして」「ランディングページを作成して」「このアプリ画面をデザインして」「このブリーフからUIを構築して」「設定ページをデザインして」「Penpotで画面をモックアップして」。

提供元：penpot/penpot-ai-kit

Web Interface Guidelines への準拠について UI コードをレビューします。「review my UI」「check accessibility」「audit design」「review UX」「check my site against best practices」と依頼されたときに使用します。

提供元：vercel-labs/agent-skills

antfuスタイルのデザイン規約を拡張。UnoCSSファーストで、ツールや開発者ツールUI向けのライト/ダーク両対応のクラスベースのセマンティックトークンに加え、ランディングページやプロダクト画面向けのデザイン読解、アンチスロップ、マイクロインタラクションの磨き込み。UnoCSSでインターフェースを構築またはリファクタリングする際に使用。

提供元：antfu/skills

>- GCPサービスやリソース（Compute Engine、Spanner、BigQuery、Cloud Run、Cloud SQL、Pub/Sub、Cloud Storageなど）に関連するGoogle Cloud Monitoringのメトリクス記述子を取得・照会・特定します。GCPのメトリクスタイプ、名前、kind/valueスキーマ、記述子の検索・一覧・探索を求められたときに使用します。

提供元：google/skills

PenpotデザインをWCAG 2.1/2.2 AA（任意でAAA）に照らして監査し、構造化された重大度レポートを作成します。対象は色のコントラスト、タッチ/ターゲットサイズ、テキスト代替、見出し階層、キーボード/フォーカス順序です。修正案を提示しますが自動適用はしません。brief-to-screenループではEvaluatorとしても機能します。トリガー: 'check accessibility'、'accessibility audit'、'WCAG check'、'contrast audit'、'a11y review'、'check color contrast'、'is this accessible'。

提供元：penpot/penpot-ai-kit

• Color & access

Appleのインターフェースデザインと流動的で物理的なモーションへのアプローチをWeb向けに翻訳。ジェスチャー駆動UI、スプリングアニメーション、ドラッグ/スワイプ/シート操作、慣性と中断可能なトランジション、半透明素材と奥行き、タイポグラフィ（オプティカルサイジング、トラッキング、行間）、視差効果を減らす設定、Appleスタイルのインターフェースを支えるデザイン基盤（フィードバック、空間的一貫性、抑制）の構築やレビュー時に使用。

提供元：emilkowalski/skills