About

Imported from practicalswan/agent-skills (web-design-reviewer/SKILL.md). Install upstream with npx skills add practicalswan/agent-skills --skill web-design-reviewer. Copyright stays with the author.

Web Design Reviewer

Name: web-design-reviewer
Author: practicalswan

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

Open the page with a browser-capable MCP client such as Playwright MCP.
Capture the current state before editing.
Test desktop and mobile widths.
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

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":

Pass/fail: The Web Design Reviewer guidance is tied to a concrete route, component, screen, or design artifact.
Pass/fail: Component states cover loading, empty, error, success, and responsive breakpoints where applicable.
Pass/fail: Accessibility, visual hierarchy, and interaction behavior are reviewed against the shared component rubric.
Pressure-test scenario: Review the component on a narrow mobile viewport, keyboard-only path, and slow-loading state.
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

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.

MCP Availability And Fallback

Preferred MCP Server: Playwright MCP

Fallback prompt: "Use the Web Design Reviewer skill without MCP. Rely on the local SKILL.md, bundled references or scripts, and manual verification. Show the exact commands, evidence, and final checks you used before concluding."
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.

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.

Use it

Copy one of these into your project. Installing also returns the manifest and these snippets.

yaml

targets:
  - https://api.opensmartroute.ai/api/v1/registry/practicalswan-agent-skills-web-design-reviewer/manifest   # or paste the manifest below

Manifest

An Open Capability Manifest: the router reads it to know what this does, what it costs and when to pick it.

practicalswan-agent-skills-web-design-reviewer.ocm.jsonjson

{
  "ocm": "1",
  "id": "practicalswan-agent-skills-web-design-reviewer",
  "kind": "skill",
  "name": "web-design-reviewer",
  "description": "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.",
  "publisher": "practicalswan",
  "version": "1.0.0",
  "capabilities": {
    "domains": [
      "coding"
    ],
    "tags": [
      "skill-md",
      "web",
      "design",
      "reviewer",
      "frontend",
      "ui",
      "skills-sh"
    ],
    "languages": [
      "en"
    ]
  },
  "quality_prior": 0.6,
  "examples": [
    "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."
  ],
  "primary": false,
  "metadata": {
    "source": {
      "provider": "skills.sh",
      "repository": "https://github.com/practicalswan/agent-skills",
      "path": "web-design-reviewer/SKILL.md",
      "ref": "HEAD",
      "url": "https://github.com/practicalswan/agent-skills/blob/HEAD/web-design-reviewer/SKILL.md",
      "key": "practicalswan/agent-skills/web-design-reviewer/SKILL.md"
    }
  },
  "instructions": "# Web Design Reviewer\n\nUse 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.\n\n- Leverage native parallel subagent dispatch and 200k+ context windows where available.\n\n\n## Activation Conditions\n\nUse symptom -> action triggers: when one matches, apply this skill and verify with the protocol below.\n\n- Reviewing a live page for layout or spacing defects\n- Checking responsive behavior at a few critical widths\n- Comparing a page to a design system or visual target\n- Tracing a visible issue back",
  "cost": {
    "context_tokens": 1150
  }
}

Fetch it by URL: GET /api/v1/registry/practicalswan-agent-skills-web-design-reviewer/manifest?version=1.0.0

Reviews

Star ratings from people who tried it. One review per account; edit yours any time.

No reviews yet. Install it, try it, and be the first to rate it.