Design Visual Frontend

design-visual-frontend is an Agent Skill for designing, implementing, redesigning, and reviewing frontend interfaces. It helps coding agents move beyond generic template styling by making them reason about the product's real subject, user task, composition, responsive behavior, content truth, accessibility, and rendered visual evidence.

The Skill can be used with Codex, Claude Code, and other tools that support the open SKILL.md-based Agent Skills format.

What It Does

• Classifies the interface as task-led, command-led, inspection-led, narrative-led, reading-led, or conversion-led.
• Defines the visual hierarchy before implementation through a compact decision sheet.
• Grounds the design in real product content, workflows, assets, and domain conventions.
• Prevents common AI-generated UI patterns such as empty split screens, decorative card grids, fake metrics, oversized headings, and stacked visual effects.
• Establishes reusable rules for typography, color roles, spacing, surfaces, controls, states, and motion.
• Requires explicit mobile, tablet, desktop, wide, and ultra-wide behavior.
• Reviews accessibility, loading/error/empty states, keyboard focus, touch targets, reduced motion, and engineering integrity.
• Uses browser screenshots and interaction checks when browser tooling is available, while clearly reporting when visual verification was not possible.

When To Use It

Use this Skill for:

• websites and landing pages;
• login, signup, checkout, booking, search, and form flows;
• dashboards, admin tools, monitors, editors, and operational consoles;
• product pages, portfolios, publications, and content-heavy experiences;
• frontend redesigns and anti-template visual improvements;
• visual UI reviews that need concrete, evidence-based findings;
• responsive implementation and browser-based quality verification.

How It Works

The repository is not a component library or a fixed visual theme. It is a structured reasoning system for an AI coding agent.

1. SKILL.md defines when the Skill should activate and the workflow the agent must follow.
2. The agent inspects the request, codebase, stack, assets, and available browser tools.
3. It identifies the dominant surface archetype and the interface's true protagonist.
4. It creates a compact design decision sheet covering hierarchy, cont