Skill / React code quality
Test rendered output, not class names
Prove visual behavior through computed styles, geometry, or browser output instead of Tailwind class strings.
Goal
Make style tests fail on a user-visible regression, not on an implementation-detail refactor.
Review rules for component structure, state ownership, data fetching, and render behavior.
Checks
1Assert computed styles when CSS behavior is available in the DOM test runtime.
2Assert real geometry for layout and overflow, including dimensions, scrollWidth, and clientWidth.
3Use browser validation for pseudo-elements, media and container queries, hover or focus rendering, and layout-engine behavior.
4Assert class strings only when a class builder, class forwarding, or a public slot/classNames API is the contract under test.
Avoid
1Assertions that grep rendered HTML, source files, snapshots, className, or classList for Tailwind utilities to prove appearance.
2Calling a value computed when the test merely maps a class token to an expected CSS value.
3Keeping a class-name-only test when the current test runtime cannot observe the claimed behavior.
Source
Imported as local Control UI skill guidance, with this repo owning the final wording.
Mastra react-best-practices
../mastra/.claude/skills/react-best-practices