material-x

Write or migrate tests for an @ydinjs/material-x component — file placement under packages/material-x/tests, the .browser/.spec.browser/.visual.browser/.node suffix and Vitest project routing, rendering/interaction rules (real custom element, real browser input), and the component definition-of-done checklist. Use when adding, moving, or reviewing a component's tests. For the @ydinjs/tproc-backed visual-contract layer specifically (token oracles, the bridge, normalization), use the test-visual-contract skill.

Author @ydinjs/tproc-backed visual-contract tests (*.spec.browser.test.ts) for @ydinjs/material-x components — assert that the rendered custom element agrees with the tokens tproc selected, using independent browser observations rather than circular token-vs-token comparisons. Use when writing a spec-contract test, adding a token contract to the bridge, or building a normalization adapter. For general behavior tests, the DoD checklist, or file routing, use the test-component skill instead.

Query Material Design upstream design tokens through @ydinjs/tproc (colors, typography, elevation, shapes, motion) for buttons, FABs, text fields, checkboxes, lists, etc. Use when you need a token's resolved value, its reference tree, its token set, deprecation status, or need to enumerate tokens/sets/tags from the cached M3 token tables in packages/tproc/.data/tokens.