dream-loop — Claude Code skill: what it does, how to install
Autonomously builds game or app visuals until live screenshots match a target rendering. Useful when high graphical fidelity is required.
npx skills add achimala/dream-loop --skill dream-loop -a claude-codeWhat dream-loop does
The skill triggers when you ask for high visual fidelity or say "dream loop". It works by iteratively matching an in-engine target screenshot down to the pixel. When starting a project from scratch, it generates a target image directly. On existing projects, it captures the current screen first and uses it as the baseline input for the image model, deliberately avoiding stylized concept art.
Execution branches into two mutually exclusive workflows: Plus mode for ChatGPT Plus tier subscriptions and Pro mode for ChatGPT Pro. The agent reads instructions from references/plus-mode/workflow.md or references/pro-mode/workflow.md. All working files stay inside a .dream-loop directory that gets added to .gitignore.
When given a time budget, the agent tracks elapsed time between rounds without lowering visual fidelity to meet the clock. An active image generation tool or API is strictly required; without it, the loop pauses until you provide the target image manually.
What it helps with
- match live application visuals against a target generated render
- generate an in-engine target screenshot from an existing screen baseline
- run an autonomous visual iteration loop within an explicit time budget
- isolate visual scratchpad files inside a gitignored .dream-loop folder
Example prompts for the agent
- Run dream loop on this 3D scene until it matches realistic engine graphics
- Use dream-loop with the Pro workflow and a 1-hour time budget
- Dream loop this game screen, using the current UI as a baseline
How to install dream-loop
1Skills CLI (Vercel)
npx skills add achimala/dream-loop --skill dream-loop -a claude-code2Manually: put the files in place
~/.claude/skills/dream-loop/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/dream-loop/
1Skills CLI (Vercel)
npx skills add achimala/dream-loop --skill dream-loop -a codex2Manually: put the files in place
.agents/skills/dream-loop/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add achimala/dream-loop --skill dream-loop -a cursor2Manually: put the files in place
.cursor/skills/dream-loop/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install achimala/dream-loop dream-loop2Manually: put the files in place
.github/skills/dream-loop/SKILL.md1Skills CLI (Vercel)
npx skills add achimala/dream-loop --skill dream-loop -a gemini-cli2Platform CLI
gemini skills install https://github.com/achimala/dream-loopManually: put the files in place
.devin/skills/dream-loop/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add achimala/dream-loop --skill dream-loop -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about dream-loop
How to install dream-loop in Claude Code?
Run npx skills add achimala/dream-loop --skill dream-loop -a claude-code in your terminal.
What does dream-loop do?
It coordinates an autonomous build loop that continuously aligns application visuals with a high-fidelity reference render stored in .dream-loop/target.png.
What happens if no image generation tool is available?
The skill halts execution and asks you to supply .dream-loop/target.png manually or connect an image generation API.
Source text
SKILL.md · MIT
--- name: dream-loop description: Build a game or app from a description so that a live screenshot matches a generated rendering. Use when the user says "dream loop" or asks for something built to a very high level of graphical fidelity. license: MIT --- # dream-loop This is a process for you to autonomously build extremely impressive visuals, especially for 3D scenes (e.g. in a game or app). Your first step is to determine which workflow to use: - If the user told you to use the Plus or Pro workflow explicitly, that's your answer - If not, check if the user is on a low or high tier coding subscription. "Low tier" means ChatGPT Plus or equivalent. "High tier" means ChatGPT Pro. For low-tier subscriptions, use the Plus workflow. For high-tier, use the Pro workflow. Plus workflow: read [references/plus-mode/workflow.md](references/plus-mode/workflow.md) Pro workflow: read [references/pro-mode/workflow.md](references/pro-mode/workflow.md) Do not read both documents. They are not inter-compatible. # Guidance applicable to both workflows ## General Create and use a `.dream-loop` folder for working context/files, and gitignore it. ## The target image The key piece of Dream Loop is to first create the "dream version" of the user request using image generation, then iterate to build it. If the user supplies this, use that directly. If not, you need to generate it. If you don't have an image generation tool, stop and ask the user to either provide the target image, or connect you to an image generation API. Before generating the image, determine if there is an existing product or if you're starting fresh. If fresh, you can directly generate a new image. If there's an existing product, you should capture a screenshot of the current version of it, then use that as the baseline input to the image model and generate a refined version of it based on the user direction, so that it is an improvement over the original and not a divergence. When generating images, avoid using words like "concept art" in the prompt. This is not an artist's interpretation. It is meant to be an exact, realistic target screenshot. You will try to match it down to the pixel. For example, if the user is asking you to make a game, you should prompt the image model for a real in-engine screenshot of the target. Not a cinematic shot, photo, painting, artist concept, etc. Store the image in `.dream-loop/target.png`. ## Time budget If the user gives a time budget, record the time at start of the loop (after locking target.png), and check the clock between rounds. Don't degrade visual fidelity to hit the time budget. Don't take shortcuts. It's better to hit the time limit with meaningful, beautiful progress than with something roughly complete but ugly. If the user doesn't give a time budget, run until you hit an exit criterion, but warn that this may consume a lot of tokens.
© achimala · MIT · achimala/dream-loop