Frontend standards

Glass Instrument UI

Dark and premium without looking generated: glass cards, a violet and lime identity, mono numbers.

The traders-zone.in home page: a near-black violet field, a heavy white headline ending in violet, a lime pill button and a glass outline button, and the product's dashboard in a browser frame below. — Live on traders-zone.in, built in this style. Captured 2026-09-23. Built with Qwik + Qwik City and plain CSS custom properties, on Cloudflare; the skill does not depend on it.

Trigger accuracy

Not measured yet. We will publish the trigger accuracy here, with the date and the test suite, once the eval has run. No number until then.

What we changed

The whole visual system of a live product as tokens: surfaces, the two-hue palette, the holographic ramp, type, radius, depth.
Component recipes that are copied, not reinvented: the gradient-hairline glass card, the lime primary, the glass secondary, the mono kicker, the aurora and grain.
Ten hard rules Claude checks against, including one lime action per screen and holographic type on three lines at most.
A list of what this look deliberately is not (neon cyan, chrome bevels, sci-fi lettering), so a request never drifts into it.
A ui-ux-pro-max setup and a strict split: this skill owns the look, ui-ux-pro-max checks usability, so the result does not read as generated.

What it does, on real work

A landing hero

> build the hero for a crypto portfolio tracker in the glass instrument style

Written to produce an aurora field, a two-column hero with the headline's last phrase in violet, one lime button, one glass button and a browser frame for the product.

A dashboard panel

> make a KPI row and a trades table for this page

Written to produce glass panels that do not lift, mono tabular figures, up in lime and down in violet, and an as-of time on every number.

A restyle

> this settings page looks generic, restyle it

Written to add the tokens to your global CSS, replace grey borders with light-on-glass hairlines and leave one lime action on screen.

Requirements

Claude Code with skills support
Any stack that renders CSS: HTML, React, Next.js, Qwik, Vue, Svelte, Astro, Tailwind
Fonts: Outfit, Inter, JetBrains Mono (free, Google Fonts)
Recommended: ui-ux-pro-max, installed from its own repo

free-mac.online, a live site built in this style

macOS Native Dark UI

An app that feels like Apple shipped it: system colours, SF type, a real Mac window.

Eval suite not run yet

richlist.online, a live site built in this style

Editorial Ledger UI

Credible and expensive: paper and coal, a serif headline, mono money, one flat lime accent.