DEM0NHUB [ SKILLS FOR CLAUDE ]

system-ui

2.1.5 → 2.2.0

----
-name: system-ui
-description: SYSTEM//02 — Gualo Hawes' editorial-brutalist design language. Reveals the hardware underneath. Apply this system to ANY product that should feel like GIR / IRIS / pentboyz aesthetic. Three modes (SILVER light / BLACK dark / BARE transparent-over-motherboard), Inter + IBM Plex Mono typography, bracket labels [ IR-01 ], LED toggles, segmented sliders, flat-disc knobs, hairline underscore inputs, single-pill buttons with mono suffix, stacked meta cards, session telemetry rail, 24fps canvas film grain, magnetic 432Hz UI sounds, and a profile-driven animated motherboard underneath (auto-picks COMPUTE / CAMERA / AUDIO / VIDEO topology per target app). One gear icon opens the CONSOLE popover for mode / sound / grain. Trigger whenever the user wants to apply the SYSTEM theme, SYSTEM//02, the IRIS style, the GIR look, Gualo's design language, "reveals the hardware underneath", or says "make it match SYSTEM / IRIS / pentboyz / BARE mode". Ships as drop-in CSS + JS for web/CEP/React + matching SwiftUI theme for macOS/iOS.
----
-
-# SYSTEM//02 — Reveals the hardware underneath.
-
-By Gualo Hawes · v2.0 · April 2026.
-
-SYSTEM v0.1 was an editorial skin. **SYSTEM//02 is an x-ray.** Every bracket is a pin label. Every readout is an oscilloscope trace. The meta bar is silkscreen. The grain is board substrate. SYSTEM doesn't dress your app — it exposes its circuits.
-
-## What ships
-
-```
-system-ui/
- SKILL.md ← this file
- system.css ← all tokens + components (3 modes, typography, layout)
- system.js ← runtime — sound engine, CONSOLE popover, grain, theme
- motherboard.js ← profile-driven PCB renderer (compute/camera/audio/video)
- SystemTheme.swift ← SwiftUI tokens (3 modes + Inter/Plex typo)
- SystemV2.swift ← SwiftUI chrome: motherboard canvas · film grain · CONSOLE popover · mode picker. Apply once with `.systemV2Chrome()` at the app root.
- examples/
- index.html ← full self-contained reference — open in browser
- reference/
- tokens.md ← design-token cheat sheet
-```
-
-## Trigger phrases
-
-Apply this skill when the user says any of:
-- "apply SYSTEM to X" / "SYSTEM//02 to X" / "SYSTEM v2 to X"
-- "make this feel like GIR / IRIS / pentboyz / Gualo"
-- "reveal the hardware underneath" / "add the motherboard look"
-- "SILVER mode" / "BLACK mode" / "BARE mode"
-- "add the LED toggles / bracket labels / magnetic sounds"
-- "editorial brutalist" / "editorial-Swiss design language"
-
-## Three modes
-
-| Mode | Palette | Vibe |
-|------|---------|------|
-| `SILVER` | Neon silver `#C7CCD1 → #0A0C10` | Light · editorial print · hospital-flicker clean |
-| `BLACK` | Deep black `#0A0A0C → #F4F4F8` | Dark · cinematic · terminal |
-| `BARE` | Deep PCB green `#0B2A22` + smoked-silver glass | Skin peeled off · motherboard fully visible through transparent hardware |
-
-Set via `data-theme="silver|black|bare"` on `<html>`.
-
-In `BARE`, panels use `rgba(175,182,190,0.22)` smoked glass + `backdrop-filter: blur(14px)` — the motherboard lives beneath. Ambient motherboard opacity per mode: silver `0.08` · black `0.04` · bare `1.0`.
-
-## Typography
-
-- **Primary**: `Inter` (wght 400/500/600/700/800) with `font-feature-settings: "ss01", "cv11", "cv05"` for the sharp grotesque Geist-like alternates
-- **Mono**: `IBM Plex Mono` (wght 400/500)
-- **Google Fonts link**: baked into CSS preamble
-
-## The CONSOLE
-
-One gear-icon button in the meta bar opens a frosted popover with:
-- `MODE` — SILVER / BLACK / BARE
-- `SOUND` — ON / OFF
-- `GRAIN` — ON / OFF
-
-Board profile is **not** user-selectable — it auto-picks per target app (see below).
-
-## Motherboard profile system
-
-The skill renders a live PCB underneath the UI with amber traces, gold solder pads, chip packages (silkscreen labels), SMD components (red/green/black), and signal pulses traveling Manhattan-routed bus lanes.
-
-When Claude applies the skill, it picks a profile matching the target app:
-
-| Profile | Topology | Use when app is... |
-|---------|----------|--------------------|
-| `compute` | CPU + chipset + 3 RAM sticks + NVMe + BIOS | general-purpose, productivity, editors |
-| `camera` | Image sensor + ISP + memory + MCU + PMIC | camera / imaging / photo / scanning |
-| `audio` | DSP + DAC + ADC + AMP + clock, heavy cap density | music, audio, DSP, DAW, synths |
-| `video` | GPU + 4 VRAM + HDMI + DP | video editing, render, streaming |
-
-Add more profiles by editing the `PROFILES` object in `motherboard.js`. Each profile has chips (gridded on 12×8), bus connections between them (lanes + side), and SMD density.
-
-In the standalone demo (`examples/index.html`) the profile randomizes on load.
-
-## Apply to a web project
-
-```html
-<!DOCTYPE html>
-<html data-theme="silver">
-<head>
- <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
- <link rel="stylesheet" href="/path/to/system.css">
-</head>
-<body>
- <canvas class="mb-canvas" id="mb"></canvas>
- <canvas id="grain"></canvas>
-
- <!-- Your UI with SYSTEM classes — see examples/index.html for the vocabulary -->
-
- <script src="/path/to/system.js"></script>
- <script src="/path/to/motherboard.js"></script>
-</body>
-</html>
-```
-
-For **Next.js**: drop `system.css` into `src/app/system.css` and import in root `layout.tsx`. Drop `system.js` + `motherboard.js` into `public/` and load with `<Script src="/system.js" strategy="afterInteractive" />`.
-
-For a **CEP panel**: copy all files to `client/` and link from `index.html`.
-
-## Component vocabulary
-
-- **Meta bar**: top strip — breathing brackets + timestamp + page + CONSOLE gear
-- **Session rail** (left, 220px): live telemetry — ID, uptime, CPU, MEM, NET LED, sparklines
-- **Stacked meta card**: no box, just ruled lines + dotted key/value rows; the typography IS the card
-- **Single-pill button** (`.sys-btn`): label + mono suffix (`DOWNLOAD V.2.0`); hover inverts. `.ghost` variant for secondary.
-- **LED toggle** (`.toggle`): rack-mount LED dot + uppercase label + ON/OFF state text
-- **Segmented bar slider** (`.slider`): no thumb, fills from left, readout rides the fill edge
-- **Flat-disc knob** (`.knob`): perfect circle, single hairline indicator, mono readout below
-- **Hairline underscore input** (`.input-field`): no box, just baseline, block cursor, editorial feel
-- **Bracket label** (`.bracket`): breathing `[ IR-01 ]`, state-aware (active / error), optional LED prefix
-- **Ruled line** (`.ruled`): key · dots · value — editorial metadata row
-- **Editorial table** (`.sys-tbl`): dotted header rule, LED status prefix
-
-## Motion + sound
-
-- **Motion**: snappy instrument — 100–200ms eases, no springs, tactile hardware feel
-- **Sound**: magnetic 432Hz WebAudio engine — click · hover · toggle · focus · enter · error · success · tick · page. Stereo-pans by pointer X. Auto-wires on any `.sys-btn`, `.pill-group button`, `.toggle`, or `[data-sys]`.
-
-## Grain
-
-Separate skill: [`film-grain`](../film-grain/). SYSTEM//02 includes it inline — canvas scrambled every frame at 24fps. NOT a sliding tile. The `overlay` blend at 0.10–0.14 opacity adds filmic texture without obscuring content.
-
-## Anti-patterns
-
-- Never use colors outside the 9-stop palette of the active mode — ONE accent max per page
-- Never rounded corners > 4px on cards (pill controls are the exception at 999px)
-- Never drop shadows or gradients for depth — layered surfaces + dotted rules do that job
-- Never any sans other than Inter, any mono other than IBM Plex Mono
-- Never icons — mono codes + brackets only. (Exception: one gear icon for the CONSOLE, intentional.)
-- Never spring or bounce motion — SYSTEM is hardware, not iOS
-- Never mix SYSTEM with another design system — all-or-nothing
-
-## Tagline
-
-> **Reveals the hardware underneath.**
-
-## Version
-
-- **v2.0 — April 2026** · SYSTEM//02
-- Authored by Gualo Hawes
-- Fonts: Inter + IBM Plex Mono (Google Fonts / SIL OFL)
-- Sound engine: WebAudio, 432Hz tuning, stereo panner
-- Motherboard: canvas 2D, profile-driven, Manhattan-routed bus traces
-
+(no SKILL.md)