Skip to content
Agentmart
Submit a tool

frontend-visual-debug

Use when debugging or reviewing rendered frontend UI, screenshots, responsive layout, text overflow, visual regressions, browser console errors, network…

Skill by andy4917

IndexedApache-2.0
Write a review

Install

Works with Claude Code, Claude apps, Codex, Cursor, Gemini CLI, GitHub Copilot, VS Code, OpenCode, Goose, Windsurf. Read the repository before you give any tool access to your data.

npx agentmarket install skill/andy4917-frontend-visual-debug

Asks which of your tools to add it to (Claude Code, Codex, Cursor, VS Code, Windsurf, Gemini CLI, Claude Desktop) and shows the change first. See https://agentmart.dev/cli.

Get the weekly diff

The weekly diff: one email a week with new agent tools, notable updates and grade changes, plus security alerts for tools you follow. Double opt-in, one-click unsubscribe.

We use your email only for this newsletter. Privacy

About

Use when debugging or reviewing rendered frontend UI, screenshots, responsive layout, text overflow, visual regressions, browser console errors, network issues, accessibility states, or interaction behavior.

Use cases: design, frontend

Reviews

Write a review

No reviews yet. Installed it? Reviews come from verified installers only. How reviews work

Permissions

What this skill can do and what it asks for, from its SKILL.md. Checked Oct 25, 2026.

Tools
No tools found
Secrets
None asked for
Install scripts
None found

Network hosts it talks to 1

  • codeload.github.com · found in install command

Files it touches

  • ~/.claude/skills/frontend-visual-debug

What's inside

Skill name
frontend-visual-debug
Description
Use when debugging or reviewing rendered frontend UI, screenshots, responsive layout, text overflow, visual regressions, browser console errors, network issues, accessibility states, or interaction behavior.
License
Apache-2.0
Instructions
21 lines in SKILL.md · view on GitHub

Files (2)

  • SKILL.md
  • openai.yaml · agents/

SKILL.md (first lines)

# Frontend Visual Debug

## Workflow

1. Read project UI instructions and use `modern-web-guidance` for web-platform evidence and the official `product-design` plugin workflow for product-design, ideation, prototype, audit, URL-to-code, image-to-code, or design-QA work when its trigger matches.
2. Start the existing dev server or static preview command. Do not invent a new runtime path when the project provides one.
3. Inspect the rendered app with Browser or Chrome DevTools, using the browser tool that matches the user's target environment.
4. Capture desktop and mobile evidence. Check layout framing, text fit, responsive behavior, hover/focus/disabled states, contrast, console errors, and failed network requests.
5. Patch the smallest confirmed UI or data-flow issue, then repeat the same rendered check.

## Guardrails

- Do not claim visual quality from source inspection alone when a browser check is practical.
- Do not hide overflow, overlap, or broken states behind screenshots that miss the affected viewport.
- Prefer existing components, tokens, and design-system conventions over new one-off styling.

## Exit Evidence

Report target URL, viewport coverage, browser/tool used, screenshots or observations, console/network status, checks not run, and remaining visual risk.

From andy4917/Agentic-workspace-software, Apache-2.0.

More from andy4917/Agentic-workspace-software

Signals

Stars
0
Forks
0
Open issues
0
Last commit (this folder)
Jun 2, 2026 (4 months ago)

From GitHub (fetched Oct 24, 2026).

Details

License
Apache-2.0
Repository
github.com/andy4917/Agentic-workspace-software
First seen
Oct 24, 2026
Last checked
Oct 24, 2026
Source
GitHubgithub-graphql

More from andy4917

Cite this page

frontend-visual-debug skill. Agent Mart. https://agentmart.dev/skills/andy4917-frontend-visual-debug (last updated 2026-10-24)