Codex runtime. Before using this skill, read ../executor-catalog/references/codex-runtime.md. It defines tool mappings, named-agent dispatch and stage-chat orchestration; use it for inherited Claude Code terms below.

UI UX Pro Max — design data

An embedded copy of UI UX Pro Max (MIT, nextlevelbuilder/ui-ux-pro-max-skill
v2.13.0, commit 477bcb2), fitted to this pipeline. LICENSE is the
original licence; VENDORED.md lists every change against the original.

Place in the pipeline

Who	Uses	For
ui-design, step «Визуальное направление»	--design-system; --domain color, typography, google-fonts, style, landing	two or three directions (palette, fonts, style, density) for the user to choose from; landing patterns when the SRS has a public page; suggested effects as proposals
figma-opus (MODE direction, MODE draw), figma-sonnet (MODE restyle)	the chosen direction as the packet states it	style tiles; the token set; rebinding existing frames

Rules for front-end code are not here: react and frontend own them,
web-design-guidelines the UI-code rules. The stack notes (--stack,
--domain react) are a secondary index — search them only for a detail
those skills lack. references/quick-reference.md is the short form of
every rule with its UX-n, a search index, not a review checklist.

A choice made here is not yet the project's. Asked straight for a
palette, a typeface or a style («подбери палитру», «какой шрифт»), give the
options and then offer ui-design → Visual direction to take one: there it
becomes a style tile the user picks, the frames register's «Визуальное
направление» line and the 🎨 Tokens page in Figma, from which the code's
theme file is built. A palette chosen only in the chat reaches no frame
and no code, and the next design run does not know it.

The UX data here is the same rule set as ux-patterns. Every row of
data/ux-guidelines.csv names its rule in the «UX Rule» column, and every
line of references/quick-reference.md ends with → UX-n; cite that id in
annotations, specs and findings. A row marked «только по требованиям» is a
feature, not a rule: it reaches a screen only when the SRS asks for it.

Running the search

python3 "<folder of this SKILL.md>/scripts/search.py" "<query>" --domain <domain>

If python3 is missing, try python, then py -3. Python 3 only, no
packages. The script reads only this skill's data/ folder and writes
nothing.

Choose the smallest mode that fits:

1. A product-wide visual direction → --design-system.
2. One concern (a palette, a font, a chart, a UX question) → one
   explicit --domain.
3. A stack detail react or frontend lacks → --stack; a design
   question in the same task is a separate --domain search.

Build each query around one intent, in 2–5 meaningful English terms (the
data is in English, so Russian words match nothing) with one useful
constraint (product, audience, interaction): "meeting room booking corporate", not a whole brief. Check that the domain, the top
result and its fit for this product are right before using it. An empty
or off-topic result: «If a search returns nothing» below.

Need	Domain	Example
Product type → style, palette, landing	product	"booking appointment" --domain product
More styles	style	"minimal flat accessible" --domain style
Palettes	color	"corporate trust blue" --domain color
Font pairings	typography	"professional clean" --domain typography
One Google font	google-fonts	"cyrillic geometric sans" --domain google-fonts
Charts	chart	"occupancy over time" --domain chart
UX question	ux	"error summary validation" --domain ux
Landing structure	landing	"pricing social proof" --domain landing
Icons	icons	"calendar outline" --domain icons
React / Next.js performance	react	"rerender memo list" --domain react

Stacks: react (React + Vite), nextjs, shadcn, html-tailwind — the
pipeline's two front-end stacks and their component and styling layer.

The design system for a visual direction

python3 "<folder of this SKILL.md>/scripts/search.py" "<product> <audience> <keywords>" \
  --design-system -p "<Product>" -f markdown --product-type <b2b|b2c> \
  --density <1-10> [--variance <1-10>]

• --product-type is the register's Тип продукта; the font pairing is
  chosen for it (B2B: a sans body and no display heading). Without it the
  density decides (6 and above counts as B2B).
• --density sets the spacing scale: B2B 7–8 (compact rows, UX-10), B2C
  3–5.
• --variance moves the style from calm and centred (1–3) to bold and
  asymmetric (8–10): B2B 2–4; B2C and a public page up to 7. Two runs with
  different --variance or style keywords give two genuinely different
  directions — options that differ only in hue are one option.
• Do not use --persist. The chosen direction lives as variables in the
  Figma file (🎨 Tokens), in the frames register's «Визуальное
  направление» line, and later as CSS variables in code; a
  design-system/MASTER.md would be a second source that goes stale.

How the output maps onto the pipeline:

Output section	Use
Style	the direction's character and its name in the option
Colors	tokens, by the table below; check every text pair for 4.5:1 and control boundaries for 3:1 (UX-7) before offering it
Typography	a pairing whose every family has the cyrillic subset, picked for the product type (its «Picked for» line) — still read its Mood and Best For against the brief, because the data's words can miss; a font outside the pairings comes from --domain google-fonts with cyrillic in the query, and is kept only when its Subsets list cyrillic — cyrillic-ext alone has no Russian alphabet
Landing Pattern	only when the SRS has a public page: offered to the user as the section order and the place of the main action
Suggested Effects	proposals for the user, not rules; which ones to drop first (UX-61, UX-63, UX-47) and where an accepted one is written: ui-design/references/visual-direction.md, the step after the user picks a direction
Avoid	added to the direction's «не делаем» line
Pre-Delivery Checklist	short form; the full one is ux-patterns → «Проверка экрана перед сдачей»

Palette roles → the pipeline's tokens (the shadcn/ui names the Figma
variables and the code share):

Output role	Token	Note
Primary, On Primary	primary, primary-foreground	the one accent: the main button, links, selection, the active menu item
Background, Foreground	background, foreground
Card, Card Foreground	card, card-foreground
Muted, Muted Foreground	muted, muted-foreground	also shadcn's secondary and accent (the secondary-button and hover surfaces), with foreground on them
Border	border, input
Destructive, On Destructive	destructive, destructive-foreground	UX-37
Ring	ring	the focus ring (UX-63)
Secondary, Accent/CTA	chart-1 … chart-5	colours for data; in B2C or on a public page Accent may instead become a second accent for the key action of a screen, only when the user picks it (a new token, UX-1)

The output gives one theme. When the SRS needs a dark theme, the dark set is
designed with the light one — lighter, desaturated tones rather than
inverted ones — and its contrast is checked separately (UX-62).

If a search returns nothing

1. Retry once with a narrower query or an explicit domain or stack; an
   off-topic result counts as empty.
2. Still empty: use ux-patterns and say plainly that the suggestion comes
   from general defaults, not from this data («палитры под этот продукт в
   базе нет, предлагаю нейтральную»).
3. Never present an empty search as a match.

Where to look

Problem	Where
Can't choose a style or palette	--design-system again with other style keywords or another --variance
Contrast in a dark theme	references/quick-reference.md §6: color-dark-mode, color-accessible-pairs
Motion feels wrong	§7: motion-meaning, easing, exit-faster-than-enter (UX-61)
Form problems	§8: inline-validation, error-clarity, focus-management
Navigation is confusing	§9: nav-hierarchy, adaptive-navigation, back-behavior
Layout breaks at a width	§5: desktop-first, breakpoint-consistency (UX-74)
Performance	§3: virtualize-lists, main-thread-budget, debounce-throttle (UX-75)