Building an AI workflow for a frontend project

A good task contains a goal, boundaries, and a verification method. For UI work, specify the route, supported screen sizes, states, accessibility requirements, and files that must not change. Attach a design or screenshot together with design tokens when available.

Goal: add an article card to the homepage.
Scope: index.html and styles.css only.
States: hover, focus-visible, mobile 360px.
Done when: links work and axe reports no critical issues.

This contract separates requirements from taste and gives the agent a clear stopping point.

Before editing, the agent should find existing patterns: a similar component, tokens, tests, and routing rules. For larger tasks, use a read-only planning stage. A plan takes a minute to review; an incorrect patch across dozens of files takes much longer.

After agreement, work in small vertical slices. This keeps diffs focused and exposes a wrong direction early.

Compilation alone cannot validate frontend work. Open the page, complete the key flow with a keyboard, inspect the console, and capture desktop and mobile views. Dynamic interfaces also need loading, empty, error, and long-content states.

• A screenshot proves composition, not accessibility.
• A DOM snapshot proves structure, not visual rhythm.
• An automated test proves behavior, not the feel of the interface.

Reliable verification combines all three signals.

Before handoff, run formatting, type checks, tests, and the build, then summarize changes and risks. Report concrete commands and outcomes rather than saying “everything works.”

A person reviews the diff and owns architectural decisions. Recurring mistakes should become new entries in AGENTS.md so the project teaches every agent how to work safely.