---
name: rad-visual-qa
description: Run browser-based visual QA for Radiants, RDNA, and RadOS web surfaces. Use for screenshot review, visual polish, responsive checks, final UI verification, AppWindow layout, text overflow, contrast, and design-system consistency before merge readiness.
---

# Rad Visual QA

Use this skill when a Radiants/RDNA/RadOS task needs live visual inspection, screenshot review, or final UI verification.

## Workflow

1. Identify the changed route, app surface, component state, and expected viewport set.
2. Start or reuse the local preview according to the repo instructions.
3. Open the actual changed surface in a browser, not a recreated mock.
4. Capture or inspect desktop and mobile states when responsive behavior matters.
5. Check for text overlap, clipped controls, broken icons, blank canvases, unexpected scroll traps, contrast issues, focus problems, and component styling drift.
6. Fix obvious implementation issues only when the task allows mutation.
7. Re-check the affected state and report screenshots, commands, and remaining risk.

## Radiants Focus

- AppWindow chrome, toolbar density, scroll body, resize behavior, and mobile fullscreen path.
- Semantic token use, pixel-corner consistency, shadows, typography scale, and icon source.
- Stable board/grid/tile dimensions so hover states and dynamic labels do not shift layout.
- Real screenshots as evidence; generated concepts are proposals only.

## Guardrails

- Do not claim visual readiness from code inspection alone.
- Do not substitute a polished reimplementation for the repo-native component.
- Do not perform deploys or production mutations from this QA skill.