skills.rest
jbreel77888
jbreel77888COMMUNITY
Explore all skills by this author →
GitHub

mission-control

Generates implementation-ready design-system guidance for dark mission-control monitoring interfaces.

Updated Jun 20, 2026
Search Tags:#monitoring#accessibility#design system#dashboard#telemetry#dark mode#css tokens
One-click install
npx skills add https://github.com/jbreel77888/Ai-Agnet --skill mission-control-jbreel77888
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mission-control
Source: https://github.com/jbreel77888/Ai-Agnet/tree/main/skills/design/design-systems/style-skills/mission-control
Command: npx skills add https://github.com/jbreel77888/Ai-Agnet --skill mission-control-jbreel77888

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building information-dense, low-light operations dashboards requires consistent tokens, components, and accessibility rules, which teams often improvise inconsistently. This Skill provides an authoritative Mission Control design system so engineers and designers produce coherent telemetry UIs. ## Core Features & Use Cases - Complete Token Set: Dark navy surfaces, amber telemetry, cyan healthy indicators, and alert red, all WCAG AA compliant on dark backgrounds. - Component Rules: Ready-to-use CSS for status badges, data tiles, countdown timers, signal indicators, alert banners, and telemetry charts. - Use Case: When building a CI/CD build-status screen or infrastructure monitoring dashboard, ask for guidance and receive opinionated rules covering palette, monospace typography, spacing, motion, and anti-patterns. ## Quick Start Use the mission-control skill to design a real-time deployment status dashboard with telemetry tiles and alert banners.

Frequently Asked Questions about mission-control

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

FAQPage Schema
How do I design a dark operations dashboard UI?▼

Use a dark navy background (#0B1120) with elevated surfaces (#111827), amber (#FFB800) for primary telemetry values, and monospace fonts for all data readouts. The Mission Control system defines tokens, components, and spacing for this exact use case.

What colors work for real-time monitoring dashboards?▼

Amber (#FFB800) for primary metrics, cyan (#00D4FF) for healthy states, red (#FF4757) for critical alerts, and green (#26DE81) for nominal status. All pass WCAG AA contrast on the #111827 surface color.

Does this design system support light mode?▼

No. Mission Control is dark-mode native by design, since mission control environments are always low-light. A light mode variant is explicitly out of scope and listed as an anti-pattern.

What fonts should telemetry values use?▼

Telemetry values must use monospace fonts exclusively, specifically JetBrains Mono with ui-monospace fallbacks. Inter is reserved for labels, navigation, and prose. Proportional fonts for data are an explicit anti-pattern.

What accessibility requirements does the system enforce?▼

It targets WCAG 2.2 AA with keyboard-first interactions, visible focus states, semantic HTML, reduced-motion support, and 44px touch targets. All data colors maintain at least 4.5:1 contrast on dark surfaces.

Related Skills

Explore More Design & Creative Skills→
forbotsakeforbotsake
5

design-consultation

Propose a complete design system and generate DESIGN.md with typography, color, layout, spacing, and motion tokens.

Official
Advanced
Asygnuz-S-A-SAsygnuz-S-A-S

tailwind-design-system

Build component libraries and design tokens with Tailwind CSS v4 CSS-first configuration.

Official
Intermediate
alirezarezvanialirezarezvani
25.3k

apple-hig-expert

Audits and designs Apple-platform interfaces against the Human Interface Guidelines with quantitative compliance checks.

Community
Intermediate
VeryGoodOpenSourceVeryGoodOpenSource
162

material-theming

Centralizes Flutter colors, typography, component styles, and spacing in Material 3 ThemeData.

Official
Intermediate