Dashboard design skill for AI agents

Overview

The Dashboard design skill is a comprehensive, implementation-ready design system guideline built for AI agents. It encodes the entire visual identity, component specifications, and interaction standards of a cloud-platform dashboard into a single SKILL.md file that any AI coding assistant can follow.

Dashboard design emphasizes grids, modular components, and strong visual hierarchy to present complex data in a clear and accessible way. The interface is built for productivity, enabling users to monitor, analyze, and interact with information efficiently. Inspired by the aesthetic of platforms like Heroku, Vercel, and GitHub, it pairs a dark theme with glass-like panels, subtle gradients, and soft shadows. Every rule in this skill file is anchored to a concrete token, threshold, or example — no ambiguous adjectives.

Style foundations

The Dashboard design system is built on a modern, clean, cloud-platform aesthetic with carefully defined foundations.

Typography

The system uses the IBM Plex Sans family across all three roles — primary, display, and monospace — creating a unified, engineering-grade typographic voice. The scale follows a progression of 12 / 14 / 16 / 20 / 24 / 32 pixels, and all nine font weights (100–900) are available for precise typographic control. The single-family approach keeps data-heavy interfaces visually cohesive and reduces font-loading overhead.

Color palette

The system uses semantic tokens across five palettes — primary, neutral, success, warning, and danger — so components reference tokens rather than raw hex values. The dark surface with near-white text and a deep blue primary creates the signature cloud-platform look: professional, data-focused, and built for long sessions.

Visual treatment

Surfaces use glass-like panels with subtle transparency and soft shadows for depth. Components are rounded to soften the density of data-heavy layouts. Subtle gradients add dimensionality without distracting from the content.

Spacing

All spacing follows an 8pt baseline grid to maintain a consistent vertical and horizontal rhythm across every component.

Component families

The Dashboard skill covers a wide range of component families, organized into logical groups:

• Inputs and forms — buttons, inputs, textareas, selects/comboboxes, checkboxes, radios, switches, date/time pickers, file uploaders
• Data display — cards, tables, data lists, data grids, charts, stats/metrics, badges/chips, avatars
• Navigation — breadcrumbs, pagination, steppers, sidebars, top bars/headers, tabs, command palette
• Overlays — modals, drawers/sheets, tooltips, popovers/menus
• Feedback — alerts/toasts, notifications center, progress indicators, skeletons, empty states
• Pages — authentication screens, settings pages, onboarding, documentation layouts, pricing blocks, search
• Visualization — data visualization wrappers, carousels, accordions

Each component family includes defined states (default, hover, focus-visible, active, disabled, loading, error), interaction behavior for keyboard, pointer, and touch, explicit token usage, and responsive behavior with edge cases.

Accessibility

This skill targets WCAG 2.2 AA compliance with a thorough accessibility baseline:

• Keyboard-first interactions with visible focus states
• Semantic HTML before ARIA attributes
• Screen-reader tested labels on all interactive elements
• Reduced-motion support for users who prefer less animation
• Minimum 44px touch targets for mobile interactions
• High-contrast mode support

When conflicts arise between aesthetics and accessibility, accessibility wins.

How to use this skill with AI agents

Pull the skill file into your project with a single command:

npx typeui.sh pull dashboard

This saves the SKILL.md file directly into your project. The skill file is a structured markdown document that tells any AI agent exactly how to build interfaces following the Dashboard design system — which colors to use, how typography should scale, what states every component needs, and how spacing and depth should behave.

Once the file is in your project, you can use it with any AI coding tool — Claude, ChatGPT, Cursor, Windsurf, Copilot, or any other agent that accepts context files, system prompts, or knowledge documents. Copy it into a project knowledge base, reference it as context in a prompt, upload it as a knowledge file, or drop it into a rules directory. The structured format ensures consistent results regardless of which AI platform you use.

Design principles

The Dashboard skill enforces these core rules:

1. Prefer semantic tokens over raw values — always reference design tokens instead of hardcoded colors, sizes, or spacing
2. Preserve visual hierarchy — maintain clear distinctions between headings, body text, and supporting elements
3. Keep interaction states explicit — every interactive element must define its full state set
4. Design for every state — empty, loading, and error states are first-class concerns, not afterthoughts
5. Ensure responsive behavior by default — components must adapt gracefully across screen sizes
6. Document accessibility rationale — every accessibility decision should be traceable and testable

And six strict anti-patterns to avoid:

1. No low contrast text — all text must meet WCAG AA contrast ratios
2. No inconsistent spacing rhythm — every measurement must align to the 8pt grid
3. No decorative motion without purpose — animation should communicate, not distract
4. No ambiguous labels — interactive elements must have clear, descriptive labels
5. No mixed visual metaphors — stick to the cloud-platform language, don't blend competing styles
6. No inaccessible hit areas — touch targets must be large enough for comfortable interaction

Writing tone

All content generated with this skill follows a concise, confident, helpful, clear, friendly, professional, and action-oriented tone with minimal jargon. Labels are direct. Instructions guide the user toward the next step. There is no unnecessary decoration.