New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Nerv UI

by TheGreatGildo in TheGreatGildo/nerv-ui

NERV Operations Console aesthetic for web interfaces — Evangelion-inspired instrumentation UI with black void backgrounds, sparse high-contrast color coding (orange headers, green nominal data, cyan…

MITAuto-check passedFrontend & Design

Install Nerv UI

skills CLI
$ npx skills add TheGreatGildo/nerv-ui --skill nerv-ui -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install TheGreatGildo/nerv-ui nerv-ui --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/TheGreatGildo/nerv-ui.git skills-src && mkdir -p .claude/skills && cp -r skills-src/v1-old .claude/skills/nerv-ui && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
nerv-ui
GitHub stars
228
Token cost
~7k tokens
SKILL.md length
906 words
Files
1
Skills in repo
2
Repo updated
First seen
Licence
MIT

At a glance

NERV Operations Console aesthetic for web interfaces — Evangelion-inspired instrumentation UI with black void backgrounds, sparse high-contrast color coding (orange headers, green nominal data, cyan…

  • Works in 8 steps: The void is the default. Elements emerge… → Color = function. If you can't name why… → Density = authority. More data on screen… → …
  • Tasks that involve Frontend development
  • SKILL.md covers Design Tokens, CRT / Scanline Texture Layer, Grid Systems and Components, plus 3 more sections
  • Reaches fonts.googleapis.com

What it does

Nerv UI is an agent skill from TheGreatGildo/nerv-ui. NERV Operations Console aesthetic for web interfaces — Evangelion-inspired instrumentation UI with black void backgrounds, sparse high-contrast color coding (orange headers, green nominal data, cyan wireframes, red alerts), dense monospaced data readouts, measurement overlay grids, hex scanner patterns, CRT/VHS texture layers, escalating alert states, bilingual JP/EN institutional labeling, thermal imaging degradation, and the clinical authority of a fictional military-scientific organization's total visual…

Its SKILL.md is about 7k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design, covering Frontend development, UI design and Logo and visual identity. The repository describes itself as: NERV Operations Console aesthetic for web interfaces — Evangelion-inspired instrumentation UI skill for Claude Code / OpenClaw. The licence is MIT.

When your agent uses it

  • Tasks that involve Frontend development
  • Tasks that involve UI design
  • Tasks that involve Logo and visual identity

Example prompts

  • “/nerv-ui”

Workflow steps

8 steps, taken from the first numbered list in SKILL.md.

  1. The void is the default. Elements emerge from blackness, not sit on a surface.
  2. Color = function. If you can't name why something is orange vs green, it's wrong.
  3. Density = authority. More data on screen = more credible. Don't spread things out.
  4. Alignment is sacred. Monospaced columns must align. Pixel-level precision.
  5. Escalation is visual. As severity increases, the UI literally breaks down — color bleeds, pixelation increases, animation intensifies.
  6. Everything is labeled. Scale bars, grid coordinates, sample numbers, pattern types. If it's on screen, it has an identifier.
  7. Bilingual is institutional, not decorative. Japanese text means the organization operates in Japanese. It's not wallpaper.
  8. The CRT texture is always present. Scanlines, vignette, subtle phosphor flicker. The interface exists on a physical monitor inside the…

What it can do on your machine

Read from SKILL.md and the folder at commit c2c890b. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are css and html).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Hosts in commands or code, which the agent is likely to contact:

    • fonts.googleapis.com

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Nerv UI loads about 7k tokens when it runs. Until then it costs about 151 tokens; SKILL.md has 906 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~151
When it runs · the whole SKILL.md, loaded when a task matches
~7k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from TheGreatGildo/nerv-ui at commit c2c890b, republished under its MIT licence (© TheGreatGildo). 906 words, ~7,011 tokens.

Download SKILL.mdSave it as .claude/skills/nerv-ui/SKILL.md (or your agent's skills folder).
name
nerv-ui
description
NERV Operations Console aesthetic for web interfaces — Evangelion-inspired instrumentation UI with black void backgrounds, sparse high-contrast color coding (orange headers, green nominal data, cyan wireframes, red alerts), dense monospaced data readouts, measurement overlay grids, hex scanner patterns, CRT/VHS texture layers, escalating alert states, bilingual JP/EN institutional labeling, thermal imaging degradation, and the clinical authority of a fictional military-scientific organization's total visual identity system. Spans CRT terminals → tactical displays → physical infrastructure.

NERV UI — Operations Console Aesthetic

Build web interfaces that feel like they were designed by engineers inside NERV — not by graphic designers outside it. This is the total visual identity of a fictional military-scientific organization: CRT terminals, tactical maps, neural sync diagnostics, contamination scanners, and access control panels. Every screen assumes the operator already knows what they're looking at.

The screen is off until data demands it. Black void is the default state.

Design Tokens

Color Palette
css
:root {
  /* Void — the screen is OFF until data appears */
  --void:             #000000;  /* True black — primary background */
  --void-warm:        #0A0A08;  /* Slightly warm black for panels */
  --void-panel:       #111110;  /* Raised surface (rare) */

  /* NERV Orange — headers, labels, institutional text */
  --nerv-orange:      #FF9830;  /* Primary labeling color — high contrast */
  --nerv-orange-dim:  #D08028;  /* Secondary labels */
  --nerv-orange-hot:  #FFCC50;  /* Highlighted/active labels */

  /* Nominal Green — data readouts, "system OK" — full phosphor intensity */
  --data-green:       #50FF50;  /* Primary data color */
  --data-green-dim:   #30BB30;  /* Secondary data */
  --data-green-faint: rgba(80, 255, 80, 0.1);  /* Table row hover */

  /* Cyan — wireframes, maps, spatial data */
  --wire-cyan:        #20F0FF;  /* Wireframe lines */
  --wire-cyan-dim:    #10A8B8;  /* Construction lines */
  --wire-cyan-glow:   rgba(32, 240, 255, 0.15);  /* Subtle glow */

  /* Alert Red — warnings, refusals, critical states */
  --alert-red:        #FF4840;  /* Primary alert */
  --alert-red-dim:    #CC3028;  /* Background alert panels */
  --alert-red-hot:    #FF6858;  /* Flashing/urgent */
  --alert-red-fill:   rgba(255, 72, 64, 0.18);  /* Alert zone background */

  /* Thermal spectrum — for degradation/heatmap states */
  --thermal-yellow:   #FFE820;
  --thermal-magenta:  #F030C0;
  --thermal-blue:     #3060F0;
  --thermal-purple:   #A030E0;

  /* Neutral — secondary text, rules */
  --steel:            #E0E0D8;  /* Primary readable text */
  --steel-dim:        #9A9A90;  /* Muted annotations */
  --steel-faint:      rgba(224, 224, 216, 0.08);  /* Grid lines */
}

Rules:

  • Background is ALWAYS true black or near-black. Never gray, never navy.
  • Orange is for labels and headers only — never data values.
  • Green is for data and nominal status — numbers, readouts, "OK" states.
  • Cyan is for spatial/structural — wireframes, maps, grids, containment lines.
  • Red is for alerts and refusals only — never decoration.
  • Colors exist in isolation. They don't blend, gradient, or harmonize. Each serves one function.
  • Phosphor-bright, not muted. These are CRT colors — they glow. If it looks dim against black, bump it up. Readability always beats subtlety.
  • When a system is under stress, colors invade each other's space — red bleeds into green zones, thermal spectrum replaces orderly color coding.
Typography
css
:root {
  --font-sys:    'IBM Plex Mono', 'Courier New', monospace;   /* Primary — everything */
  --font-label:  'Bebas Neue', 'Arial Narrow', sans-serif;    /* Institutional labels */
  --font-stamp:  'Bebas Neue', 'Impact', sans-serif;          /* REFUSED / WARNING stamps */
  --font-kanji:  'Noto Sans JP', sans-serif;                  /* Japanese institutional text */
}
html
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;700&family=Bebas+Neue&family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">

Monospace dominates everything. Bebas Neue is ONLY for large institutional labels and status stamps. The UI assumes fixed-width alignment is load-bearing — columns must align perfectly.

Type Scale
RoleFontSizeWeightSpacingTransformColor
Stampstampclamp(3rem, 8vw, 6rem)4000.08emuppercase--alert-red
Institutional labellabelclamp(1.2rem, 3vw, 2rem)4000.15emuppercase--nerv-orange
Section headersys0.875rem7000.12emuppercase--nerv-orange
Data valuesys0.8125rem5000emnone--data-green
Data labelsys0.6875rem4000.08emuppercase--nerv-orange-dim
Annotationsys0.625rem4000.05emuppercase--steel-dim
Scale markersys0.5rem4000.1emnone--nerv-orange
Kanji badgekanji0.75rem7000.05emnone--steel

CRT / Scanline Texture Layer

Every NERV screen has a CRT texture. This is non-negotiable.

css
/* Scanline overlay — apply to body or main container */
.crt-overlay {
  position: relative;
}
.crt-overlay::after {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.06) 2px,
    rgba(0, 0, 0, 0.06) 4px
  );
  pointer-events: none;
  z-index: 9999;
}

/* CRT vignette — darkened edges */
.crt-vignette::before {
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 60%,
    rgba(0, 0, 0, 0.35) 100%
  );
  pointer-events: none;
  z-index: 9998;
}

/* Phosphor flicker (subtle) */
@keyframes phosphor {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.97; }
}
.crt-flicker {
  animation: phosphor 0.08s infinite;
}
css
/* Reduced motion: kill flicker, keep scanlines */
@media (prefers-reduced-motion: reduce) {
  .crt-flicker { animation: none !important; }
}

Grid Systems

Hex Grid Scanner

For detection/anomaly displays — a regular hexagonal mesh where individual cells light up.

css
.hex-grid {
  --hex-size: 40px;
  --hex-gap: 4px;
  --hex-color: var(--wire-cyan-dim);
  --hex-alert: var(--alert-red);
  display: grid;
  grid-template-columns: repeat(auto-fill, var(--hex-size));
  gap: var(--hex-gap);
  position: relative;
}

.hex-cell {
  width: var(--hex-size);
  height: calc(var(--hex-size) * 1.1547);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: var(--void-panel);
  border: 1px solid var(--hex-color);
  transition: background 0.3s, box-shadow 0.3s;
}
.hex-cell.alert {
  background: var(--alert-red-fill);
  border-color: var(--alert-red);
  box-shadow: 0 0 12px rgba(232, 48, 32, 0.4);
}
.hex-cell.nominal {
  background: rgba(48, 200, 48, 0.06);
  border-color: var(--data-green-dim);
}
Measurement Grid Overlay

Crosshair markers, scale bars, and registration marks.

css
.measurement-overlay {
  position: relative;
}
.measurement-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    /* Major grid */
    linear-gradient(var(--steel-faint) 1px, transparent 1px),
    linear-gradient(90deg, var(--steel-faint) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
  z-index: 1;
}

/* Crosshair registration mark */
.crosshair {
  position: absolute;
  width: 24px;
  height: 24px;
}
.crosshair::before,
.crosshair::after {
  content: '';
  position: absolute;
  background: var(--data-green);
}
.crosshair::before {
  width: 1px; height: 100%;
  left: 50%; top: 0;
}
.crosshair::after {
  width: 100%; height: 1px;
  top: 50%; left: 0;
}

/* Scale bar */
.scale-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-sys);
  font-size: 0.5rem;
  letter-spacing: 0.1em;
  color: var(--nerv-orange);
}
.scale-bar::before {
  content: '';
  width: 60px;
  height: 1px;
  background: var(--nerv-orange);
}
Axis Scale (Y-axis ruler)
css
.y-axis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-family: var(--font-sys);
  font-size: 0.5rem;
  color: var(--nerv-orange);
  padding: 0 0.5rem;
  border-right: 1px solid var(--nerv-orange-dim);
}
.y-axis .tick {
  position: relative;
}
.y-axis .tick::after {
  content: '';
  position: absolute;
  right: -0.5rem;
  top: 50%;
  width: 6px;
  height: 1px;
  background: var(--nerv-orange);
}

Components

Data Table (Column-Aligned Terminal)
css
.nerv-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sys);
  font-size: 0.8125rem;
}
.nerv-table th {
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: left;
  padding: 0.5rem 0.8rem;
  color: var(--nerv-orange);
  border-bottom: 1px solid var(--nerv-orange-dim);
  font-weight: 400;
}
.nerv-table td {
  padding: 0.4rem 0.8rem;
  color: var(--data-green);
  border-bottom: 1px solid rgba(48, 200, 48, 0.06);
  font-variant-numeric: tabular-nums;
}
.nerv-table td.label {
  color: var(--nerv-orange-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.6875rem;
}
.nerv-table tr:hover td {
  background: var(--data-green-faint);
}
/* Alert row */
.nerv-table tr.alert td {
  color: var(--alert-red);
  background: var(--alert-red-fill);
}
Command/Response Block

The from/to/command structured header with a giant status stamp.

css
.command-block {
  border-top: 2px solid var(--nerv-orange);
  padding: 1.5rem;
  position: relative;
  background: var(--void);
}
.command-block .cmd-header {
  font-family: var(--font-sys);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--nerv-orange);
  line-height: 1.8;
}
.command-block .cmd-header span {
  color: var(--steel);
}
.command-block .cmd-stamp {
  position: absolute;
  top: 50%; right: 2rem;
  transform: translateY(-50%) rotate(-5deg);
  font-family: var(--font-stamp);
  font-size: clamp(3rem, 8vw, 5rem);
  letter-spacing: 0.08em;
  padding: 0.2em 0.5em;
  border: 4px solid;
}
.cmd-stamp.refused {
  color: var(--alert-red);
  border-color: var(--alert-red);
}
.cmd-stamp.approved {
  color: var(--data-green);
  border-color: var(--data-green);
}
.cmd-stamp.pending {
  color: var(--nerv-orange);
  border-color: var(--nerv-orange);
}
html
<div class="command-block">
  <div class="cmd-header">
    from: <span>BALTHASAR DIRECT CONNECTION NO. 102</span><br>
    to: <span>EVA-01 ENTRY PLUG SYSTEM LINK 2</span><br>
    cmd: <span>ENTRY PLUG EJECT</span>
  </div>
  <div class="cmd-stamp refused">REFUSED</div>
</div>
Alert Banner (Full-Width Warning)
css
.alert-banner {
  background: var(--alert-red);
  color: var(--void);
  padding: 0.6rem 1.5rem;
  font-family: var(--font-stamp);
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-align: center;
  position: relative;
  overflow: hidden;
}
/* Chevron arrows flanking */
.alert-banner::before { content: '◀ ◀ ◀  '; }
.alert-banner::after  { content: '  ▶ ▶ ▶'; }

/* Pulsing variant */
@keyframes alert-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}
.alert-banner.pulse {
  animation: alert-pulse 1s ease-in-out infinite;
}
Hazard Stripe Pattern

Environmental/signage stripes — red diagonal on black.

css
.hazard-stripe {
  background: repeating-linear-gradient(
    -45deg,
    var(--alert-red) 0px,
    var(--alert-red) 20px,
    var(--void) 20px,
    var(--void) 40px
  );
  padding: 1rem 2rem;
}
.hazard-stripe .label {
  font-family: var(--font-stamp);
  font-size: clamp(1.5rem, 4vw, 3rem);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #FFFFFF;
  text-shadow: 2px 2px 0 var(--void);
}
Institutional Label Block

The NERV subject identification panel — SAMPLE 0001 / PATTERN: BLUE TYPE

css
.id-block {
  border: 1px solid var(--nerv-orange-dim);
  padding: 0.8rem 1rem;
  font-family: var(--font-sys);
  background: var(--void);
  max-width: 280px;
}
.id-block .id-title {
  font-family: var(--font-label);
  font-size: 1.2rem;
  letter-spacing: 0.12em;
  color: var(--nerv-orange);
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}
.id-block .id-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--steel-dim);
  padding: 0.15rem 0;
}
.id-block .id-row .value {
  color: var(--data-green);
}
.id-block .id-caution {
  margin-top: 0.4rem;
  padding: 0.2rem 0.5rem;
  background: var(--alert-red);
  color: var(--void);
  font-size: 0.5625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: inline-block;
}
html
<div class="id-block">
  <div class="id-title">REI AYANAMI</div>
  <div class="id-row"><span>AGE</span><span class="value">14</span></div>
  <div class="id-row"><span>SAMPLE</span><span class="value">0001</span></div>
  <div class="id-row"><span>PATTERN</span><span class="value">BLOOD TYPE BLUE</span></div>
  <span class="id-caution">⚠ CAUTION</span>
</div>
Neuron Inventory (Data Cascade)

Dense multi-column data listing like the EVA sync diagnostic.

css
.neuron-cascade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0 2rem;
  font-family: var(--font-sys);
  font-size: 0.6875rem;
  line-height: 1.6;
}
.neuron-cascade .col-header {
  font-size: 0.5625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nerv-orange);
  border-bottom: 1px solid var(--nerv-orange-dim);
  padding-bottom: 0.3rem;
  margin-bottom: 0.3rem;
}
.neuron-cascade .entry {
  color: var(--data-green);
  padding: 0.1rem 0;
}
.neuron-cascade .entry.alert {
  color: var(--alert-red);
}
.neuron-cascade .entry .tag {
  color: var(--nerv-orange-dim);
  margin-right: 0.5rem;
  font-size: 0.5625rem;
}
System Boot / Diagnostics Block

DOS-style system check readout.

css
.boot-sequence {
  font-family: var(--font-sys);
  font-size: 0.75rem;
  color: var(--alert-red);
  line-height: 1.7;
  padding: 1.5rem;
  background: var(--void);
  overflow-x: auto;
}
.boot-sequence .check-ok {
  color: var(--data-green);
}
.boot-sequence .check-ok::after {
  content: ' Check OK';
  color: var(--data-green);
}
.boot-sequence .addr {
  color: var(--steel-dim);
  margin-right: 1em;
  font-variant-numeric: tabular-nums;
}
.boot-sequence .separator {
  border: none;
  border-top: 1px dashed var(--steel-dim);
  margin: 0.5rem 0;
}
Access Panel (Lock/Permission)
css
.access-panel {
  background: linear-gradient(180deg, #1A1A18 0%, #0E0E0C 100%);
  border: 2px solid #333330;
  padding: 2rem;
  font-family: var(--font-sys);
  text-align: center;
  max-width: 360px;
  position: relative;
}
.access-panel .panel-title {
  font-size: 0.625rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--nerv-orange);
  margin-bottom: 1rem;
}
.access-panel .lock-status {
  font-family: var(--font-stamp);
  font-size: 2.5rem;
  letter-spacing: 0.1em;
  margin: 0.5rem 0;
}
.access-panel .lock-status.locked { color: var(--alert-red); }
.access-panel .lock-status.open { color: var(--data-green); }
.access-panel .waiting {
  font-size: 0.6875rem;
  color: var(--nerv-orange-dim);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
/* LED indicator */
.led {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50% !important;
  margin-right: 0.5rem;
}
.led.red { background: var(--alert-red); box-shadow: 0 0 6px var(--alert-red); }
.led.green { background: var(--data-green); box-shadow: 0 0 6px var(--data-green); }
.led.orange { background: var(--nerv-orange); box-shadow: 0 0 6px var(--nerv-orange); }
Tactical Map Overlay
css
.tac-map {
  position: relative;
  background: var(--void);
  border: 1px solid var(--wire-cyan-dim);
  overflow: hidden;
}
.tac-map .grid-lines {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--wire-cyan-dim) 1px, transparent 1px),
    linear-gradient(90deg, var(--wire-cyan-dim) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity: 0.15;
}
.tac-map .entity {
  position: absolute;
  font-family: var(--font-sys);
  font-size: 0.5625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  border: 1px solid;
}
.entity.friendly {
  color: var(--wire-cyan);
  border-color: var(--wire-cyan);
}
.entity.hostile {
  color: var(--alert-red);
  border-color: var(--alert-red);
  background: var(--alert-red-fill);
}
.entity.unknown {
  color: var(--nerv-orange);
  border-color: var(--nerv-orange);
}
/* Position marker (X) */
.tac-marker {
  position: absolute;
  color: var(--wire-cyan);
  font-family: var(--font-sys);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
}
/* Kanji badge */
.kanji-badge {
  position: absolute;
  font-family: var(--font-kanji);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--steel);
  background: var(--void);
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--steel-dim);
}
Thermal Degradation State

When systems are stressed, visuals break down into stepped color blocks.

css
/* Stepped gradient — the system losing control */
.thermal-degrade {
  background: linear-gradient(
    135deg,
    var(--thermal-yellow) 0%,
    var(--thermal-yellow) 14%,
    var(--nerv-orange) 14%,
    var(--nerv-orange) 28%,
    var(--alert-red) 28%,
    var(--alert-red) 42%,
    var(--thermal-magenta) 42%,
    var(--thermal-magenta) 57%,
    var(--thermal-purple) 57%,
    var(--thermal-purple) 71%,
    var(--thermal-blue) 71%,
    var(--thermal-blue) 85%,
    #101030 85%,
    #101030 100%
  );
  image-rendering: pixelated;
}

/* Thermal grid — numbered crosshairs over heat */
.thermal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  position: relative;
}
.thermal-grid .cell {
  border: 1px solid rgba(200, 200, 192, 0.15);
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 0.3rem;
  font-family: var(--font-sys);
  font-size: 0.5rem;
  color: var(--steel-dim);
  min-height: 80px;
}
Waveform Display

Oscilloscope-style animated sine waves.

css
.waveform-container {
  position: relative;
  height: 200px;
  background: var(--void);
  overflow: hidden;
  border: 1px solid var(--wire-cyan-dim);
}
.waveform-container canvas {
  width: 100%;
  height: 100%;
}
/* Timecode readout overlay */
.timecode {
  position: absolute;
  bottom: 0.5rem;
  right: 0.5rem;
  font-family: var(--font-sys);
  font-size: 0.5625rem;
  color: var(--nerv-orange);
  letter-spacing: 0.1em;
}
Navigation (Minimal)
css
.nerv-nav {
  display: flex;
  align-items: center;
  padding: 0.5rem 1rem;
  background: var(--void);
  border-bottom: 1px solid var(--nerv-orange-dim);
  gap: 1.5rem;
}
.nerv-nav .org-mark {
  font-family: var(--font-label);
  font-size: 0.875rem;
  letter-spacing: 0.2em;
  color: var(--nerv-orange);
  text-transform: uppercase;
}
.nerv-nav a {
  font-family: var(--font-sys);
  font-size: 0.5625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--steel-dim);
  text-decoration: none;
}
.nerv-nav a:hover,
.nerv-nav a.active {
  color: var(--nerv-orange);
}
Buttons
css
.nerv-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.5em 1.2em;
  font-family: var(--font-sys);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--nerv-orange-dim);
  background: transparent;
  color: var(--nerv-orange);
  cursor: pointer;
  transition: all 0.15s;
}
.nerv-btn:hover {
  background: rgba(232, 122, 32, 0.1);
  border-color: var(--nerv-orange);
}
.nerv-btn.primary {
  background: var(--nerv-orange);
  color: var(--void);
  border-color: var(--nerv-orange);
}
.nerv-btn.primary:hover {
  background: var(--nerv-orange-hot);
}
.nerv-btn.danger {
  border-color: var(--alert-red);
  color: var(--alert-red);
}
.nerv-btn.danger:hover {
  background: var(--alert-red-fill);
}

UI States — Escalating Intensity

NERV UIs have 5 visual states that escalate in intensity. The UI literally degrades as severity increases.

StateBackgroundPrimary ColorTextureAnimation
Nominal--void--data-greenClean scanlinesNone
Active--void--nerv-orangeScanlinesSubtle data flicker
Caution--void--nerv-orange-hotScanlines + hex glowLED blink
Alert--alert-red-fill--alert-redHeavy scanlinesPulse animation
Critical--thermal-degradeWhite on thermalPixelated, steppedFull screen flash
css
/* State classes — apply to containers */
.state-nominal  { /* default — no extra styles */ }
.state-active   { border-color: var(--nerv-orange) !important; }
.state-caution  { border-color: var(--nerv-orange-hot) !important; box-shadow: 0 0 20px rgba(232, 122, 32, 0.1); }
.state-alert    { background: var(--alert-red-fill) !important; border-color: var(--alert-red) !important; }
.state-critical { animation: critical-flash 0.5s ease-in-out infinite; }

@keyframes critical-flash {
  0%, 100% { background: var(--void); }
  50% { background: var(--alert-red-fill); }
}

Layout

Full-Screen Console
css
body.nerv-console {
  margin: 0;
  padding: 0;
  background: var(--void);
  color: var(--data-green);
  font-family: var(--font-sys);
  font-size: 0.8125rem;
  overflow-x: hidden;
  cursor: default;
}
Panel Grid
css
.console-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 2px;
  padding: 2px;
  height: 100vh;
}
.console-grid > .panel {
  background: var(--void-warm);
  border: 1px solid var(--steel-faint);
  padding: 1rem;
  overflow: hidden;
  position: relative;
}
Ticker Tape (Running Text)
css
.ticker {
  overflow: hidden;
  white-space: nowrap;
  background: var(--void);
  border-top: 1px solid var(--nerv-orange-dim);
  border-bottom: 1px solid var(--nerv-orange-dim);
  padding: 0.3rem 0;
  font-family: var(--font-sys);
  font-size: 0.5625rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--nerv-orange);
}
.ticker .scroll {
  display: inline-block;
  animation: ticker-scroll 30s linear infinite;
}
@keyframes ticker-scroll {
  from { transform: translateX(100vw); }
  to   { transform: translateX(-100%); }
}

Image Generation Prompts

When using Nano Banana or other image generators to create assets for this style, use these prompt templates:

Background Textures
NERV operations console CRT screen, [SUBJECT], black void background, 
scanline texture overlay, [COLOR] monochrome data visualization, 
no text, no UI chrome, dark atmospheric, film grain, 1990s anime 
production design quality, Hideaki Anno visual style
Subject Overlays (wireframe/thermal)
[SUBJECT] rendered as [wireframe mesh / thermal heatmap / contour map], 
[cyan/orange/green] lines on pure black background, crosshair 
registration markers, scale bar annotations, scientific instrumentation 
aesthetic, CRT monitor capture, retro digital imaging, high contrast
Alert/Status Graphics
Warning screen, industrial hazard aesthetic, bold [red/orange] 
typography on black, diagonal hazard stripes, institutional signage, 
NERV Evangelion UI style, minimal, stark contrast, Japanese and 
English bilingual text
Hex Grid / Scanner
Hexagonal grid scanner display, [cyan/green] hex mesh on black, 
[red/orange] anomaly glow bleeding through [N] cells, scientific 
monitoring interface, CRT texture, dark atmospheric, clean geometric
Show full SKILL.md (377 more words)Show less

Bilingual Labeling

NERV interfaces mix Japanese and English systematically:

css
/* Japanese institutional badge */
.jp-badge {
  font-family: var(--font-kanji);
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--steel);
  writing-mode: horizontal-tb;
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--steel-dim);
  background: var(--void);
}

/* Bilingual label pair */
.bilingual {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.bilingual .en {
  font-family: var(--font-sys);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nerv-orange);
}
.bilingual .jp {
  font-family: var(--font-kanji);
  font-size: 0.75rem;
  color: var(--steel-dim);
}

Pattern: English for technical/operational labels. Japanese for organizational/institutional labels. Never decorative — every Japanese string should be a real term.

Common terms:

  • 作戦行動 (sakusen kōdō) — Operational Action
  • 警告 (keikoku) — Warning
  • 認証システム (ninshō shisutemu) — Authentication System
  • 汚染区域 (osen kuiki) — Contaminated Area
  • 緊急 (kinkyū) — Emergency

Anti-Patterns

❌ Don't✅ Do
Gray or navy backgroundsTrue black (#000) always
Gradients between colorsHard color boundaries, stepped blocks
Rounded corners anywhereSharp corners only (except LEDs/dots)
Colorful decorative elementsColor = function (label/data/alert/spatial)
Smooth animationsStepped/flickering/CRT-style motion
Friendly/casual copyCold, institutional, technical
Multiple fonts per contextMono everywhere, Bebas for stamps only
Light/white UI variantsThis aesthetic has no light mode
Decorative Japanese textReal terms only, institutional labeling
Clean, pixel-perfect renderingScanlines, grain, phosphor glow

Accessibility

Contrast is king. These are CRT phosphor colors — they should GLOW against the void. If text looks dim or washed out, you've gone too dark. Err on the side of too bright.

  • Orange #FF9830 on black #000: 8.2:1 ✅ (AAA)
  • Green #50FF50 on black: 13.8:1 ✅ (AAA)
  • Cyan #20F0FF on black: 13.1:1 ✅ (AAA)
  • Red #FF4840 on black: 5.9:1 ✅ (AA) — pair with text label for small text
  • Steel #E0E0D8 on black: 16.2:1 ✅ (AAA)
  • Steel-dim #9A9A90 on black: 7.1:1 ✅ (AAA) — safe for annotations

Scanline overlay must be subtle (≤6% opacity). Heavier scanlines kill readability on small text. The CRT effect is atmosphere, not a readability obstacle.

Vignette must not darken text areas. Keep the clear zone at ≥60% of the viewport.

css
@media (prefers-reduced-motion: reduce) {
  .crt-flicker,
  .alert-banner.pulse,
  .state-critical { animation: none !important; }
  .ticker .scroll { animation-duration: 60s; }
}
@media (prefers-contrast: more) {
  :root {
    --nerv-orange: #FFB030;
    --alert-red: #FF6050;
    --data-green: #40FF40;
  }
}

Composition Rules

  1. The void is the default. Elements emerge from blackness, not sit on a surface.
  2. Color = function. If you can't name why something is orange vs green, it's wrong.
  3. Density = authority. More data on screen = more credible. Don't spread things out.
  4. Alignment is sacred. Monospaced columns must align. Pixel-level precision.
  5. Escalation is visual. As severity increases, the UI literally breaks down — color bleeds, pixelation increases, animation intensifies.
  6. Everything is labeled. Scale bars, grid coordinates, sample numbers, pattern types. If it's on screen, it has an identifier.
  7. Bilingual is institutional, not decorative. Japanese text means the organization operates in Japanese. It's not wallpaper.
  8. The CRT texture is always present. Scanlines, vignette, subtle phosphor flicker. The interface exists on a physical monitor inside the fiction.

© TheGreatGildo, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in v1-old of TheGreatGildo/nerv-ui.

Open the folder on GitHubat commit c2c890b

Compare with similar skills

Nerv UI next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Nerv UI compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Nerv UI this skillTheGreatGildo/nerv-ui228—~7kAutomated safety check: PassMIT
Brand Agencyglebis/claude-skills391—~1.6kAutomated safety check: PassMIT
Senior FrontendOhh-889/skyroc7952 repos~1.1kAutomated safety check: NotesMIT
Ark UIBrandon030722/ark-ui-skill268—~3.7kAutomated safety check: PassNone
Visual Stylecalesthio/OpenMontage66k—~1.5kAutomated safety check: PassAGPL-3.0
Userinterface Wikiraphaelsalaja/userinterface-wiki907—~3.5kAutomated safety check: PassMIT

Similar skills

  • Brand Agency

    glebis/claude-skills

    Applies Agency brand colors and typography to artifacts including presentations, SVG graphics, documents, and web interfaces.

    391 GitHub stars~1.6k tokensUpdated 3 days ago
    Frontend & DesignAuto-check passed

  • Senior Frontend

    Ohh-889/skyroc

    Comprehensive frontend development skill for building modern, performant web applications using ReactJS, NextJS, TypeScript, Tailwind CSS.

    795 GitHub starsUsed in 2 repos~1.1k tokens
    Frontend & DesignAuto-check: notes

  • Ark UI

    Brandon030722/ark-ui-skill

    Design, implement, audit, or refactor web and game-adjacent interfaces using an evidence-based Hypergryph visual language with two independent choices: product family and application depth (1…

    268 GitHub stars~3.7k tokensUpdated 2 mo ago
    Frontend & DesignAuto-check passed

  • Visual Style

    calesthio/OpenMontage

    Create, extract, and apply portable visual design systems via visual-style.md files.

    66k GitHub stars~1.5k tokensUpdated 7 days ago
    Frontend & DesignAuto-check passed

  • Userinterface Wiki

    raphaelsalaja/userinterface-wiki

    UI/UX best practices for web interfaces. An agent skill from raphaelsalaja/userinterface-wiki.

    907 GitHub stars~3.5k tokensUpdated 2 mo ago
    Frontend & DesignAuto-check passed

  • UI Design Brain

    carmahhawwari/ui-design-brain

    Generate production-grade UI using real component patterns and best practices from 60+ documented interface components.

    893 GitHub stars~2.1k tokensUpdated 7 mo ago
    Frontend & DesignAuto-check passed

More from TheGreatGildo/nerv-ui

  • Nerv UI

    TheGreatGildo/nerv-ui

    NERV Operations Console v2 — Evangelion-inspired UI component library.

    228 GitHub stars~2.3k tokensUpdated 7 mo ago
    Auto-check passed

Categories

Questions about Nerv UI

What does Nerv UI do?

NERV Operations Console aesthetic for web interfaces — Evangelion-inspired instrumentation UI with black void backgrounds, sparse high-contrast color coding (orange headers, green nominal data, cyan…. Nerv UI is an agent skill from TheGreatGildo/nerv-ui.

When should I use Nerv UI?

Nerv UI fits situations like: tasks that involve Frontend development; tasks that involve UI design; tasks that involve Logo and visual identity.

How do I install Nerv UI in Claude Code?

Run `npx skills add TheGreatGildo/nerv-ui --skill nerv-ui -a claude-code`. Or copy the skill folder (v1-old in TheGreatGildo/nerv-ui) into .claude/skills/nerv-ui in your project. Claude Code loads it when a task matches its description.

How do I install Nerv UI in Codex?

Run `npx skills add TheGreatGildo/nerv-ui --skill nerv-ui -a codex`. Or copy the skill folder (v1-old in TheGreatGildo/nerv-ui) into .agents/skills/nerv-ui in your project. Codex loads it when a task matches its description.

Can I use Nerv UI in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add TheGreatGildo/nerv-ui --skill nerv-ui -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/nerv-ui, .gemini/skills/nerv-ui, .github/skills/nerv-ui and .opencode/skills/nerv-ui in your project.

What does Nerv UI need to run?

SKILL.md names no scripts, command-line tools or credentials: Nerv UI is instructions for the agent only.

Does Nerv UI access the network?

SKILL.md names 1 domain. In commands or code: fonts.googleapis.com; the agent is likely to contact it when it follows the instructions. This is read from the text; nothing was executed.

Is Nerv UI safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Nerv UI use?

Nerv UI is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Nerv UI use?

About 7k tokens (SKILL.md is roughly 28k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Nerv UI?

Skills that share tags, products or a category with Nerv UI: Brand Agency (glebis/claude-skills, 391 stars), Senior Frontend (Ohh-889/skyroc, 795 stars), Ark UI (Brandon030722/ark-ui-skill, 268 stars) and Visual Style (calesthio/OpenMontage, 66k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Nerv UI?

TheGreatGildo (a GitHub user) maintains it in TheGreatGildo/nerv-ui, which has 228 GitHub stars. The repository holds 2 skills in this directory. The repository was last updated on March 10, 2026.

Source: TheGreatGildo/nerv-ui on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.