메뉴
デジタル庁のダッシュボードデザイン実践ガイドブックに基づく、見やすいダッシュボード設計・作成のガイド。グラフ選び、レイアウト、カラーパレット、アクセシビリティ、チェックリストを網羅。Use when ダッシュボードを新規作成したい、既存ダッシュボードを改善したい、可視化設計をレビューしたい、または軽量HTML・Grafana・SQLiteベースのダッシュボード設計方針を決めたい時。
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
アプリ組み込み AI チャットフロントエンドの設計・実装ガイド。 前半は言語非依存の抽象設計パターン（ストリーミングファースト、チャット状態マシン、 メッセージモデル、楽観的UI、エラーリカバリ、UX原則、マルチセッション、サーバー設計原則）、 後半は Vercel AI SDK (useChat) による TypeScript 具体実装。 フレームワーク非依存（Next.js, React SPA, Vue, Svelte, SvelteKit, Nuxt 対応）。 Use when チャット機能を追加したい、AIチャットUIを作りたい、useChat を使いたい、 ストリーミングチャットを実装したい、チャットボットUIを組み込みたい、 AI SDK でチャットを作る、またはチャットUIの設計パターンを整理・レビューしたい時。 Python/Go/Rust 等の非 TypeScript 環境でも設計パターン部分は適用可能。 既存のチャットUIのレビュー・改善にも使える。 対象外: チャット以外の AI SDK 用途（テキスト生成のみ、画像生成、エンベディング等）。
Use this skill whenever the user asks to create, structure, review, or refine a business plan, new business proposal, growth strategy, GTM outline, or venture hypothesis. Build a rational, persuasive business plan with reader-specific framing and bottom-up numerical planning. Distinguish researched facts from benchmarks and estimates, use frameworks only as supporting tools, and forecast outcomes from causal drivers instead of reverse-engineering a desired result. Use it even when the user only says "事業計画", "戦略を考えたい", "新規事業を整理したい", or asks for AI agent / SaaS business planning without naming any framework.
Use this skill whenever the user asks for brainstorming, ideation, concept expansion, service improvement ideas, strategy options, workshop structure, or says thinking is stuck and needs more perspectives. Select and apply one or more brainstorming frameworks based on the user's goal, solo vs group setting, divergence vs convergence need, and business vs creative context. Use it even if the user does not name a framework.
Design principles for building CLI tools that LLM/AI agents can safely and reliably operate. Provides 7 core principles (Machine-readable, Non-interactive, Idempotent, Safe-by-default, Observable, Context-efficient, Introspectable) with scorecard, templates, and anti-patterns. Use when: (1) designing new CLI tools for agent use, (2) improving existing CLIs for agent compatibility, (3) reviewing CLI design for agent-friendliness, or (4) need guidance on JSON output formats, exit codes, authentication flows, or self-describing CLI patterns.
Fast, script-friendly CLI for Google services via `gog`. Use this skill whenever the user needs to work with Gmail, Google Calendar, Drive, Docs, Sheets, Slides, Forms, Apps Script, Contacts, Tasks, People, Chat, Classroom, Groups, Admin, or Keep from the terminal, especially for Google Workspace automation, account setup, OAuth/client configuration, service accounts, domain-wide delegation, or JSON/scriptable workflows. Prefer this skill even when the user does not mention `gog` explicitly but is clearly trying to automate or inspect Google services from a CLI or agent workflow.
Audit and reorganize an existing test suite to remove outdated tests, reduce duplication, and isolate external dependencies from unit tests. Use this skill whenever the user wants to clean up tests, find obsolete or redundant tests, detect unit tests that directly hit APIs/URLs/timers/commands/databases/filesystems/env state, improve mock boundaries, reduce flakiness, or clarify the boundary between unit and integration tests. Use it even if the user only says things like "整理したい", "モック化したい", "テストが遅い", or "古いテストを掃除したい".
| name | dashboard-design-guidebook |
| description | デジタル庁のダッシュボードデザイン実践ガイドブックに基づく、見やすいダッシュボード設計・作成のガイド。グラフ選び、レイアウト、カラーパレット、アクセシビリティ、チェックリストを網羅。Use when ダッシュボードを新規作成したい、既存ダッシュボードを改善したい、可視化設計をレビューしたい、または軽量HTML・Grafana・SQLiteベースのダッシュボード設計方針を決めたい時。 |
デジタル庁「ダッシュボードデザインの実践ガイドブック」（2026.3.31更新）の実質をまとめたスキル。完全版は references/guidebook-full.txt に収録。
5W1Hで整理する：
| 視点 | 確認事項 |
|---|---|
| Why | 最終的に達成したい目的、ダッシュボードを見る理由 |
| What/So What | 知るべき情報、必要なデータ種類、見た後の判断や行動 |
| Who/When/Where | 見る人（属性・リテラシー）、タイミング・頻度、場所・デバイス |
| How | 求める機能、データ項目、更新頻度 |
制約チェック：
実装後に下記チェックリストで確認。
| グラフ | 表現 | 適する用途 |
|---|---|---|
| 折れ線グラフ | 位置 | 時間変化・傾向 |
| 棒グラフ | 長さ | 数量比較 |
| 面グラフ（積み上げ） | 位置+面積 | 時間変化＋構成比 |
| 円グラフ | 角度+面積 | 構成比（総量が明らかな時） |
選び方の判断基準：
7系統: Blue, Light Blue, Cyan, Green, Orange, Red, Solid Gray
コントラスト要件:
Do's:
Don'ts:
references/guidebook-full.txt