Sci-Fi Interface Design (HUD)

Sci-Fi Interface Design (HUD) is a design-style child skill ('heads-up display - tactical, precise, and highly analytical'), part of the design-it family and not meant to be triggered directly. Three core principles: Wireframe and Outlines (interfaces are built almost entirely from thin strokes rather than solid filled boxes), Circular Arrays & Radars (heavy use of concentric circles, radar sweeps, and curved progress bars), and Monochrome + Warning (usually entirely monochromatic - just blue or just green - with a secondary red used exclusively for alerts).

Use it when the user's request matches this tactical, heads-up-display aesthetic - sci-fi games, simulation dashboards, or futuristic control panels that want to read as analytical instrumentation rather than a consumer app. As a design sub-style, it's selected by the parent design-it skill's routing rather than invoked on its own.

Visual DNA uses a deep midnight background with UI rendered in pure cyan, emerald green, or amber - like classic monochrome CRT monitors - strict technical monospace fonts (Share Tech Mono, VT323, Space Mono) always in caps, and tiny chroming details like target brackets [ ], framing lines, and precise pixel coordinates. The web implementation frames panels with a subtle border plus corner-bracket pseudo-elements (::before/::after each drawing an L-shaped corner accent, mimicking a targeting reticle), gives large numeric readouts a glowing text-shadow for a holographic look, and gives warning states a red glow combined with a hard step-end blink animation rather than a smooth fade, reading as an urgent, discrete alert rather than a gentle pulse.

.hud-container::before {
  border-top: 2px solid #4df;
  border-left: 2px solid #4df;
}
.hud-warning {
  animation: blink 1s step-end infinite;
}
@keyframes blink { 50% { opacity: 0; } }

SwiftUI builds circular radar/dial elements from a Circle().stroke() base ring plus a second circle using .trim(from:to:) to draw a partial arc representing a live value, rotated -90 degrees so it starts at the top like a clock or gauge - a native equivalent to SVG-based circular dials, animated to "boot up" by trimming from 0 to its target value.

Designers and developers building sci-fi game UI, simulation dashboards, or futuristic control panels that need to read as precise tactical instrumentation - wireframe, monochrome, radar-driven - rather than a soft consumer-app interface - the wireframe-and-glow discipline is what keeps a dense readout screen legible instead of overwhelming.