Skills for Real Engineers. Straight from my .agents directory.
39 skills
frontend-visual-qa
Agent skill from
Audits rendered UI and specific task/object-link handoffs; excludes ordinary source citations alone. Audits already-rendered UI and Markdown/Obsidian image layout — web app, deck/slide, dashboard, design-system, or Electron/native app — via real-browser/native-app journeys and a Playwright sweep. Use after UI implementation to find typography, overflow, responsive, routing, data-viz, browser-output, or native-shell defects, or to compare a render against a reference. Not for greenfield UI design (use ui-designer) or QA-program setup (use qa-expert).
How to install frontend-visual-qa
install frontend-visual-qa
# install the claude-code-skills pack with the skills CLI
npx skills add daymade/claude-code-skills# or add only this skill to Claude Code: copy the folder
frontend-visual-qa/
# into
~/.claude/skills/frontend-visual-qa/ (all projects)
.claude/skills/frontend-visual-qa/ (one project)
1# Frontend Visual QA23Audit the interface the user can actually see. Treat build success, DOM presence,4and uninspected screenshot files as supporting signals, never as visual proof.56Default to **audit-only**. Do not edit implementation, add tests, install7dependencies, or update snapshots unless the user explicitly asks to fix or8change the UI. Permission to fix source does not authorize rebuilding,9restarting, or deploying any target.1011## Scope And Routing1213Use this skill only after a rendered artifact exists. Select the smallest audit14profile that covers the request:1516- **core visual** — composition, typography, spacing, wrapping, clipping, images;17- **responsive** — breakpoints, reflow, mobile alternatives, scroll ownership;18- **state and journey** — conditional branches, transitions, recovery, routes;19- **browser output** — download, share, clipboard, popup, file dialog, print, PDF;20- **native shell** — Electron or hybrid chrome, permissions, drag regions, IPC UI;21- **page contract** — dashboard/admin, landing/deck, design-system artifact,22 browser tool/game, map/GIS, or review tool;23- **reference parity** — comparison with a named screenshot, product, or tier;24- **data visualization** — chart hierarchy, tokens, semantics, and accessibility.2526For a specific task/object link handoff, select **state and journey** for that27destination, including authoritative machine and run/job identity when titles28repeat. Keep the audit bounded to the promised destination.29…
Excerpt shown under the repository's MIT license.
More skills in claude-code-skills
Keep exploring
Similar skill repositories
An agentic skills framework & software development methodology that works.
15 skills
A single CLAUDE.md file to improve Claude Code behavior, derived from Andrej Karpathy's observations on LLM coding pitfalls.
CC1 skill
Public repository for Agent Skills
20 skills
Makes your AI agent think like the laziest senior dev in the room. The best code is the code you never wrote.
CCCU6 skills
An AI skill that provides design intelligence for building professional UI/UX across multiple platforms.
CCCXCUGH6 skills