skills.rest
nattergabriel
nattergabrielCOMMUNITY
Explore all skills by this author →
𝕏@eterdevGitHub

design-system

Standardizes a Mars-themed UI design system for cockpit dashboards.

2|Updated Mar 18, 2026
Search Tags:#typography#tailwind#design-system#dark-mode#ui-patterns#color-palette#component-library
One-click install
npx skills add https://github.com/nattergabriel/oasis-greenhouse --skill design-system-nattergabriel
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system
Source: https://github.com/nattergabriel/oasis-greenhouse/tree/main/frontend/.claude/skills/design-system
Command: npx skills add https://github.com/nattergabriel/oasis-greenhouse --skill design-system-nattergabriel

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

A cohesive Mars-themed UI design system that ensures consistent visuals and interaction patterns across cockpit dashboards.

Core Features & Use Cases

  • Color palette: defines dark Mars-inspired colors for background, surfaces, and accents.
  • Typography & spacing: establishes typography scale and spacing rules for readable, consistent interfaces.
  • Component patterns: provides reusable building blocks (cards, buttons, status indicators, layout patterns) aligned to the cockpit aesthetic.

Quick Start

Adopt the Mars UI design system to standardize colors, typography, and components across your cockpit interfaces.

Frequently Asked Questions about design-system

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

FAQPage Schema
How do I standardize a dark mode UI component library with Tailwind?▼

You standardize a dark mode UI component library by defining a cohesive design system with CSS variables and Tailwind mappings for colors, typography, and spacing, ensuring consistent visual building blocks across your frontend.

What is a cockpit-grade UI design system for dashboard interfaces?▼

A cockpit-grade UI design system is a standardized set of dark mode interface rules covering color palettes, typography scales, and component patterns to ensure consistent visuals and interactions across complex dashboard interfaces.

Can I use this Mars UI design system to standardize dashboard color palettes and typography?▼

Yes, you can use this Mars UI design system to standardize dashboard color palettes and typography, providing a single source of truth for dark mode surfaces, accents, and readable text scales.

How do I implement reusable card patterns and status indicators for a dark mode command center?▼

You implement reusable card patterns and status indicators by applying predefined component patterns and CSS variables from the design system, ensuring visual consistency and accessibility within your dark mode command center.

Does this design system provide accessibility considerations for dark mode dashboards?▼

Yes, the design system provides accessibility considerations tailored for dark mode dashboards, ensuring that the Mars-inspired color palette, typography, and component patterns maintain readable and accessible interface interactions.

Are there specific CSS variables and Tailwind mappings for defining a dark mode color palette?▼

Yes, the design system specifies implementation details using CSS variables and Tailwind mappings to define a dark Mars-inspired color palette, covering background, surfaces, and accent colors for consistent application.

Related Skills

Explore More Design & Creative Skills→
whimzyLivewhimzyLive
3

tailwind-design-system

Configure Tailwind CSS v4 themes with CSS variables and dark mode.

Community
Advanced
bychrisrbychrisr

design-guide

Standardize frontend components with Tailwind CSS tokens and Radix UI primitives.

Community
Intermediate
timothyfroehlichtimothyfroehlich

pinpoint-ui

Create accessible shadcn/ui interfaces with Tailwind CSS v4 patterns.

Community
Basic
ihlamuryihlamury
73

framer-ui-skills

Enforce Framer design constraints for dark mode interfaces with Inter font and 4px grid.

Community
Intermediate