agentleFS
Sign inStart free
PracticalSwanPracticalSwan/agent-skills/web-design-reviewer/SKILL.md

web-design-reviewer

Skill22 starsChanged 25 days agoMITView on GitHub

Visual inspection of live websites to find and fix design issues. Use when reviewing UI layout/design, checking responsive design visually, detecting visual inconsistencies, or diagnosing CSS/accessibility problems at the source code level. Not for automated E2E testing.

15 other projects use a version of this.

Adopted by

Most recently taken up by

Used with

Projects with it also use results-report, daily-coding and 10 more.

Other files people use alongside this one.

Files found in the same public projects as a version of this one, more often than they turn up anywhere else. Each project counts once, large collections count for less, and this file's own repository is left out.
  • Galaxy-DawnSkill

    results-report

    This skill should be used when the user asks to "write an experiment report", "summarize experimental results", "do experiment retrospection", "write a results report", "写实验总结报告", "写实验复盘", or mentions turning completed experiment artifacts into a structured, decision-oriented research report. It assumes strict analysis should come from `results-analysis` first.

    Also in 3 projects that use this

  • Clay-HHKSkill

    daily-coding

    Daily coding assistant that auto-triggers when writing/modifying code, providing a core checklist.

    Also in 3 projects that use this

  • Clay-HHKSkill

    kaggle-learner

    This skill should be used when the user asks to "learn from Kaggle", "study Kaggle solutions", "analyze Kaggle competitions", or mentions Kaggle competition URLs. Provides access to extracted knowledge from winning Kaggle solutions across NLP, CV, time series, tabular, and multimodal domains.

    Also in 3 projects that use this

  • kharlamenkodevSkill

    bug-detective

    Also in 3 projects that use this

  • Google CloudSkill

    citation-verification

    Verify that citations in a document resolve to real records and that claimed titles match. Use before trusting a document's reference list.

    Also in 4 projects that use this

  • AnthropicSkill

    command-development

    This skill should be used when the user asks to "create a slash command", "add a command", "write a custom command", "define command arguments", "use command frontmatter", "organize commands", "create command with file references", "interactive command", "use AskUserQuestion in command", or needs guidance on slash command structure, YAML frontmatter fields, dynamic arguments, bash execution in commands, user interaction patterns, or command development best practices for Claude Code.

    Also in 3 projects that use this

  • +2 more from Clay-HHK

The file

We split this skill into the rules it gives an agent

6 rules. 0 are common, 6 are distinctive, and 0 are very specific to this project.

  • 0

    Common

    Most of the 15 edited versions we read keep these.

  • 6

    Distinctive

    This author's own choices. Worth a look.

  • 0

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Distinctive:

    Use this skill for visual QA and source-level fixes after a page is already running.

    line 10
  2. Distinctive:

    Use symptom -> action triggers: when one matches, apply this skill and verify with the protocol below.

    line 17
  3. Distinctive:

    Test desktop and mobile widths.

    line 28
  4. Distinctive:

    Use Playwright CLI, browser devtools, screenshots, and manual responsive checks when MCP browser tools are unavailable.

    line 61
  5. Distinctive:

    Do not claim an MCP operation was used when the active host does not expose it.

    line 63
  6. Distinctive:

    Before claiming "skill applied successfully":

    line 75

“Common” is measured: kept by at least 6 in 10 of the 15 edited versions of this file we could read. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

Web Design Reviewer

Use this skill for visual QA and source-level fixes after a page is already running. This is not the right skill for functional automation or regression suites.

  • Leverage native parallel subagent dispatch and 200k+ context windows where available.

Activation Conditions

Use symptom -> action triggers: when one matches, apply this skill and verify with the protocol below.

  • Reviewing a live page for layout or spacing defects
  • Checking responsive behavior at a few critical widths
  • Comparing a page to a design system or visual target
  • Tracing a visible issue back to CSS, Tailwind classes, or component structure

Recommended Workflow

  1. Open the page with a browser-capable MCP client such as Playwright MCP.
  2. Capture the current state before editing.
  3. Test desktop and mobile widths.
  4. Fix the source code, then re-check the same viewports.

Playwright MCP Mapping

These tool names are current in the Playwright MCP server used by Codex:

  • browser_navigate to open the page
  • browser_snapshot to inspect accessible structure
  • browser_take_screenshot for before and after captures
  • browser_resize for responsive review
  • browser_console_messages and browser_network_requests to catch front-end breakage
<!-- MCP:START --><!-- PORTABILITY:START -->

Cross-Client Portability

This skill is written to stay usable across GitHub Copilot, Claude Code, and Codex.

  • GitHub Copilot: keep the folder in a Copilot-visible skill path or wrap the workflow in project instructions when folder discovery is unavailable.
  • Claude Code: keep the folder in a local skills directory or a compatible plugin source.
  • Codex: install or sync the folder into $CODEX_HOME/skills/web-design-reviewer and restart Codex after major changes.
<!-- PORTABILITY:END -->

MCP Availability And Fallback

Preferred MCP Server: Playwright MCP, Chrome DevTools MCP (optional)

  • Fallback prompt: "Use the Web Design Reviewer skill without MCP. Follow the documented local or manual fallback, show the selected tool surface, and report the verification evidence."
  • Use Playwright CLI, browser devtools, screenshots, and manual responsive checks when MCP browser tools are unavailable.
  • Capture console or network issues with the browser or terminal before proposing visual fixes.
  • Do not claim an MCP operation was used when the active host does not expose it.
<!-- MCP:END -->

Anti-Patterns

  • Starting from a generic template without adapting it: The output may look polished but still miss the real audience or medium.
  • Ignoring final render or export review: Layout bugs often appear only after the asset is opened in its destination tool.
  • Fixing content and presentation in one pass: It becomes hard to tell whether a problem is structural or visual.

Verification Protocol

Before claiming "skill applied successfully":

  1. Pass/fail: The Web Design Reviewer guidance is tied to a concrete route, component, screen, or design artifact.
  2. Pass/fail: Component states cover loading, empty, error, success, and responsive breakpoints where applicable.
  3. Pass/fail: Accessibility, visual hierarchy, and interaction behavior are reviewed against the shared component rubric.
  4. Pressure-test scenario: Review the component on a narrow mobile viewport, keyboard-only path, and slow-loading state.
  5. Success metric: Zero generic UI approval; every approval cites rendered behavior or source evidence.

Review Checklist

  • No overflow or clipped content at target widths
  • Interactive controls remain visible and reachable
  • Text contrast and focus states are acceptable
  • Repeated components use consistent spacing, typography, and color
  • Fixes were verified visually after the code change

References & Resources

Documentation

  • Visual Checklist - High-signal items for layout, contrast, spacing, and responsive review
  • Framework Fixes - Typical fix locations for CSS, Tailwind, CSS modules, and component styles

Scripts

  • CSS Risk Audit - Scan CSS and front-end source for risky fixed widths, viewport traps, and overflow patterns

Related Skills

  • frontend-design: Use it when the workflow also needs UI composition and front-end design direction.
  • stitch-design: Use it when the workflow also needs turning interface designs into implementation-ready assets.
  • canvas-design: Use it when the workflow also needs visual composition and presentation-ready diagram work.

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

  • It worked
  • Partly
  • It didn't
What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free