web-interface-guidelines AGENTS.md

Accessibility and interaction rules for web interfaces, covering keyboard use, focus, touch targets, forms, loading states, and navigation.

In plain words
What is it for?
Use them when building or reviewing web forms, buttons, focus behavior, responsive layouts, validation, submission states, and navigation.
Why use it?
They reduce common usability problems that can make an interface difficult to use with a keyboard, on a phone, or with assistive technology.

Instructions file for CodexOpenCode

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

agentmods
npx agentmods add instructions/vercel-labs/web-interface-guidelines/agents-md
Clone the repo
git clone --depth 1 https://github.com/vercel-labs/web-interface-guidelines

Made for: Codex, OpenCode.

Per session 1,887 This file is loaded in full into every session.
When invoked 1,887 The same file — it is already loaded in full.
Security scan A 0 findings. Scan, not verified.
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5 $0.01887 $0.01887
Opus 5 $0.00944 $0.00944
Sonnet 5 $0.00377 $0.00377
Haiku 4.5 $0.00189 $0.00189

Measured 2d ago against content hash 113bce3da621, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

web-interface-guidelines AGENTS.md scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 2d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

AGENTS.md · 156 lines

How it starts

The opening of the file, as written. The whole thing — 156 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Concise rules for building accessible, fast, delightful UIs. Use MUST/SHOULD/NEVER to guide decisions.

Interactions

Keyboard

  • MUST: Full keyboard support per WAI-ARIA APG
  • MUST: Visible, unobscured focus rings (:focus-visible; group with :focus-within); sticky/fixed elements never cover focus
  • MUST: Manage focus (trap, move, return) per APG patterns
  • NEVER: outline: none without visible focus replacement

Targets & Input

  • MUST: Hit target ≥24px (mobile ≥44px); if visual <24px, expand hit area
  • MUST: Mobile <input> font-size ≥16px to prevent iOS zoom
  • NEVER: Disable browser zoom (user-scalable=no, maximum-scale=1)
  • MUST: touch-action: manipulation to prevent double-tap zoom
  • SHOULD: Set -webkit-tap-highlight-color to match design

Forms

  • MUST: Hydration-safe inputs (no lost focus/value)
  • NEVER: Block paste in <input>/<textarea>
  • MUST: Loading buttons show spinner and keep original label
  • MUST: Enter submits focused input; in <textarea>, ⌘/Ctrl+Enter submits
  • MUST: Keep submit enabled until request starts; then disable with spinner
  • MUST: Accept free text, validate after—don't block typing
  • MUST: Allow incomplete form submission to surface validation
  • MUST: Errors inline next to fields; on submit, focus first error
  • MUST: autocomplete + meaningful name; correct type and inputmode
  • SHOULD: Disable spellcheck for emails/codes/usernames
  • SHOULD: Placeholders end with and show example pattern
  • MUST: Warn on unsaved changes before navigation
  • MUST: Compatible with password managers & 2FA; allow pasting codes
  • MUST: Trim values to handle text expansion trailing spaces
  • MUST: No dead zones on checkboxes/radios; label+control share one hit target

State & Navigation

  • MUST: URL reflects state (deep-link filters/tabs/pagination/expanded panels)
  • MUST: Back/Forward restores scroll position
  • MUST: Links use <a>/<Link> for navigation (support Cmd/Ctrl/middle-click)
  • NEVER: Use <div onClick> for navigation

Read the full file on GitHub · 156 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 2d ago First seen · 156 lines · 1,887 tokens per session scan A 113bce3da621

Subscribe to this mod's changes

web-interface-guidelines AGENTS.md is an instructions file published in the GitHub repository vercel-labs/web-interface-guidelines (834 stars, last pushed 15d ago), licensed MIT. It adds 1,887 tokens to every session, about $0.0094 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.

Related

Other instructions, from other repositories

gradio AGENTS.md

AGENTS.md instructions for gradio-app/gradio, covering agents.md, repository structure, pull request rules, code style and agentic contribution policy.

gradio-app/gradio · 821 tokens

ui-components AGENTS.md

Instructions for starc007/ui-components, covering beui v2 — agent guide, commands, layout, component catalog and components (motion category — primitives).

starc007/ui-components · 6,500 tokens

unity-ui-toolkit-design-system AGENTS.md

Instructions for sinanata/unity-ui-toolkit-design-system, covering agents.md, what this project is, golden rules (do not violate), use the design system in your project and repository layout.

sinanata/unity-ui-toolkit-design-system · 3,290 tokens

oh-my-design CLAUDE.md

Instructions for kwakseongjae/oh-my-design, a project described as: Give your AI coding agent a design system. One command installs 400+ quality-graded company DESIGN.md references + skills into Claude Code, Codex, Cursor, and OpenCode. Free, MIT, zero AI calls.

kwakseongjae/oh-my-design · 152 tokens

unity-ui-toolkit-design-system copilot-instructions.md

Instructions for sinanata/unity-ui-toolkit-design-system: This repository follows the cross-tool AGENTS.md standard. Read /AGENTS.md for the full guide: the ds- class naming, the token rules, the load-bearing USS import order, build and preview commands, and the pull-request checklist.

sinanata/unity-ui-toolkit-design-system · 258 tokens

gpui-toolkit AGENTS.md

Instructions for pierreaubert/gpui-toolkit, covering gpui toolkit - agent's guide, forms, keyboard management, mouse management and common patterns.

pierreaubert/gpui-toolkit · 2,182 tokens