skills.rest
arndvs
arndvsCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

visual-feedback

Validates frontend changes through browser screenshots of layouts, dark mode, and animations.

1|Updated Mar 26, 2026
Search Tags:#frontend#css#visual testing#dark mode#browser#screenshot#ui validation
One-click install
npx skills add https://github.com/arndvs/ctrlshft --skill visual-feedback-arndvs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-feedback
Source: https://github.com/arndvs/ctrlshft/tree/main/skills/visual-feedback
Command: npx skills add https://github.com/arndvs/ctrlshft --skill visual-feedback-arndvs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Frontend changes often pass typecheck and tests while still producing broken layouts, incorrect dark mode rendering, or awkward animations, because LLMs lack a visual feedback loop. This Skill closes that gap by adding browser screenshot verification to the development workflow. ## Core Features & Use Cases - Screenshot-Based Verification: Take targeted screenshots after each small UI slice to confirm layout, alignment, overflow, and viewport behavior match intent. - Dark Mode and Responsive Checks: Emulate prefers-color-scheme: dark and test mobile (375px) and desktop viewports before considering a feature done. - Research-Driven Debugging: Use Tavily web search to understand unfamiliar CSS behaviors or animation issues instead of blindly iterating. - Use Case: While implementing a new dashboard component, you screenshot each change, catch a clipping issue at mobile width, verify dark mode renders correctly, and only then hand off to typecheck and tests. ## Quick Start Start the dev server, open the VS Code Simple Browser at the local URL, and ask the agent to implement one UI change and verify it with a screenshot.

Frequently Asked Questions about visual-feedback

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I verify frontend changes with screenshots in an AI coding workflow?▼

Start the dev server, open the VS Code Simple Browser at the local URL, implement one small UI slice, then take a screenshot and compare it against the intended layout. Fix any issues and re-screenshot before moving to the next slice.

How to test dark mode rendering without a theme toggle?▼

Inject a dark class via devtools with document.documentElement.classList.add('dark'), or emulate the prefers-color-scheme media query through CDP if available. Then screenshot to confirm the dark theme renders correctly.

What should a visual validation checklist for a web page include?▼

Check light mode, dark mode if applicable, mobile viewport at 375px, desktop viewport, interactive states like hover and focus, and loading, empty, and error states. Complete this sweep before running typecheck and tests.

Why do AI agents produce broken layouts that still pass typecheck?▼

Typecheck and lint only validate code correctness, not visual output. Without a browser feedback loop, the agent cannot see overflow, clipping, or alignment problems, so screenshot verification is needed to catch them.

When should I use Tavily search during frontend debugging?▼

Use Tavily when you hit an unfamiliar CSS behavior, browser quirk, or animation issue rather than iterating blindly. Prefer results from MDN, CSS-Tricks, and the relevant library's official documentation.

Related Skills

Explore More Software Engineering Skills→
SoufianouassifSoufianouassif

mockup-sandbox

Render live UI components in an isolated Vite iframe sandbox.

Community
Advanced
NostoNosto

repo-workflow

Automate repository validation and commit hygiene with lint, typecheck, tests, and conventional commits.

Official
Intermediate
corey-alixcorey-alix

CSS Subgrid Assistant

Guide CSS subgrid implementation for child grid alignment using MDN documentation.

Official
Basic
ChatGPT-KBChatGPT-KB

validate-ui

Automate end-to-end UI validation of Archon via browser automation and codebase review.

Official
Advanced