Step 0 — is the kit here? This skill reads files from the kit. Check once:

ls ${CLAUDE_SKILL_DIR}/../../../tokens >/dev/null 2>&1 && echo KIT_OK || echo KIT_MISSING

On

KIT_MISSING

only the skill folders were installed, which is what

npx skills add

does. Say so plainly, point the user at

npx ux-ui-agent-skills init

or the plugin install, and stop. Do not guess the contents of a file you could not open.

${CLAUDE_SKILL_DIR}/../../../examples/showcase/

${CLAUDE_SKILL_DIR}/../../../examples/terminal/

/grill-me

• Who reads this, and what decision do they make from it? A revenue console for an operator and a trading desk for a dealer look nothing alike.
• What is the one number that leads? A dashboard without a lead is a wall.
• What is the update cadence? Hourly figures get a "last run" line. Live figures get a tape and a timestamp per row.
• How dense is honest? A terminal earns 12 panels. A weekly report does not.

• A correlation matrix is symmetric and its diagonal is exactly 1. Random values in both triangles is an instant tell to anyone who reads one for a living.
• A stacked area sums to the total; bands must not cross or leave gaps. The usual bug is reversing the baseline by index instead of by coordinate, which shows as dark wedges between bands.
• A waterfall needs connectors, and the closing bar must equal opening plus the steps.
• Depth rises away from the mid on both sides; it never falls.
• A donut whose segments do not total the whole is a pie chart lying.

• Every SVG gets

  role="img"

  plus either

  aria-label

  or

  <title>

  +

  <desc>

  referenced by

  aria-labelledby

  . Say what the chart shows, not that it is a chart: "Range 182.06 to 200.10, closing at 187.84" beats "price chart".
• Never encode meaning in colour alone. Green with a

  +

  and an arrow; red with a

  -

  . Up and down also carry a word in the table cell.
• Tables get

  <caption>

  (use

  .sr-only

  when the panel header already says it),

  scope="col"

  /

  scope="row"

  , and

  aria-sort

  only if clicking really sorts.
• Sortable headers, range tabs and theme toggles all declare state - so they must change it on a real click.

  verify_interactive.mjs

  clicks them and checks.

• A chart palette is not a text palette. White initials on

  --color-chart-4

  measured 2.65:1 in dark. Chart colours are tuned for large filled shapes.
• Success green as text on a raised surface measured 4.43:1 - four hundredths short of AA. Put the colour on the icon and the sign; keep the text neutral.
• axe must not run mid-transition. Disable transitions before flipping the theme, or contrast is sampled while colours are still moving.
• Dense tables do not fit a phone. Drop the column a phone can lose - the sparkline, the derived value - in a media query, and say so in a comment. Do not shrink type below the scale.
• Stagger comes from a token:

  calc(var(--duration-fast) * 0.6 * n)

  , never a typed millisecond.
• A grid row stretches its items. Two fields side by side where only one has a hint: the hint-less control grows to match the taller column and the two inputs end up different heights. Set

  align-content: start

  on the field and an explicit

  block-size

  on the control. Measure the heights in the render - the difference is obvious in a screenshot and invisible in the markup.
• The same stretch hits whole panels, and no gate sees it. A row is as tall as its tallest panel, and the short one packs its content to the top and ends in a bordered void - a heatmap panel with 130px of nothing under the caption, a right column that stops two panels short of the map beside it. Every panel in a row has to say which it is: one child absorbs the slack (

  grid-template-rows:auto minmax(0,1fr)

  , and that child's own tracks go

  minmax(<min>,1fr)

  so its rows grow too), or the rows share it out (

  align-content:space-between

  ), or the short column earns another panel. Screenshot the row and look at the bottom edge of each panel; this never shows up in the markup.

• auto-fit

  silently drops a column, and no gate sees it. Three gauges in a panel about 340px wide with

  minmax(min(100%,7rem),1fr)

  resolved to two tracks and orphaned the third beside an empty cell. When the count is fixed and meaningful, write

  repeat(3,minmax(0,1fr))

  and give narrow widths their own rule.
• A category chart needs its categories on the page, and no gate sees it. A Pareto of five defect types whose names live only in the

  aria-label

  is a row of anonymous bars to everyone looking at it. Put the labels under the bars - lay the plot out on an even pitch inside its viewBox so a matching grid of labels lines up without a second coordinate system.
• An

  .sr-only

  needs a positioned ancestor. Inside a scroller it otherwise resolves against the initial containing block, lands outside the viewport, and inflates the document's scroll width by hundreds of pixels.
• A zero-area element that only has area while it animates reads as content lost under

  prefers-reduced-motion

  . Give a radar sweep a wedge, not a 1px line.
• Never reuse a class name across layout and colour.

  .c4

  as both a four-column span and the fourth chart colour painted an entire panel pink.