design-validation

Visual validation checks that UI remains consistent after CSS changes by verifying layout, spacing, alignment, and theme retention against design requirements. Load updated pages on your dev server and cross-reference the design checklist in your specs to confirm no elements broke or shifted.

Yes. Grid validation ensures your layout matches the specified structure (columns and rows) and verifies header/footer dimensions. Compare rendered pages against your design document to catch misalignments before deployment.

Use git diff to identify modified .ts, .tsx, and .css files. This targets only changed assets, letting you focus visual validation on specific components rather than reviewing the entire UI.

Tailwind classes and CSS custom properties can coexist, but require careful assessment to prevent conflicts. Check that Tailwind utility classes and custom property values don't override each other unintentionally in your theme implementation.

Dark theme validation confirms colors, contrast, and visibility remain correct in dark mode. Hover state testing across browsers ensures interactive feedback works consistently and doesn't cause layout shifts or visual glitches.