Skip to content
SkillReady to runNewDesign

Dashboard Layout Standards

Written in-house · editorially graded

Every SkillsBank offering is written in-house — never scraped or crowd-sourced — and graded against a fixed editorial rubric in a separate grading step.

Dry-run test passed · Aug 17, 2026

Trigger check passed

Editorially graded · Aug 17, 2026

Steers an AI coding assistant to compose and audit business-app dashboard layouts inside the customer's own codebase — KPI card anatomy, density tiers, scan-order, information budgets, card/table/chart choice, state completeness, and drill-down patterns. Use when building a new dashboard view or when reviewing, fixing, or refactoring an existing dashboard page, component, or folder for layout compliance.

What you get

An installable SKILL.md file for your AI assistant. Produces code.

Works in
Claude Code · Cursor
Native — drops into .claude/skills/
Copilot · Codex · Gemini CLI
Native — reads .agents/skills/
claude.ai — web & desktop
Upload the .zip in Customize → Skills
ChatGPT
Via a Project — paste into its instructions

See it in action

A real input → output sample

Example Input
Review RevenueDashboard.tsx and OpsBoard.svelte against dashboard layout standards, ensuring compliance with rules such as information budget, threshold-coloring, data freshness, and state completeness.
Example Output
{"compliant": true, "violations": [], "recommendations": ["Verify contrast of text-positive/text-negative tokens", "Implement Tab component with role="tablist"/role="tab"/aria-selected", "Define freshness window for staleness badge"]}

Related