What problem does it solve? Benchmarking whether a vision-language model can understand and recover a known CSS regression requires a controlled, repeatable harness. This Skill automates that loop: it mutates a fixture's CSS, renders baseline and variant pages, asks a VLM to list the visual changes from the diff, has an LLM emit concrete CSS fixes, and re-measures until the diff converges. ## Core Features & Use Cases - Two-stage repair pipeline: Stage 1 sends the diff overlay to a VLM which produces a structured CHANGE list (selector { prop: from → to }); Stage 2 hands that list plus current CSS to an LLM that emits the actual edits, compensating for VLM imprecision. - Deterministic mutation modes: property mode deletes one CSS property; selector mode deletes a full selector block, with the seed deterministically selecting what is removed. - Multi-provider VLM benchmarking: model selection via VLMKIT_VLM_MODEL with OpenRouter (default), gemini:, and claude: prefixes, while the Stage-2 LLM is held constant for apples-to-apples VLM comparison. - Use Case: Compare ui-tars-1.5-7b against claude-haiku on the canonical hard case (seed 11, selector mode) by running the loop with each model and scoring the CHANGE lists against the known removed block. ## Quick Start Run the fix loop on the page fixture with seed 42 by executing node --experimental-strip-types src/experiments/css-challenge/fix-loop.ts --fixture page --seed 42 after loading your API keys from .env.local.
