Frontend standards

Editorial Ledger UI

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

The richlist.online home page: a lime announcement bar, a desaturated supercar photograph under a dark scrim, a large serif headline with a second line in italic lime, a lime button and a row of mono statistics. — Live on richlist.online, built in this style. Captured 2026-09-23. Built with Qwik + Qwik City and plain CSS custom properties, on Cloudflare Workers; the skill does not depend on it.

Trigger accuracy

Not measured yet. This skill does not go on sale until its eval suite has been run against it and the number published here.

What we changed

Paper and coal as semantic tokens that flip per section, with the fix for the classic bug where a dark section's heading stays black.
A Figure component contract: a money value cannot render without a label and a timestamp.
A leaderboard recipe: separated rows, a bar against the leader, podium marks on the top three only.
One flat lime accent, at most twice per screen, and green and red only on movement figures.
A ui-ux-pro-max setup and a strict split: this skill owns the look, ui-ux-pro-max checks usability.

What it does, on real work

A ranking page

> build a leaderboard of the top 20 open-source maintainers by sponsors

Written to produce a dark board of separated rows, mono figures, a bar per row against the leader, podium marks on the top three and a timestamped header.

A photo hero

> hero for a boutique hotel booking site

Written to produce a desaturated photograph under a coal scrim, a two-line serif headline with the second line in italic lime, and one lime button.

A restyle

> this pricing page looks like a SaaS template, make it editorial

Written to move it to a paper ground with serif headings and mono prices, remove gradients and glass, and cut the lime to two uses.

Requirements

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

Glass Instrument UI

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

Eval suite not run yet

macOS Native Dark UI

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