ux-ui-agent-skills

Screens an agent built. Gates that signed them off.

A trading terminal with ten chart types, a revenue console, and 23 component harnesses. One token system, four aesthetic directions, forty objective checks that all have to pass before any of it ships.

Open the terminal Get the kit
Meridian Terminal: market ticker, candlestick chart with volume and a moving average, order book with depth bars, depth curve, time and sales, watchlist The same trading terminal in dark theme

// measured, not claimed

41objective gates
26rendered pages
19runnable skills
138design systems
0chart libraries

Density test

Ten chart types, no chart library.

A trading desk is the hardest screen there is: dense, mostly non-text, and unforgiving. Every mark on it is inline SVG drawn from the same tokens as every button in the kit.

Price
Candlesticks with wicks, volume, a 7-period moving average
Book
Level 2 with depth bars, and a cumulative depth curve
Portfolio
Stacked area, waterfall with connectors, bubble chart
Risk
A correlation matrix that is actually symmetric, and a gauge
Open the terminal
Meridian Terminal, 1-hour interval

Product screen

One number leads. Everything else gets out of its way.

Atlas is a revenue console where the composition rules were followed instead of described: one hero figure at three times the body size, three different shapes instead of three identical cards, and a table whose headers really sort.

Open the dashboard
Atlas revenue console: sidebar, a hero net-recurring-revenue figure with a weekly bar chart, retention and churn cards

Same rules, different directions

One engine, three more looks

The tokens change; the rules do not. Each renders from its own theme file and clears the same checks.

Reference app: analytics screen with one hero metric and a settings page Reference app Two pages, one theme, a Delete flow that traps focus and returns it Apple-direction demo: restrained type, generous space Apple direction Restrained type, generous space, almost no colour Brandkit foundation generated from an OKLCH brand hue Brandkit foundation Generated from one OKLCH hue, verified in both themes

Industry templates

Five industries, one token system

Whole screens, not component sheets: a checkout, a sales pipeline, a patient chart, a bank account view and a freight control room. Each one clears the same fourteen render checks in both themes.

Checkout screen: bag with quantity steppers, payment method choices, and an order summary with the total E-commerce checkout Steppers that really count, a low-stock warning, a total that explains itself CRM pipeline: weighted forecast, four stage columns of deal cards, and a deal detail panel Sales pipeline Weighted forecast, stage columns, a deal panel that follows the selection Patient chart: allergy banner, vitals with trends, lab results with reference ranges, active medications Patient chart Allergy banner first, vitals with trends, labs against reference ranges Banking screen in dark theme: account balances, transaction ledger, spending breakdown and a fraud prompt Retail banking Balances, a ledger, spending, and a transfer dialog that traps focus Freight control room: shipment timeline, exception queue, fleet utilisation and a sortable consignment table Freight control Shipment timeline, exception queue, and a table whose headers really sort

// design-systems/library

138 systems, each one a full spec

Not colour swatches. Each of these is a written specification - surfaces, type ramp, motion, component behaviour - that the agent resolves into this kit's three-tier tokens, then re-verifies for contrast.

23 files

Component harnesses