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
Chalk Labs
Need help deploying frontend-visual-debug?
Chalk Labs sets up agents like this inside real teams: connected to your tools, tested on your data, with a human in the loop where it matters.
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.
About
Use cases: design, frontend
Reviews
Write a reviewNo 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
- 0.479score
keep-codex-fast
andy4917
Use when Codex feels slow or bloated, when local sessions/logs/worktrees/config have grown over time, or when a user wants safe maintenance for Codex…
SkillCFreshness: CClaude Code +9 - 0.474score
dont-even-try
andy4917
Lightweight read-only adversarial review of the immediately previous Codex turn.
SkillCFreshness: CClaude Code +9 - 0.474score
no-mistakes
andy4917
Validate your code changes through the no-mistakes pipeline - automated code review, tests, lint, docs, push, PR, and CI - before they reach upstream.
SkillCFreshness: CClaude Code +9 - 0.474score
dependency-upgrade
andy4917
Use when upgrading, replacing, pinning, auditing, or troubleshooting dependencies, packages, runtimes, SDKs, CLIs, lockfiles, peer dependencies, security…
SkillCFreshness: CClaude Code +9 - 0.474score
git-easy-korean
andy4917
Use when Codex performs, explains, summarizes, reviews, or plans Git/GitHub work for Korean users, including status, diff, add/stage, commit, push, pull…
SkillCFreshness: CClaude Code +9 - 0.474score
clean-all-slop
andy4917
Combined adversarial review, failure exposure, root-cause analysis, and behavior-preserving cleanup workflow for AI-generated slop.
SkillCFreshness: CClaude Code +9 - 0.471score
goal-decision
andy4917
Decide whether a user task should become a Codex /goal, stay as a one-off prompt, or be refined first.
SkillCFreshness: CClaude Code +9 - 0.470score
codex-scaffold-validation
andy4917
Use when validating or changing this workstation's Codex scaffold, CODEX_HOME, managed source mirror, config.d/config.toml reconciliation, hooks, MCP…
SkillCFreshness: CClaude Code +9 - 0.469score
api-contract-review
andy4917
Use when reviewing API contracts, request/response schemas, OpenAPI specs, generated clients, server handlers, integration tests, compatibility, versioning…
SkillCFreshness: CClaude Code +9 - 0.464score
agent-harness-construction
andy4917
Build or repair the local Codex harness with reversible, deterministic changes.
SkillCFreshness: CClaude Code +9 - 0.464score
iterative-retrieval
andy4917
Retrieve focused context for subagents without dumping the whole tree.
SkillCFreshness: CClaude Code +9 - 0.457score
LaTeX Tectonic
andy4917
Compile LaTeX and TeX documents with the bundled Tectonic executable.
SkillCFreshness: CClaude Code +9
Signals
- Stars
- 0
- Forks
- 0
- Open issues
- 0
- Last commit (this folder)
- Jun 2, 2026 (5 months ago)
From GitHub (fetched Oct 24, 2026).
Details
- License
- Apache-2.0
- First seen
- Oct 24, 2026
- Last checked
- Oct 24, 2026
- Source
- GitHubgithub-graphql
More from andy4917
- 0.479score
keep-codex-fast
andy4917
Use when Codex feels slow or bloated, when local sessions/logs/worktrees/config have grown over time, or when a user wants safe maintenance for Codex…
SkillCFreshness: CClaude Code +9 - 0.474score
git-easy-korean
andy4917
Use when Codex performs, explains, summarizes, reviews, or plans Git/GitHub work for Korean users, including status, diff, add/stage, commit, push, pull…
SkillCFreshness: CClaude Code +9 - 0.474score
no-mistakes
andy4917
Validate your code changes through the no-mistakes pipeline - automated code review, tests, lint, docs, push, PR, and CI - before they reach upstream.
SkillCFreshness: CClaude Code +9 - 0.474score
dependency-upgrade
andy4917
Use when upgrading, replacing, pinning, auditing, or troubleshooting dependencies, packages, runtimes, SDKs, CLIs, lockfiles, peer dependencies, security…
SkillCFreshness: CClaude Code +9 - 0.474score
clean-all-slop
andy4917
Combined adversarial review, failure exposure, root-cause analysis, and behavior-preserving cleanup workflow for AI-generated slop.
SkillCFreshness: CClaude Code +9 - 0.474score
dont-even-try
andy4917
Lightweight read-only adversarial review of the immediately previous Codex turn.
SkillCFreshness: CClaude Code +9
Done for you
Rather not set it up yourself?
Chalk Labs scopes, builds and runs agents for your team: the task audit, the eval harness, the integrations and the weekly ops report. Fixed scope, priced before we start.
See how we build AI agents →Read the case studies
Chalk Labs is a two-founder AI and growth studio. We build AI agents, CRMs and MVPs for Web3 and AI companies, and have shipped 50+ product and token launches.
- launches shipped
- 50+
- launches shipped
- media placements
- 500+
- media placements
- founders on every account
- 2
- founders on every account
Press we've placed: Forbes · CoinDesk · Decrypt · Cointelegraph · The Block
Rahil Jain, Co-founder, Chalk Labs. Ex-Goldman Sachs engineer. You talk to the person who builds it.
Get frontend-visual-debug running in your business
Tell us what you want to automate. A founder replies within one working day with a plan, not a pitch deck.
Cite this page
frontend-visual-debug skill. Agent Mart. https://agentmart.dev/skills/andy4917-frontend-visual-debug (last updated 2026-10-24)