Converted and distributed by TomeVault — claim your Tome and manage your conversions.
1---2name: adilkalam-orca-web-interface-guidelines3description: Web Interface Guidelines4---56# Web Interface Guidelines78## 1. Interactions9- All flows keyboard-operable (WAI-ARIA); visible focus via `:focus-visible`10- Tap targets >= 24px (44px mobile); `touch-action: manipulation`11- Links = `<a>`, actions = `<button>`. Never `<div>` for either12- `aria-live` for async updates1314## 2. Forms15- Enter submits single-input forms; Cmd+Enter for textareas16- Every control has `<label>`; clicking label focuses control17- Allow all input then validate -- never block keystrokes18- Don't pre-disable submit; show errors on attempt19- Errors adjacent to field; focus first error on submit20- Set `autocomplete`, correct `type`/`inputmode`, meaningful `name`21- `spellcheck="false"` for emails/codes/usernames22- Placeholders show format examples, not labels23- Support password managers and 2FA autofill24- Warn before navigation if unsaved data2526## 3. Loading and Feedback27- Loading indicator preserves original label text28- Show-delay 150-300ms + min-visible 300-500ms to prevent flicker29- Undo or error messaging on failed optimistic updates30- Menu items opening follow-up end with ellipsis3132## 4. Animations33- Respect `prefers-reduced-motion`34- CSS transitions over JS; animate only for cause/effect or delight35- Never `transition: all` -- list specific properties36- Interruptible by user input37- GPU properties (`transform`, `opacity`); avoid reflow (`width`, `height`, `top`, `left`)38- SVG: transforms on `<g>` wrappers with `transform-box: fill-box`3940## 5. Layout41- Optical alignment +-1px when perception beats geometry42- Every element aligned to grid/baseline/edge/center43- Verify on 375px, 1440px, 1920px+44- Safe areas via `env(safe-area-inset-*)`45- Avoid excess scrollbars; use flexbox/grid4647## 6. Content48- Inline explanations over tooltips49- Skeletons mirror final layout exactly50- `<title>` reflects current context51- Design all states: empty, sparse, dense, error, loading52- Recovery paths on every error screen53- Curly quotes, ellipsis character (not three periods)54- `font-variant-numeric: tabular-nums` for number columns55- `scroll-margin-top` for anchored headings56- Non-breaking spaces for units ("10 MB")5758## 7. Performance59- Virtualize large lists (`content-visibility: auto`)60- Preload above-fold images; lazy-load rest61- Explicit `width`/`height` on images (CLS)62- `<link rel="preconnect">` to CDN origins63- Preload critical fonts with `unicode-range` subsetting64- Web Workers for expensive computation65- POST/PATCH/DELETE under 500ms6667## 8. Accessibility68- Accurate `aria-label` matching visible text69- `aria-hidden="true"` on decorative elements70- Icon-only buttons need descriptive labels71- Native HTML semantics over ARIA roles72- Hierarchical h1-h6; skip-to-content links73- Never rely on color alone; add text/icons74- Format dates/times/numbers per locale75- Language from `Accept-Language`, not IP/GPS7677## 9. Design78- Layered shadows (ambient + direct, 2+ layers)79- Solid + semi-transparent borders for edge clarity80- Child border-radius <= parent minus padding81- Tint borders/shadows/text toward consistent hue on colored backgrounds82- APCA over WCAG 2 for contrast; increase contrast on interactive states83- `<meta name="theme-color">` matching page background84- `color-scheme: dark` on `<html>` in dark themes8586---87> Converted and distributed by [TomeVault](https://tomevault.io/claim/adilkalam) — claim your Tome and manage your conversions.88<!-- tomevault:4.0:skill_md:2026-04-13 -->
Run npx skillmds@latest add tomevault-io/adilkalam-orca-web-interface-guidelines in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.
Web Interface Guidelines It is listed under Coding & Dev Tools on SkillMD.
This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.
Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
tomevault-io (@tomevault-io) published this skill. Their other Agent Skills are listed on their SkillMD profile.
tomevault-io