dashboard-design

Enforce the v3 Control Board design system in BOSSA dashboard code and HTML templates.

Updated Apr 2, 2026
One-click install
npx skills add https://github.com/caleighswart/BOSSA---Sunningdale --skill dashboard-design-caleighswart
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: dashboard-design
Source: https://github.com/caleighswart/BOSSA---Sunningdale/tree/main/bar/.claude/skills/dashboard-design
Command: npx skills add https://github.com/caleighswart/BOSSA---Sunningdale --skill dashboard-design-caleighswart

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Modifying the BOSSA bar stock dashboard's code or visual elements without enforced guidelines leads to inconsistent styling, accidental brand drift, and a disjointed user experience for operations staff, requiring time-consuming rework to restore the approved professional aesthetic.

Core Features & Use Cases

  • Locked v3 Design System Enforcement: Mandates the approved "Control Board" aesthetic with cool slate neutrals, a single blue accent, IBM Plex typography, and fixed layout structure, preventing accidental reversion to retired v1/v2 warm cream brand elements.
  • Exact Component Specifications: Provides detailed rules for all dashboard elements including the dark sidebar, 5-tile KPI strip, chip-filtered tables, status pills, and fill bars to ensure visual consistency across all updates.
  • Use Case: When adding a new stock status category or updating the dashboard's color palette, this skill ensures all changes align with the approved design system, avoiding broken styling or off-brand visuals.

Quick Start

Use the dashboard-design skill to adjust the color of the critical stock status pill to match the approved design system specifications.

Frequently Asked Questions about dashboard-design

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

FAQPage Schema
How do I maintain consistent frontend styling when updating dashboard HTML templates?

Maintain consistent frontend styling when updating dashboard HTML templates by enforcing a locked design system with exact design tokens, component specifications, and guardrails against reintroducing retired brand elements. This prevents visual drift and ensures a professional aesthetic.

What is the best way to prevent brand drift in an internal operations dashboard?

Prevent brand drift in an internal operations dashboard by applying a strict control-board design system with cool slate neutrals, a single blue accent, and IBM Plex typography. This provides exact component specifications to avoid broken styling.

How do I standardize dashboard visual components like status pills and fill bars?

Standardize dashboard visual components like status pills and fill bars by applying detailed rules for dashboard elements including the dark sidebar, 5-tile KPI strip, and chip-filtered tables to ensure visual consistency across all updates.

Does this dashboard styling approach work with IBM Plex typography?

Yes, this dashboard styling approach works with IBM Plex typography by mandating it as part of the locked v3 control-board design system. It pairs this typography with cool slate neutrals and a fixed layout structure for operations staff.

Why does my dashboard UI look inconsistent after modifying the stock status categories?

Your dashboard UI looks inconsistent after modifying stock status categories because changes were made without enforced design guidelines. Applying a locked design system ensures all new categories align with approved specifications, avoiding off-brand visuals.

When should I not use a locked design system for dashboard frontend consistency?

You should not use a locked design system for dashboard frontend consistency if you need to reintroduce retired warm cream brand elements or deviate from the fixed layout structure, as this approach strictly prevents accidental reversion to previous visual styles.