Agent skill

Nerv UI

by TheGreatGildo in TheGreatGildo/nerv-ui

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

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).

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

Facts

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

At a glance

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

  • Works in 7 steps: The void is the default. Elements emerge… → Color = function. Orange for… → Every visual conveys data. 3D scenes… → …
  • Tasks that involve Design systems
  • SKILL.md covers What's New in v2, Quick Start, File Structure and Core Principles, plus 6 more sections
  • Reaches fonts.googleapis.com

What it does

Nerv UI is an agent skill from TheGreatGildo/nerv-ui. NERV Operations Console v2 — Evangelion-inspired UI component library. Data-driven Three.js MAGI visualization (yield surface mesh + organic flow curves + bar columns), blockchain event log terminal, dense metrics grid, vault cards, oracle consensus display, CRT effects, emergency mode. Noto Serif Display (weight 900) + Shippori Mincho B1 + JetBrains Mono. NO HELVETICA. Every pixel conveys information.

Its SKILL.md is about 2.3k tokens, which your agent loads only when the skill is triggered. The skill folder holds 12 other files (for example `README.md`).

It sits in Frontend & Design, covering Design systems and 3D graphics and WebGL. It works with Three.js and JetBrains IDEs. 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 Design systems
  • Tasks that involve 3D graphics and WebGL

Example prompts

  • “/nerv-ui”

Workflow steps

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

  1. The void is the default. Elements emerge from true black (#000), not a surface.
  2. Color = function. Orange for labels/headers, green for nominal data, cyan for wireframes, red for alerts only.
  3. Every visual conveys data. 3D scenes reference real metrics. No decorative wireframes.
  4. Density = authority. More data per pixel = more credible.
  5. Mechanical compression. Text squeezed via scaleX(0.78-0.85). Signature EVA look.
  6. Bilingual is institutional. Japanese text = the org operates in Japanese. Not decoration.
  7. CRT texture is always present. Scanlines, vignette, phosphor flicker.

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 html, css and javascript).

    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

    Also links to:

    • woody-cairn-ztqf.here.now

    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 2.3k tokens when it runs. Until then it costs about 103 tokens; SKILL.md has 626 words of instructions outside code blocks.

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

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). 626 words, ~2,275 tokens.

Download SKILL.mdSave it as .claude/skills/nerv-ui/SKILL.md (or your agent's skills folder). This skill also uses 11 other files; get the full folder from GitHub.
name
nerv-ui
description
NERV Operations Console v2 — Evangelion-inspired UI component library. Data-driven Three.js MAGI visualization (yield surface mesh + organic flow curves + bar columns), blockchain event log terminal, dense metrics grid, vault cards, oracle consensus display, CRT effects, emergency mode. Noto Serif Display (weight 900) + Shippori Mincho B1 + JetBrains Mono. NO HELVETICA. Every pixel conveys information.

NERV UI v2 — Operations Console Component Library

Build web interfaces that feel like NERV designed them. Dense, data-driven, clinical. Every visual element references real data — no decorative waste.

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

Live Demo: https://woody-cairn-ztqf.here.now/ Source: ~/clawd/nerv-ui/index.html v1 Docs: See SKILL-v1.md for the original component library (Cormorant Garamond, hex grids, command blocks)


What's New in v2

v1v2
Cormorant Garamond (max 700)Noto Serif Display (up to 900) — much heavier
Decorative 3D wireframesData-driven MAGI visualization (yield surface + flow curves)
Generic icosphere globeAnimated terrain mesh with numbered vertices + organic curves
No event streamBlockchain event log — scrolling terminal with typed events
Moderate densityMaximum density — every panel shows real protocol data
3 vaults (alETH/alUSD/alBTC)2 vaults (alETH/alUSD) — matches current V3 scope
Hex grid scannerCut — replaced with MYT strategy performance table
Command block / ID blockCut — decorative, replaced with data-driven metrics

Quick Start

Drop-in Stylesheet
html
<link rel="stylesheet" href="nerv-ui.css">

Contains all design tokens, CRT effects, and component classes. 808 lines, zero dependencies (except fonts).

Required Fonts
html
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+Display:wght@700;800;900&family=JetBrains+Mono:wght@400;500;700&family=Saira+Extra+Condensed:wght@400;600;700;800&family=Shippori+Mincho+B1:wght@500;700;800&display=swap" rel="stylesheet">
CRT Effects (standalone)

Just want the CRT look? Use components/crt-effects.css — scanlines, vignette, phosphor flicker, moving scan line. Add <div class="scan-line-overlay"></div> to your body.


File Structure

nerv-ui/
├── SKILL.md              ← This file (v2 documentation)
├── SKILL-v1.md           ← Original v1 documentation (preserved)
├── nerv-ui.css           ← Complete stylesheet (tokens + CRT + all components)
├── demo.html             ← Full working dashboard demo
└── components/           ← Individual component demos (self-contained)
    ├── event-log.html    ← Blockchain event log terminal
    ├── vault-card.html   ← Vault unit status cards
    ├── magi-oracle.html  ← Oracle price consensus display
    ├── metrics-grid.html ← Dense key metrics grid
    ├── data-table.html   ← Strategy + Transmuter tables
    └── crt-effects.css   ← CRT overlay effects (standalone)

Each component HTML file is fully self-contained — open in browser, see it working, extract what you need.


Core Principles

  1. The void is the default. Elements emerge from true black (#000), not a surface.
  2. Color = function. Orange for labels/headers, green for nominal data, cyan for wireframes, red for alerts only.
  3. Every visual conveys data. 3D scenes reference real metrics. No decorative wireframes.
  4. Density = authority. More data per pixel = more credible.
  5. Mechanical compression. Text squeezed via scaleX(0.78-0.85). Signature EVA look.
  6. Bilingual is institutional. Japanese text = the org operates in Japanese. Not decoration.
  7. CRT texture is always present. Scanlines, vignette, phosphor flicker.

Design Tokens

css
:root {
  /* Void */
  --void:             #000000;
  --void-warm:        #080807;
  --void-panel:       #0C0C0A;

  /* NERV Orange — headers, labels, classification */
  --nerv-orange:      #FF9830;
  --nerv-orange-dim:  #C87020;
  --nerv-orange-hot:  #FFCC50;

  /* Nominal Green — data readouts, "system OK" */
  --data-green:       #50FF50;
  --data-green-dim:   #30BB30;

  /* Cyan — wireframes, spatial data */
  --wire-cyan:        #20F0FF;
  --wire-cyan-dim:    #10A0B0;

  /* Alert Red — emergencies only */
  --alert-red:        #FF3030;

  /* Neutral */
  --steel:            #D8D8D0;
  --steel-dim:        #888880;
}

Typography — NO HELVETICA

css
:root {
  /* Heavy display serif (EVA English titles) — weight 900, mechanically compressed */
  --font-title:  'Noto Serif Display', 'Times New Roman', serif;
  
  /* Japanese institutional (Matisse EB equivalent) */
  --font-mincho: 'Shippori Mincho B1', 'YuMincho', serif;
  
  /* Terminal/data readouts */
  --font-sys:    'JetBrains Mono', 'Cascadia Mono', monospace;
  
  /* WARNING stamps, emergency banners */
  --font-stamp:  'Saira Extra Condensed', 'Impact', sans-serif;
}

Mechanical compression (signature EVA):

css
.compressed-title {
  font-family: var(--font-title);
  font-weight: 900;
  transform: scaleX(0.82);
  transform-origin: left center;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

Components

Event Log Terminal

Scrolling blockchain event feed. Color-coded by type (DEPOSIT=green, BORROW=cyan, HARVEST=orange, REPAY=dim green, REDEEM=yellow, MINT=magenta). Shows timestamp, type, address/detail, amount, block number.

Demo: components/event-log.html

html
<div class="event-log">
  <div class="el-header">
    <span>Blockchain Event Log</span>
    <span class="el-count">42 events</span>
  </div>
  <div class="el-body" id="logBody">
    <div class="ev">
      <span class="ev-time">12:04:22</span>
      <span class="ev-type deposit">DEPOSIT</span>
      <span class="ev-detail">0x7f2a…4c3b → alETH Vault</span>
      <span class="ev-amount">142.5 ETH</span>
      <span class="ev-block">#19284721</span>
    </div>
  </div>
</div>
Vault Card

EVA Unit-style status card for protocol vaults. Compressed serif title + Japanese katakana name + key-value stat rows.

Demo: components/vault-card.html

html
<div class="panel">
  <div class="panel-header">
    <span>Unit-00 — alETH</span>
    <span class="tag"><span class="led green"></span>Operational</span>
  </div>
  <div class="vault-card">
    <div class="vc-id">Primary — Ethereum</div>
    <div class="vc-name">自己返済型ETH</div>
    <div class="vc-row"><span class="lbl">TVL</span><span class="val">$142.8M</span></div>
    <!-- ... more rows ... -->
  </div>
</div>
MAGI Oracle Consensus

Three-source oracle display (Chainlink, Uniswap TWAP, Internal) with price, data freshness, and agreement status. Updates in real-time.

Demo: components/magi-oracle.html

Show full SKILL.md (244 more words)Show less
Metrics Grid

Dense 2×N grid of key protocol numbers. Uses the .highlight modifier for important values and .zero for the always-zero liquidation counter.

Demo: components/metrics-grid.html

Data Tables

NERV-styled tables for strategy performance and transmuter status. Orange headers, green data, hover highlighting, progress bars for utilization.

Demo: components/data-table.html

3D MAGI Data Analysis (Three.js)

The hero visualization. Requires Three.js via CDN importmap. Elements:

  • Cyan wireframe mesh — undulating yield surface with numbered vertex labels
  • Orange organic curves — 30 flow lines rising from mesh, independently swaying
  • Glowing tip dots — pulsing orange spheres at curve endpoints
  • Flanking bar columns — orange metric bars on left/right with wireframe outlines
  • Green background particles — depth-adding scattered points
  • Slow camera orbit

See demo.html Three.js module for full implementation (~200 lines).


Emergency Mode

Toggle via data-mode="emergency" on <html>:

javascript
document.documentElement.dataset.mode = 'emergency';

Transforms: all green→red, cyan→red, scan line speeds up, emergency overlay appears, MAGI goes into conflict state.


Anti-Patterns

❌ Don't✅ Do
Gray/navy backgroundsTrue black (#000)
Helvetica anywhereUse the specified font stack
Decorative 3D wireframesData-driven visualizations
Smooth gradientsHard boundaries, stepped blocks
Rounded cornersSharp corners (except LEDs)
Light modeThis aesthetic has no light mode
Decorative JapaneseReal institutional terms only
Low density layoutsPack data — density = authority
Static numbersLive-updating from shared data model

Accessibility

All color combinations pass WCAG AA:

  • Orange #FF9830 on black: 8.2:1 ✅
  • Green #50FF50 on black: 13.8:1 ✅
  • Cyan #20F0FF on black: 13.1:1 ✅
  • Red #FF3030 on black: 5.9:1 ✅
css
@media (prefers-reduced-motion: reduce) {
  body, .scan-line-overlay, [data-mode="emergency"] * {
    animation: none !important;
  }
}

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

© 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

SKILL.md and 11 other files in the repository root of TheGreatGildo/nerv-ui.

  • SKILL.md
  • .DS_Store
  • LICENSE
  • README.md
  • components/crt-effects.css
  • components/data-table.html
  • components/event-log.html
  • components/magi-oracle.html
  • components/metrics-grid.html
  • components/vault-card.html
  • demo.html
  • nerv-ui.css

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—~2.3kAutomated safety check: PassMIT
Auteuragiwhitelist/auteur1k—~5kAutomated safety check: PassMIT
Better Designmarvkr/better-design254—~1.2kAutomated safety check: PassMIT
Oma Designfirst-fluke/oh-my-agent1.3k—~2.9kAutomated safety check: PassMIT
Frontendnotque/vexjoy-agent441—~5kAutomated safety check: NotesMIT
Motion CraftEliasOulkadi/shokunin114—~6.4kAutomated safety check: PassMIT

Similar skills

  • Auteur

    agiwhitelist/auteur

    Design and build complete web experiences from scratch — award-level product and marketing pages, cinematic scroll-directed sites where the page is directed like a film, and multi-screen products…

    1k GitHub stars~5k tokensUpdated 2 mo ago
    Frontend & DesignAuto-check passed
  • Better Design

    marvkr/better-design

    Build, improve, and review production interfaces with the Better Design MCP.

    254 GitHub stars~1.2k tokensUpdated 18 days ago
    Frontend & DesignAuto-check passed
  • Oma Design

    first-fluke/oh-my-agent

    AI design specialist skill with DESIGN.md management, anti-pattern enforcement, optional Stitch MCP integration, and component library guidance.

    1.3k GitHub stars~2.9k tokensUpdated yesterday
    Frontend & DesignAuto-check passed
  • Frontend

    notque/vexjoy-agent

    Frontend: UI design, distinctive visual styles, HTML artifacts, Three.js 3D.

    441 GitHub stars~5k tokensUpdated yesterday
    Frontend & DesignAuto-check: notes
  • Motion Craft

    EliasOulkadi/shokunin

    Design GPU-accelerated animations with Web Animations API (WAAPI), Scroll-Driven Animations (ScrollTimeline/ViewTimeline), FLIP technique, easing systems, and accessibility (prefers-reduced-motion).

    114 GitHub stars~6.4k tokensUpdated 6 days ago
    Frontend & DesignAuto-check passed
  • Scroll World Storytelling

    nirholas/three.ws

    Turn an article, case study, brand narrative, product journey, or long-form story into a cinematic scroll-driven landing page using one of three renderers: scrubbed video, a real-time Three.js…

    229 GitHub starsUsed in 1 repo~3k tokens
    Frontend & DesignAuto-check passed

More from TheGreatGildo/nerv-ui

  • Nerv UI

    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…

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

Questions about Nerv UI

What does Nerv UI do?

NERV Operations Console v2 — Evangelion-inspired UI component library. Nerv UI is an agent skill from TheGreatGildo/nerv-ui. NERV Operations Console v2 — Evangelion-inspired UI component library.

When should I use Nerv UI?

Nerv UI fits situations like: tasks that involve Design systems; tasks that involve 3D graphics and WebGL.

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 (the TheGreatGildo/nerv-ui repository) 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 (the TheGreatGildo/nerv-ui repository) 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 2 domains. In commands or code: fonts.googleapis.com; the agent is likely to contact it when it follows the instructions. As links in the text: woody-cairn-ztqf.here.now. 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 (from the LICENSE file in the skill folder). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Nerv UI use?

About 2.3k tokens (SKILL.md is roughly 9.1k 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: Auteur (agiwhitelist/auteur, 1k stars), Better Design (marvkr/better-design, 254 stars), Oma Design (first-fluke/oh-my-agent, 1.3k stars) and Frontend (notque/vexjoy-agent, 441 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.