Visual Ralph Skill

Use $visual-ralph for measured frontend implementation from an approved generated reference, static image, or live-URL baseline. The loop is:

description / URL -> approved reference -> $ultragoal implementation -> Visual Ralph verdict + pixel diff -> reusable design system.

For URL cloning, this skill owns the migrated $web-clone use case; preserve URL, viewport, fidelity, and interaction notes here. Do not invoke standalone $web-clone.

Shared operating, delegation, state, hook, team, cancellation, and verification invariants live in templates/AGENTS.md. Follow that source instead of duplicating its rules here.

Use when

• The user wants a web/app UI built or restyled against a visual target.
• A live URL or generated raster mockup needs measured implementation and pixel-level iteration.
• The result must leave reusable repo-native tokens/components, not only a matching screenshot.

Do not use it for a durable DESIGN.md brief ($design), non-visual backend work, comparison-only fixes that can be executed directly, or deterministic SVG/code-native assets.

Workflow

1. Ground the repository

Inspect package manager/scripts, frontend framework and routes, styling/token conventions, screenshot tooling, and reusable components. Choose stack-specific commands only when repository evidence supports them.

2. Establish a reference

For a live URL, capture or document an artifact containing source URL and permission/scope, viewport(s), route/state, seed/login assumptions, baseline screenshot path or capture command, visible-control parity notes, and exclusions (backend/API/auth, personalized data, crawling, third-party widgets).