skills.rest
andresharpe
andresharpeCOMMUNITY
Explore all skills by this author →
GitHub

design-system

Define CSS custom properties and component styling rules for dotbot's CRT control panel UI.

53|27|Updated Jan 23, 2026
Search Tags:#theming#design system#component patterns#frontend styling#ui tokens#crt
One-click install
npx skills add https://github.com/andresharpe/dotbot --skill design-system-andresharpe
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system
Source: https://github.com/andresharpe/dotbot/tree/main/.claude/skills/design-system
Command: npx skills add https://github.com/andresharpe/dotbot --skill design-system-andresharpe

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

What problem does it solve?

It prevents UI drift by providing a single, project-specific source of truth for tokens, components, layout rules, and anti-patterns for dotbot’s retro-futuristic CRT control panel UI.

Core Features & Use Cases

  • Consistent CRT visual identity: Defines phosphor glow, scanline overlay, grid backgrounds, LED indicators, and deep black/amber phosphor palettes.
  • Token-driven theming: Provides semantic CSS custom properties (including opacity and glow variants) so new UI code stays compatible with theme presets.
  • Component + layout enforcement: Specifies CSS load order, spacing/radius/type scales, and reusable patterns for modules, stat cards, task/process rows, buttons, LEDs, toasts, and modals.
  • Guardrails against design regressions: Lists explicit anti-patterns (raw colors, oversize radii, missing glow, invalid animation timing) to keep contributions auditable and uniform.

Quick Start

Apply the design tokens and component patterns from this skill to your new control panel UI work, following the required CSS load order and the anti-pattern checklist.

Frequently Asked Questions about design-system

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

FAQPage Schema
How do I keep CRT UI styling consistent across different frontend modules?▼

To keep CRT UI styling consistent, use a project-specific design system that defines CSS custom properties as the sole color source and enforces a strict CSS load order. This prevents UI drift across modules, modals, and views.

What are design tokens and how do they work for retro-futuristic theming?▼

Design tokens for retro-futuristic theming work by defining semantic CSS custom properties, including opacity and glow variants, for deep black and amber phosphor palettes. They act as the only color source of truth, ensuring new UI code stays compatible with theme presets.

How do I apply design system component patterns for stat cards and task rows?▼

Apply design system component patterns by referencing the predefined spacing, radius, and type scales for stat cards and task rows. These reusable rules ensure elements like buttons, LEDs, and toasts maintain uniform styling and theme compatibility.

Does this CRT design system require a specific CSS load order?▼

Yes, the CRT design system requires a strict CSS load order to maintain theme compatibility. Adhering to this load order ensures that semantic custom properties and component styling rules apply correctly without overriding the retro-futuristic visual identity.

What are common anti-patterns when building a phosphor glow UI?▼

Common anti-patterns when building a phosphor glow UI include using raw colors, applying oversize radii, missing glow effects, and using invalid animation timing. Avoiding these design regressions keeps contributions auditable and the visual identity uniform.

Can I use raw colors instead of CSS custom properties for frontend styling?▼

No, you cannot use raw colors for frontend styling in this system. CSS custom properties are required as the only color source of truth to maintain theme compatibility and prevent design drift across retro-futuristic CRT control panel modules.

Related Skills

Explore More Design & Creative Skills→
carayacaraya
1

css-core

Standardize CSS architecture, design tokens, and accessibility with custom properties.

Community
Intermediate
ckorhonenckorhonen
12

tui-designer

Design retro/cyberpunk terminal UIs with React Tuimorphic, SwiftUI Metal shaders, and CSS.

Community
Advanced
nazlicancaglarnazlicancaglar

visual-design-system

Translate brand visual identity into tokenized CSS custom properties and design tokens.

Community
Advanced
PolliticalSolutionsPolliticalSolutions

stitch-design-taste

Generate a semantic DESIGN.md design system for Google Stitch screen generation.

Community
Advanced