Frontend standards

macOS Native Dark UI

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

The free-mac.online home page: a centred white headline with an orange-to-pink gradient phrase, a white download pill, a row of green-check reassurances, and the Mac app in a window frame with traffic lights. — Live on free-mac.online, built in this style. Captured 2026-09-23. Built with React 19 + Vite inside Tauri 2 for the app, and Qwik + Qwik City for the site; 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

Two surfaces in one token file: the dense 13px app window and the open, Apple-style marketing site.
The app chrome as recipes: overlay titlebar clear of the traffic lights, 272px sidebar, sliding segmented control, search field, tinted destructive buttons.
Apple's system colours in dark appearance, and the rule that they carry meaning, never decoration.
The web tells it removes: hand cursors, selectable labels, 16px buttons in an app window.
A ui-ux-pro-max setup, with the one exception written down: desktop controls are below the web touch target on purpose.

What it does, on real work

An app window

> build the main window for a Mac clipboard manager with a sidebar and a list

Written to produce a 272px sidebar under an overlay titlebar, 13px controls, the arrow cursor, a sliding segmented control and one blue primary.

Its landing page

> now the landing page hero for that app

Written to produce a centred hero with a two-stop gradient phrase, a white pill download button, version and OS fine print, and the app in a window frame.

A fix

> this settings panel looks like a web page, make it feel like a Mac app

Written to shrink buttons to 12.5px, drop hand cursors and turn a solid red button into a tinted destructive one.

Requirements

Claude Code with skills support
Tauri, Electron or a web view for the app; any web stack for the site
Fonts: none to install, the system stack renders SF Pro on a Mac
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

Editorial Ledger UI

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