web-design-guidelines
Review the starter's web UI for clear states, keyboard access, responsive layout, readable tables, and accessible forms.
Files1
View on GitHubSKILL.mdskills/web-design-guidelines/SKILL.md
GitHubInterface review for this starter
This file is original project guidance. The broader upstream guidance is available at vercel-labs/agent-skills; it is linked rather than redistributed here.
For UI changes, review the actual page at narrow and wide viewport sizes and check these points:
- Every input has a visible label and a useful error message. Keyboard users can reach and operate upload, selection, token, and run controls.
- Focus remains visible. Disabled and pending states explain what the user should expect next.
- Transaction status is communicated in text, with color as a secondary cue. Screen readers receive updated status without excessive announcements.
- Tables retain understandable headings and cell associations. On a small screen, users can still find descriptions, amounts, decisions, and progress.
- Empty, loading, retry, error, review, and completion states are distinct. Avoid hiding a failed stream or uncertain classification.
- Run
bun run lint:designand verify the page in a browser after significant visual changes.
Standards reference: WCAG 2.2.