Generate Cyberpunk-Styled UI Components with Neon Aesthetics

Cyberpunk UI is a design-style child skill ('high tech, low life - neon signs cutting through the smog of a dystopian megacity'), part of the design-it family and not meant to be triggered directly. Three core principles: Neon on Black (the foundation is absolute black or deep charcoal, cut by searingly bright neon accents), Angled Geometries (clipped corners/chamfers instead of rounded corners, so UI elements look like they were cut from metal plates), and Glitch and Data (random hexadecimal data streams, barcode accents, and intentional visual tearing).

Use it when the user's request matches this neon-noir, dystopian-tech aesthetic - gaming interfaces, hacker/terminal tools, or futuristic product concepts that want an aggressive, high-contrast, industrial edge. 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 Acid Yellow (#FCE205), Cyan (#00FFFF), and Hot Pink (#FF003C) against black, industrial squared-off sans-serifs (Rajdhani, Blender Pro, Teko) mixed with small monospace fonts for data readouts, and diagonal stripes, warning-tape patterns, and heavy outer glows as styling accents. The web implementation relies on clip-path for the signature angled-corner cut, a repeating diagonal-stripe background gradient for subtle texture, and a button that swaps its neon accent color on hover while adding a dual offset shadow in two contrasting neon colors to fake a glitch/chromatic-aberration effect.

.cyberpunk-button {
  clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 15px, 100% 100%, 15px 100%, 0 calc(100% - 15px));
}
.cyberpunk-button:hover {
  background-color: #FCE205;
  box-shadow: -4px 0 0 #00FFFF, 4px 0 0 #FF003C;
}

A .data-stream utility class renders faint, small monospace cyan text meant for background hexadecimal noise or scrolling data readouts that reinforce the dystopian-tech atmosphere without competing with primary content.

SwiftUI reproduces the exact chamfered corner geometry with a custom Shape that manually traces the clipped-corner path (top-right and bottom-left corners cut at a fixed cutSize, closing the subpath around the remaining right-angle corners) rather than relying on a built-in corner-radius modifier, since SwiftUI has no native chamfer primitive - the same angular silhouette as the web's clip-path polygon, expressed as an explicit Path.

Designers and developers building gaming UIs, hacker/terminal tools, or futuristic concept products that want an aggressive, high-contrast, industrial-neon aesthetic - angular, glowing, and dystopian - rather than a soft or approachable modern interface.