AgentToolHub
Skill

frontend-visualqa

frontend-visualqa — a Claude Code skill from yutori-ai/frontend-visualqa

Features

  • ✓Verifies explicit visual claims against a running localhost frontend
  • ✓Captures screenshots for quick visual inspection
  • ✓Reuses browser sessions across MCP tool calls for multi-step debugging
  • ✓Works as a CLI (`frontend-visualqa verify`), MCP server (`frontend-visualqa serve`), or agent skill (`/frontend-visualqa`)

Installation Guide

Prerequisites

Install uv if you don't already have it:

bash
curl -LsSf https://astral.sh/uv/install.sh | sh

Quick install (recommended)

  • Install CLIs:

    • bash
        uv tool install frontend-visualqa \
      --with-executables-from yutori \
      --with-executables-from playwright
    playwright install chromium

    This installs the frontend-visualqa, yutori, and playwright CLIs and downloads the Chromium browser binary.

  • Log into Yutori API:

    • bash
        yutori auth login

    This opens your browser to save your Yutori API key to ~/.yutori/config.json.

    <details>
    <summary>Or, manually add your API key</summary>

    Go to platform.yutori.com and add your key to the config file:

    bash
        mkdir -p ~/.yutori
    cat > ~/.yutori/config.json << 'EOF'
    {"api_key": "yt-your-api-key"}
    EOF

    </details>

  • Register the MCP server using add-mcp (works with all clients):

    • bash
        npx add-mcp -g -n frontend-visualqa "frontend-visualqa serve"

    Pick the clients you want to configure.

  • Install skills using skills.sh:

    • bash
        npx skills add yutori-ai/frontend-visualqa -g

    -g installs at user scope. Omit -g for project-local install.

    Invoke the skill with /frontend-visualqa in Claude Code and $frontend-visualqa in Codex CLI. Agents can also auto-invoke.

  • Restart your agent (Codex, Claude Code, etc) so the installs are picked up.

    • <details>
    <summary>To uninstall later:</summary>

    bash
       uv tool uninstall frontend-visualqa
   npx skills remove -g frontend-visualqa

    add-mcp has no remove command. Delete the frontend-visualqa entry from your client's MCP config (e.g. ~/.mcp.json).
    </details>

    ![Skill demo in Claude Code](docs/images/skill-demo.gif)

    Manual per-client setup

    <details>
    <summary><strong>Claude Code</strong></summary>

    Plugin (recommended) — installs MCP tools + skill together:

    text
    /plugin marketplace add yutori-ai/frontend-visualqa
/plugin install frontend-visualqa@frontend-visualqa-plugins

    MCP only (if you prefer not to use the plugin):

    bash
    claude mcp add --scope user frontend-visualqa -- frontend-visualqa serve

    </details>

    <details>
    <summary><strong>Codex</strong></summary>

    bash
    codex mcp add frontend-visualqa -- frontend-visualqa serve

    Skills can be installed via npx skills add above, or with $skill-installer inside Codex:

    text
    $skill-installer install https://github.com/yutori-ai/frontend-visualqa/tree/main/.agents/skills/frontend-visualqa

    </details>

    <details>
    <summary><strong>Cursor / VS Code / other MCP hosts</strong></summary>

    Use the checked-in .mcp.json, or point your client at frontend-visualqa serve.

    </details>

    <details>
    <summary><strong>From source</strong></summary>

    bash
    uv sync
uv run playwright install chromium

    Register the MCP server with your client using uvx --from /absolute/path/to/frontend-visualqa frontend-visualqa serve as the command.

    </details>

    Uninstall

    <details>
    <summary><strong>Claude Code plugin</strong></summary>

    text
    /plugin uninstall frontend-visualqa@frontend-visualqa-plugins -s user

    </details>

    <details>
    <summary><strong>Codex</strong></summary>

    Remove the MCP server entry from ~/.codex/config.toml, then delete the skill directory:

    bash
    rm -rf ~/.agents/skills/frontend-visualqa

    Restart Codex after removing.

    </details>

    Reviews