---
name: glass-icon-studio
description: Replicate premium dark glassmorphic icons (edge-lit glass, neon rims, glow pools, translucent layers) as pure SVG/HTML from a reference image, first-shot. Measure-first forensics, physical-light checklist, one-batch authoring, max 2 render loops. Trigger when Alex gives a glassy/edge-lit/neon-rim icon reference to replicate, says "glass icon", "glassmorphic icon", "replicate this icon in code", "edge-lit", "premium 3D icon", or wants icon assets in this style (Imperium mint or any palette).
---

> **PORTABILITY NOTE (added 2026-07-27).** This process doc is published from Imperium's
> internal operating system. The METHOD is fully portable: prompts, model choices and
> parameters, CSS/SVG recipes, QA gates, and cost discipline all work anywhere. Paths that
> start with `~/.claude/`, `<repo-root>/`, `presentations/`, `scripts/`, or `memory/` are
> internal conveniences on the author's machine; substitute your own equivalents (any
> headless-browser screenshot loop, any image toolchain). Same for internal distribution
> steps (Google Drive folder IDs, Telegram bots) and `<your-vercel-team>` deploy scopes:
> use your own storage, messaging, and hosting. Working style anchors ship WITH this kit
> in `../cards/`, `../console/`, and `../folder/` — start from those, not from zero.

# Glass Icon Studio

Born from the 2026-07-27 glass folder build: 8 feedback rounds, ~20 prompts, 33 versions to
reach the reference. Every round was a CATEGORY of information that was available in the
reference image from minute one but never extracted. This skill front-loads all of it so the
first render lands ~v30-level and one correction pass ships.

**The core inversion: never start by drawing the CONCEPT ("a glass folder"). Start by
measuring the IMAGE.** Concept-first produced v1; measure-first is what every later round
converged to. The reference contains every answer — geometry, tones, lighting asymmetry,
material behavior — and eyes CANNOT read dark images (fills that look "black" are 14-48 RGB;
lighting that "looks brightest at the bottom" measured brightest at mid-side). Only sampled
numbers are trusted.

## The First-Shot Protocol (4 moves, ≤2 renders)

### Move 1 — Forensics (before ANY authoring; ~5 min, zero renders)

Run ALL of these against the reference and write the results into a spec block comment at the
top of the HTML file. Scripts in `references/cookbook.md` §Forensics.

1. **Object inventory + z-order.** List every object back-to-front. For each: silhouette
   shape, what it occludes, what occludes it, what shows THROUGH it.
2. **Geometry trace.** Key x/y coordinates of every edge/corner at the render size. Note
   perspective taper (parallel edges are never truly parallel in premium refs).
3. **Tone probes.** PIL-sample 10+ points: every fill (top/mid/bottom of each surface),
   background corners/center, darkest shadow, brightest highlight. Record exact RGB.
4. **Lighting map.** Per edge (L/R/T/B), scan for the brightest pixel along the rim. Rank
   the top-3 brightest zones and the fade-out zones. THIS is the step that kills wrong
   guesses — lighting asymmetry is the #1 thing eyes misjudge.
5. **Physics inventory.** Tick which behaviors the reference shows (checklist below). Each
   ticked item becomes a required layer in the build.
6. **Variance inventory.** List everything deliberately NON-uniform: stepped heights,
   differing angles, varied line widths, asymmetric brightness. Uniform copies of these
   read mechanical/AI — variance is the premium tell.
7. **Palette decision.** Ask-once if unstated: match reference hue exactly, or brand
   palette (Imperium → `assets/imperium/brand-v5/imperium-tokens.css`, mint scale
   #D8EBDD/#4CB782/#35A06D/#227A50/#124630)? Brand hue shifts RMS down ~0.3-0.5% — expected.

### Move 2 — Author the full stack in ONE pass

Build as inline SVG in an HTML shell, layered in this order (recipes + working snippets for
every layer in `references/cookbook.md`):

1. Background field: base fill + 4-6 gradient ellipses (halo, mid wash, floor pool + hot
   core, corner accents). objectBoundingBox radial gradients — never blur filters (banding).
2. Contact shadow (dark ellipse) — grounds the object; glow alone floats.
3. Back structure (panel/body) + its rim gradient.
4. Contents (sheets/inner objects): per-object fills (front object lightest), varied line
   art with width gradients, drop shadows between layers, top-edge rim highlights that fade
   below the "shoulders", stepped heights/angles per the variance inventory.
5. Slot/occlusion shadow where contents enter the body.
6. Poke-out clips: anything the reference shows escaping a container gets a taller clip
   window, never the container clip.
7. Glass front: vertical opacity ramp (see-through up top → opaque + deep-tinted at
   bottom), diagonal specular sweep (peak MID-gradient — first-stop clamp gotcha), local
   sheens, side darkening if measured.
8. Transmission layer (the "seen THROUGH glass" story): re-draw hidden rims/outlines over
   the glass at 0.1-0.2 opacity, clipped to the glass, faded out by mid-height with a mask.
9. Rim system: continuous gradient-stroke outline (brightness varies along it — NEVER
   segmented strokes, they cut off), + soft bloom strokes, + fade-ended accent strokes on
   the measured hero edges, + inner light spill clipped inside.

Then the **pre-render numeric self-check** (mandatory — this catches the #1 first-shot
killer): re-read every fill and gradient stop you authored against the Move-1 probe table.
Any surface authored >10 RGB lighter than its probe is wrong — dark-glass icons are ALWAYS
darker than instinct (validated twice: folder v23, padlock self-test both authored milky).
And do NOT hedge measured hot zones: if the edge scan says saturated 240+, author 240+ at
full measured width. Undershooting "to be safe" was the padlock test's biggest residual gap.

### Move 3 — Render once, verify against the checklist, fix in ONE batch

- Render: headless Chrome one-shot (command in cookbook; `curl` the server FIRST — a dead
  server screenshots a white error page and scores 9%).
- Build a side-by-side (ref | render) plus 2-3 zoom crops of the busiest regions.
- Walk the physical-light checklist + re-run the tone/lighting probes on YOUR render and
  diff the numbers. Fix everything found in one edit batch. Re-render.
- RMS similarity (cookbook script) is a REGRESSION guard only — it plateaus ~94-95% while
  perceived quality still transforms. The checklist + numbers are the acceptance test.

### Move 4 — Ship per house rules

`code-final.png` + side-by-side → Drive Media Hub (Content Assets) → commit+push →
Telegram code bot → chat links (markdown + raw `file:///` in a code block, rule 29).

## The physical-light checklist (Move 1.5 / Move 3 acceptance)

Every item the reference shows must exist in the build. These nine are exactly what the 8
rounds of feedback added, in order of how loudly their absence reads:

1. **Occlusion order** — every overlap correct; line art passes BEHIND nearer objects.
2. **Transparency ramp** — glass reveals what's behind it, more at top, opaque at base.
3. **Transmission** — rims/edges of hidden objects faintly visible THROUGH glass, fading.
4. **Cast shadows** — between stacked contents AND where contents enter containers (slot).
5. **Contact shadow** — dark grounding under the object, beneath the glow pool.
6. **Lighting asymmetry** — rim brightness varies continuously; hero zones per measurement
   (folder ref: both side edges blaze at mid-height, corners fade). Never uniform.
7. **Escape/poke-out** — elements that breach their container in the ref must breach.
8. **Micro-variance** — line widths, heights, angles all deliberately unequal.
9. **Depth gradient on details** — even line art gets a subtle gradient; flat ink is cheap.

## Taste knobs (defaults; adjustable in one message, don't re-litigate per round)

- Hue: brand palette vs reference-exact (default: ask once in Move 1.7).
- Glass density: how much shows through (default: match measured reference).
- Glow spread: tight/hero vs ambient wash (default: measured).
- Grain: SVG blurs are mathematically smooth; reference AI renders have organic falloff.
  Optional feTurbulence grain layer if Alex wants the last 2% of texture.

## Infra (macOS, this machine)

- Serve: `node ~/.claude/skills/mockup-studio/scripts/serve.mjs <dir> 8801 &` then
  `curl -s -o /dev/null -w "%{http_code}" http://localhost:8801/<file>.html` MUST be 200.
- Render: one-shot headless Chrome with isolated profile, background + `sleep 12` +
  `pkill -f <profile>` (no `timeout` on macOS zsh; `--headless=new` hangs). Full command in
  cookbook. Never the shared Chrome MCP browser (concurrent sessions hijack it).
- Compare: PIL side-by-side + zoom crops + `diff-score.py` (both in cookbook).

## Scope — when NOT to use this skill (Alex verdict 2026-07-27)

Sweet spot: **planar, layered glass** — folders, sheets, cards, panels, stacked UI-ish
objects. There this path beat GPT Image 2 prompt-gen and hybrid on the folder (94.6% vs
93.0/94.2) with exact geometry and brand-pixel control.

Weak spot: **curved tubes / volumetric refraction** (padlock-shackle class). The padlock
self-test hit 88.0% first-shot with structure right, but the tube read frosted-plastic,
not glass, inside the 2-render budget — Alex rejected it. For NET-NEW icon concepts with
curved/volumetric glass, route to image generation first (Higgsfield per Alex's workflow,
or GPT Image 2 — the padlock reference itself was a one-shot GPT Image 2 generation).
Use this skill for those forms only when the deliverable demands exact geometry, brand
tokens, or editability that image models can't hold.

## Worked example

`Alex OS/assets/mockups/2026-07-27-glass-folder-replica/` — `folder.html` (v33 final,
every technique live), `reference.png`, round-by-round audit in
`Alex OS/.context/braindump/2026-07-27-glass-folder-replica.md`. Sibling skills:
`card-studio` (card chrome + AI props), `mockup-studio` (UI replication + GPT finish).