web-interface-guidelines
Web Interface Guidelines
Concise rules for building accessible, fast, delightful UIs. Use MUST/SHOULD/NEVER to guide decisions and reviews.
How to apply
- Prioritize MUST items first; NEVER items are hard constraints.
- When reviewing, scan each section and confirm every MUST is satisfied or consciously justified.
- If a guideline conflicts with product requirements, surface the conflict explicitly.
Quick reference
| Area | Top MUST checks |
|---|---|
| Keyboard | Full keyboard support per WAI-ARIA APG; visible focus rings; manage focus (trap/move/return) |
| Forms | No paste blocking; loading buttons keep label + spinner; inline errors + focus first error |
| Navigation | URL reflects state; links are links; back/forward restores scroll |
| Motion | Respect prefers-reduced-motion; animate transform/opacity only; animations interruptible |
| Layout | Respect safe areas; avoid unwanted scrollbars; verify mobile/laptop/ultra-wide |
More from dereknex/skills
web-guidelines
Use when designing, reviewing, or implementing web UIs and you need concrete MUST/SHOULD/NEVER rules for accessibility, interaction patterns, forms, layout, animation, performance, content, or visual design decisions. Also use when asked to "review my UI", "check accessibility", or "audit design".
11seo-optimizer
Use when optimizing website content, improving search rankings, conducting keyword research, or implementing technical SEO best practices.
8animation-designer
Use when the user explicitly requests animations, transitions, or motion design for a web UI.
6frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications. Generates creative, polished code that avoids generic AI aesthetics.
6seo
SEO auditing, optimization, and implementation. Use when auditing sites for SEO issues, optimizing content for search, conducting keyword research, implementing technical SEO, or improving organic search performance. For automated crawl-based audits with 230+ rules, use audit-website instead.
5ux-design-tips
Use when asked for UX strategy or behavior guidance on landing pages, onboarding, pricing, CTAs, social proof, personalization, login, permissions, or brand memorability.
5