skills.rest
markerikson
markeriksonCOMMUNITY
Explore all skills by this author →
Website𝕏@acemarkeGitHub

dashboard-design

Design dark-mode dashboard interfaces with semantic CSS tokens and fixed table layouts.

41|4|Updated May 6, 2026
Search Tags:#accessibility#data tables#dark theme#dashboard ui#status indicators#ui design tokens
One-click install
npx skills add https://github.com/markerikson/opencode-config-example --skill dashboard-design-markerikson
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: dashboard-design
Source: https://github.com/markerikson/opencode-config-example/tree/main/config/skill/dashboard-design
Command: npx skills add https://github.com/markerikson/opencode-config-example --skill dashboard-design-markerikson

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It solves the challenge of building dark-themed, data-dense dashboard UIs that stay readable and visually consistent as real data changes over time.

Core Features & Use Cases

  • Data table stability: Prevents number-column jitter and layout wobble using tabular number formatting and fixed table layouts.
  • Consistent dark theme color system: Enforces semantic tokens, elevation levels, and disciplined use of positive/negative versus status/accent colors.
  • Clear states and hierarchy: Provides guidance for empty states, status badges, typography hierarchy, and dense chart/readability practices.
  • Use case: When you are building a trading or monitoring dashboard with sortable tables, status panels, and charts, it helps you apply consistent patterns for readability and information density.

Quick Start

Apply the dashboard-design guidance to your UI by implementing tabular number formatting, semantic dark-theme tokens, and explicit empty/loading/error/filtered states for your dashboard components.

Frequently Asked Questions about dashboard-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I prevent data table layout jitter in a dark mode dashboard?▼

To prevent data table jitter in dashboard UIs, apply fixed table layouts and tabular number formatting. This approach ensures deterministic column sizing and stable visual hierarchy as data updates dynamically.

What is the best way to design accessible status indicators for dark theme dashboards?▼

To design accessible dark theme status indicators, use semantic CSS design tokens. Applying disciplined positive, negative, and accent colors ensures clear visual hierarchy and accessible state signaling across dashboard panels.

How do I handle empty, loading, and error states in data-dense dashboard views?▼

Handle empty, loading, and error states in dashboard views by applying differentiated visual treatments. Explicit states for filtered data ensure readable interfaces and clear visual hierarchy during all data conditions.

Can I use semantic design tokens for typography and colors in dark mode dashboards?▼

Yes, you can use semantic design tokens for typography and colors in dark mode dashboards. Enforcing semantic tokens and elevation levels maintains consistent visual hierarchy and readable interfaces as data changes.

Does fixed table layout work for sortable analytics dashboards with charts?▼

Yes, fixed table layouts work effectively for sortable analytics dashboards with charts. This approach provides stable layout and clear visual hierarchy for table-driven analytics and dense chart components.

Related Skills

Explore More Design & Creative Skills→
moughamirmoughamir

tailwindcss-advanced-design-systems

Define Tailwind CSS design tokens and semantic theme utilities with @theme and CSS variables.

Community
Advanced
JKKN-InstitutionsJKKN-Institutions

advanced-tables-components

Build server-side data tables for Next.js apps with Supabase.

Official
Advanced
csim-sgcsim-sg

daisy-ui

Build UI components with DaisyUI v5 and Tailwind CSS 4.

Community
Intermediate
Owl-ListenerOwl-Listener
2.0k

color-system

Generate scalable color systems with tonal scales and AA/AAA contrast mappings.

Community
Advanced