skills.rest
vibeforge1111
vibeforge1111COMMUNITY
Explore all skills by this author →
GitHub

codex-visual-builder-guild

Capture multi-viewport screenshots, inspect with vision, and apply targeted UI fixes.

44|6|Updated May 5, 2026
Search Tags:#accessibility#responsive design#design systems#screenshot analysis#ui polish#visual ui qa#vision review
One-click install
npx skills add https://github.com/vibeforge1111/codex-visual-builder-guild --skill codex-visual-builder-guild
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: codex-visual-builder-guild
Source: https://github.com/vibeforge1111/codex-visual-builder-guild/tree/main/codex/codex-visual-builder-guild
Command: npx skills add https://github.com/vibeforge1111/codex-visual-builder-guild --skill codex-visual-builder-guild

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes assets (resource) components.

What problem does it solve?

This Skill helps Codex improve visual UI/UX by running a screenshot-driven design loop that finds real rendered issues (layout, hierarchy, responsiveness, and interaction problems) and turns fixes into reusable design rules.

Core Features & Use Cases

  • Screenshot-based visual QA loop: build, run, capture screenshots across viewports, inspect with vision, and iterate toward a production-ready screen.
  • Responsive and interaction-state discipline: verifies desktop/tablet/mobile plus at least one fluid breakpoint, and targets hover/focus/modal/loading/empty/error coverage when relevant.
  • Specialist-style delegation + ruthless verification: routes issues to appropriate lenses, compares before/after, and performs a “Post-Fix Ruthlessness Check” to prevent false improvements and awkward leftovers.
  • Reusable rules and contracts: outputs reusable design rules and emphasizes regression guarding and art bible/component-system alignment when patterns should become baselines.

Quick Start

Use codex-visual-builder-guild on this app, then screenshot desktop, tablet, mobile, and one awkward in-between width, inspect with Codex App vision, fix the highest-impact visible issue first, and finish with before/after evidence plus a ruthless post-fix check.

Frequently Asked Questions about codex-visual-builder-guild

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I run visual UI QA on screenshots to find responsive layout issues?▼

Visual UI QA on screenshots involves capturing rendered evidence across desktop, tablet, mobile, and fluid breakpoints, then inspecting them with vision to identify and fix responsive layout issues iteratively.

What is a screenshot-driven design loop for polishing web and mobile UI surfaces?▼

A screenshot-driven design loop captures rendered UI evidence, reviews it with vision, delegates narrow visual issues to appropriate lenses, and applies targeted fixes to achieve production-readiness polish for web and mobile surfaces.

How do I verify interaction states like hover, focus, modal, loading, empty, and error in UI screenshots?▼

Verifying interaction states requires capturing screenshots that specifically target hover, focus, modal, loading, empty, and error conditions, then using vision review to validate visual accessibility and interaction-state discipline.

Can I use screenshot analysis to prevent visual regressions and cluttered UI fixes?▼

Screenshot analysis prevents regressions by performing a Post-Fix Ruthlessness Check that compares before and after evidence, validating that targeted fixes do not introduce heavier, cluttered, or regressive UI leftovers.

Does visual UI QA support real-content layout stress testing across multiple viewports?▼

Visual UI QA supports real-content layout stress testing by requiring multi-viewport screenshot coverage, ensuring responsive design holds up under actual content loads across desktop, tablet, mobile, and awkward in-between widths.

What is the best way to turn visual UI fixes into reusable design rules and component baselines?▼

The best way to turn visual fixes into reusable design rules is by documenting patterns discovered during screenshot review, emphasizing regression guarding and art bible alignment to establish component-system baselines.

Related Skills

Explore More Design & Creative Skills→
montoyaedumontoyaedu

visual-review

Capture web page screenshots with Playwright for visual QA evidence.

Community
Intermediate
dnkrowdnkrow
1

asset-spec

Generate per-asset visual specs and AI prompts from art bible rules.

Community
Advanced
zm2231zm2231

prototype-review

Review prototypes, wireframes, and mockups for usability, accessibility, and design consistency.

Community
Advanced
robit-manrobit-man

regression-visual

Compare screenshots and analyze pixel differences across browsers and viewports.

Community
Advanced