design-vision-loop SKILL.md skillA

design-vision-loop from nguyenthienthanh/aura-frog is an agent skill: a SKILL.md folder an AI agent loads when a task calls for it.

Install it, pinned
mdr add nguyenthienthanh/aura-frog/design-vision-loop@git:20260728.fc5e06b

Pins git:20260728.fc5e06b in mdr.lock. Pin the fingerprint instead.

Audit grade
A, 17 of 17 checks passed
Kind
SKILL.md skill
Repository
nguyenthienthanh/aura-frog
Path
aura-frog/skills/design-vision-loop/SKILL.md
Versions recorded
2
Latest version
git:20260728.fc5e06b, committed Jul 28, 2026
First version recorded
Jul 17, 2026
Size
5,275 bytes
Repository stars
25
License
MIT

Vision feedback loop for UI — render the running UI, screenshot it across viewports + dark mode, run deterministic gates then a multimodal critique against the design system, and iterate until it passes. Use after building or changing a UI component/page, when asked to 'check the UI', make it 'look right', or verify a build matches a design spec / Stitch screen.

Collected from public GitHub. Every version is saved exactly as it was and never changes. Install it at an exact version with the mdr tool, and every file is checked before it reaches your agent. The main file is checked against the SHA-256 fingerprint recorded here, and the others against the fingerprints GitHub keeps for its source commit. The automatic checks below grade the latest version, and the same checks always give the same file the same grade.

What the file says

> **AI-consumed reference.** This skill *verifies* rendered UI; it does not generate taste (that's
> `frontend-aesthetics`) or enforce statically (that's the `design-conformance` hook +
> `theme-consistency` rule). Close the loop: build → **see** → critique → fix.

# Design Vision Loop

Open-loop text guidance is why "correct" UI still looks off — nobody looked at it. This skill adds the
eyes: **render → screenshot → critique → iterate**, the pattern Anthropic endorses for UI agents
(*Building agents with the Claude Agent SDK*: "visual feedback… can be helpful"; computer-use docs:
"after each step, take a screenshot and carefully evaluate… only when you confirm a step was executed
correctly should you move on").

## Precondition

The UI must be renderable: a running dev server URL/route, or a static HTML artifact. If nothing renders
(component with no harness), say so and either spin up a preview or fall back to static review — don't
pretend to have looked.

## The loop (max 3 iterations by default)

```toon
loop[4]{step,action,tools}:
  1,Render + capture,"navigate → resize each viewport → screenshot; emulate dark mode, screenshot again"
…

Read the whole file at its exact version.

How to install

The exact contents, by fingerprint
mdr add nguyenthienthanh/aura-frog/design-vision-loop@sha256:08d20c8d6b8bce4c

The line at the top of this page pins the label git:20260728.fc5e06b, which is what most people want. This one pins the sha256 fingerprint of the contents instead, so it survives a label being moved. Either way the exact version is written to mdr.lock, and mdr install downloads and checks those contents again, so it installs them exactly or stops with an error.

Badge

mdr badge

[![mdr](https://markdownregistry.com/badge/art_ihmcgo6mu6mh5my2.svg)](https://markdownregistry.com/a/art_ihmcgo6mu6mh5my2)

4 badge image fetches in 30 days. What the badge shows.

Versions

The registry has recorded 2 versions of this file, between Jul 17, 2026 and Jul 28, 2026, about one every 11 days.

versioncommittedcommitsizeaudit
git:20260728.fc5e06b latest2026-07-28 fc5e06b 5,275 BA view · diff
git:20260717.78ac1fc2026-07-17 78ac1fc 4,818 BA view

Audit of the latest version

A  17 of 17 checks passed. Fixed automatic checks with no AI involved, so the same checks give the same answer every run.
  • pass: Frontmatter block present
  • pass: Frontmatter declares a name
  • pass: Frontmatter declares a description
  • pass: Size between 200 bytes and 200 KB (5275 bytes)
  • pass: No zero-width or bidi control characters
  • pass: No instruction hidden inside an HTML comment
  • pass: No link to an exfiltration or paste host
  • pass: No credential-shaped string
  • pass: No instruction to send local credentials anywhere
  • pass: No text hidden with inline styles
  • pass: No prompt-injection phrasing
  • pass: No curl or wget piped into a shell
  • pass: No recursive delete of root, home or parent
  • pass: No instruction to read or print local credentials
  • pass: No base64 blob over 200 characters
  • pass: No link to a raw IP address
  • pass: No script tag

Source

GitHub

nguyenthienthanh/aura-frog · 25 stars · license MIT · pushed 2026-10-01 · branch main

API

GET https://markdownregistry.com/api/v1/artifacts/art_ihmcgo6mu6mh5my2
GET https://markdownregistry.com/api/v1/resolve?ref=nguyenthienthanh/aura-frog/design-vision-loop
GET https://markdownregistry.com/api/v1/blob/08d20c8d6b8bce4c35e9182a5da5bf9ab288706c6f141a9504693e0a29019240

Your AI assistant does the legwork. You hear about the deals worth your word. Hand yours the standing instructions at modelranch.com and it joins the network that reads files like this one.

Guides: the SKILL.md format and its required fields · what to check before you install a skill · how to pin a skill to an exact version · where to find agent skills · keeping a team on the same skills · which agent file does what.

More from nguyenthienthanh/aura-frog

CLAUDE.md@aura-frog CLAUDE.md file
nguyenthienthanh/aura-frog · aura-frog/CLAUDE.md
git:20261001.e86bd63 · audit A · 25 stars
agent-detector SKILL.md skill
nguyenthienthanh/aura-frog · aura-frog/skills/agent-detector/SKILL.md · CRITICAL: MUST run for EVERY message. Detects agent, complexity, AND model automatically. Without this, tasks route to…
git:20260812.7cc066c · audit A · 25 stars
api-designer SKILL.md skill
nguyenthienthanh/aura-frog · aura-frog/skills/api-designer/SKILL.md · Designs RESTful APIs with endpoint naming, versioning strategies (URL path, header-based), pagination (offset and…
git:20260515.6be9f59 · audit A · 25 stars
bugfix-quick SKILL.md skill
nguyenthienthanh/aura-frog · aura-frog/skills/bugfix-quick/SKILL.md · Fast bug fixes with root cause investigation + TDD. Enforces 'no fix without root cause' discipline and verification…
git:20260515.6be9f59 · audit A · 25 stars
chain-of-verification SKILL.md skill
nguyenthienthanh/aura-frog · aura-frog/skills/chain-of-verification/SKILL.md · Draft → generate verification questions → answer independently via tools → revise. Catches hallucinated facts in…
git:20260924.947d255 · audit A · 25 stars
code-reviewer SKILL.md skill
nguyenthienthanh/aura-frog · aura-frog/skills/code-reviewer/SKILL.md · 8-aspect evidence-based code review/audit (security, correctness, compatibility, architecture, error handling, test…
git:20260924.947d255 · audit A · 25 stars
code-simplifier SKILL.md skill
nguyenthienthanh/aura-frog · aura-frog/skills/code-simplifier/SKILL.md · Detect and simplify overly complex code. Apply KISS principle - less is more.
git:20260515.6be9f59 · audit A · 25 stars
conflict-detector SKILL.md skill
nguyenthienthanh/aura-frog · aura-frog/skills/conflict-detector/SKILL.md · L1-L4 conflict detection between a proposed T4 task and pending-confirm sibling tasks. L1 (file overlap) + L2…
git:20260515.6be9f59 · audit A · 25 stars
deep-debugging SKILL.md skill
nguyenthienthanh/aura-frog · aura-frog/skills/deep-debugging/SKILL.md · Systematic debugging protocol for bugs that resist quick fixes. Use bisection, hypothesis trees, and scientific method…
git:20260515.6be9f59 · audit A · 25 stars
design-expert SKILL.md skill
nguyenthienthanh/aura-frog · aura-frog/skills/design-expert/SKILL.md · UI/UX design expertise — component design, design system selection, responsive layout. Includes auto-detection from…
git:20260717.c6df55c · audit A · 25 stars
design-tokens SKILL.md skill
nguyenthienthanh/aura-frog · aura-frog/skills/design-tokens/SKILL.md · Generate a cohesive color-token system from ONE OKLCH brand hue — primary/secondary/background/foreground/muted/border…
git:20260717.c6df55c · audit A · 25 stars
documentation SKILL.md skill
nguyenthienthanh/aura-frog · aura-frog/skills/documentation/SKILL.md · Create Runbooks for operational documentation. For ADRs, tech specs, requirements, LLD and technical analysis use the…
git:20260824.41a90bf · audit A · 25 stars

Every file in nguyenthienthanh/aura-frog

Browse by kind, by grade A, or by owner.