# Visual Ralph

Visual Ralph orchestration for frontend UI from generated references, static...

- Repository: https://github.com/Yeachan-Heo/oh-my-codex (33693 stars)
- Category: Design
- License: MIT
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add Yeachan-Heo/oh-my-codex --skill visual-ralph -g -a claude-code -y`
Codex: `npx skills add Yeachan-Heo/oh-my-codex --skill visual-ralph -g -a codex -y`
Cursor: `npx skills add Yeachan-Heo/oh-my-codex --skill visual-ralph -g -a cursor -y`
Gemini CLI: `npx skills add Yeachan-Heo/oh-my-codex --skill visual-ralph -g -a gemini-cli -y`

## Description

Visual Ralph orchestration for frontend UI from generated references, static references, or live URL targets, using $ultragoal with built-in visual verdict and pixel-diff evidence until the implementation matches and leaves a reproducible design system.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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`](../../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).

The rest: https://github.com/Yeachan-Heo/oh-my-codex/blob/HEAD/plugins/oh-my-codex/skills/visual-ralph/SKILL.md