Responsive validation
Skill krzemienski/deepest-plan-plugin/skills/responsive-validation
Viewport-matrix testing. Verifies UI renders correctly across mobile / tablet / desktop breakpoints. Captures per-breakpoint screenshots as evidence. Optional skill listed in deepest-plan tool_enrichment when a UI must work across devices.From its SKILL.md
npx -y skills add krzemienski/deepest-plan-plugin --skill responsive-validationAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
One thing to look at
- 1 stars1 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
What its file declares
Copied from the file, not written here
The file declares its own license as MIT. That is the author’s claim about this one file, and it is not the same thing as the license GitHub reports for the repository, which is listed with the other numbers below.
SKILL.md
3.4 KB, as published. Nobody here has run it
Responsive Validation
Scope
Confirms a UI renders usably at each supported breakpoint. Captures per-viewport screenshots + layout assertions. Does NOT handle accessibility (use accessibility-audit) or deep performance (use web-validation + Chrome DevTools).
Standard Viewport Matrix
| Name | Width × Height | Devices |
|---|---|---|
| mobile-sm | 320 × 568 | iPhone SE 1st gen, smallest modern phone |
| mobile | 375 × 667 | iPhone 12 mini, most common mobile |
| tablet | 768 × 1024 | iPad portrait |
| desktop | 1280 × 800 | 13" laptop baseline |
| desktop-lg | 1920 × 1080 | desktop monitor |
Override if the product's analytics show different distribution. Document override in the plan.
Execution Pattern
for w in 320 375 768 1280 1920; do
agent-browser resize "${w}x1000"
agent-browser screenshot "e2e-evidence/vgN-w${w}.png"
agent-browser get text @main-heading > "e2e-evidence/vgN-w${w}-heading.txt"
done
PASS Criteria Patterns
Good:
- "At w=320: primary action button fully visible without horizontal scroll"
- "At w=768: two-column layout renders without overlap (side-by-side cards)"
- "At w=1280: content max-width applied; no edge-to-edge text blocks"
- "Main heading text identical across breakpoints (no content dropped at narrow widths)"
Bad (reject):
- "Looks responsive" → describe what SPECIFICALLY you see at each breakpoint
- "Works on mobile" → what is the mobile-specific layout? did you verify?
Gate Integration
Responsive checks pair with web-validation / fullstack-validation gates. Within a single gate:
<validation_gate id="VG-N" platform="web" ...>
...
<execute>
[standard web interactions]
for w in 320 768 1280; do
agent-browser resize "${w}x800"
agent-browser screenshot "e2e-evidence/vgN-w${w}.png"
done
</execute>
<pass_criteria>
[standard UI criteria]
AND at 320px: primary CTA visible without horizontal scroll
AND at 768px: layout shifts to side-by-side (verify via screenshot)
AND at 1280px: content max-width respected
</pass_criteria>
<review>
Read tool on all three breakpoint screenshots; describe layout at each
</review>
</validation_gate>
Common Failures
| Symptom | Likely cause | Fix |
|---|---|---|
| Horizontal scrollbar at 320px | Fixed width on a container | Use max-width + responsive padding |
| Card grid overlaps at 768px | Missing grid-template-columns breakpoint | Add md: variant |
| Hero text truncated at narrow widths | Large font-size with no responsive scale | clamp() or responsive classes |
| Nav items off-screen | Menu not collapsing to hamburger | Add mobile nav breakpoint |
Rules
- Test at least 3 breakpoints (one mobile, one tablet, one desktop)
- Verify via screenshot — not a media query audit alone
- Read every screenshot (describe layout state) — don't just assert file exists
- Cover the mobile breakpoint (320 or 375) even for desktop-first products — unless analytics prove zero mobile traffic
Security Policy
Screenshots may capture authenticated state. Store in gitignored e2e-evidence/.