adilkalam/web-interface-guidelines
skills/web-interface-guidelines/SKILL.md
Web UI quality rules: interactions, forms, loading, animations, layout, content, performance, accessibility, design. Apply to all web UI work. Adapted from Vercel Design Guidelines.
$ install --global
skillsauthnpx skillsauth add adilkalam/orca web-interface-guidelinesInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Mar 30, 2026, 4:42 PM52.9s1 file scanned
SKILL.md
- name:
- web-interface-guidelines
- description:
- >
- Web UI quality rules:
- interactions, forms, loading, animations, layout,
Web Interface Guidelines
1. Interactions
- All flows keyboard-operable (WAI-ARIA); visible focus via
:focus-visible - Tap targets >= 24px (44px mobile);
touch-action: manipulation - Links =
<a>, actions =<button>. Never<div>for either aria-livefor async updates
2. Forms
- Enter submits single-input forms; Cmd+Enter for textareas
- Every control has
<label>; clicking label focuses control - Allow all input then validate -- never block keystrokes
- Don't pre-disable submit; show errors on attempt
- Errors adjacent to field; focus first error on submit
- Set
autocomplete, correcttype/inputmode, meaningfulname spellcheck="false"for emails/codes/usernames- Placeholders show format examples, not labels
- Support password managers and 2FA autofill
- Warn before navigation if unsaved data
3. Loading and Feedback
- Loading indicator preserves original label text
- Show-delay 150-300ms + min-visible 300-500ms to prevent flicker
- Undo or error messaging on failed optimistic updates
- Menu items opening follow-up end with ellipsis
4. Animations
- Respect
prefers-reduced-motion - CSS transitions over JS; animate only for cause/effect or delight
- Never
transition: all-- list specific properties - Interruptible by user input
- GPU properties (
transform,opacity); avoid reflow (width,height,top,left) - SVG: transforms on
<g>wrappers withtransform-box: fill-box
5. Layout
- Optical alignment +-1px when perception beats geometry
- Every element aligned to grid/baseline/edge/center
- Verify on 375px, 1440px, 1920px+
- Safe areas via
env(safe-area-inset-*) - Avoid excess scrollbars; use flexbox/grid
6. Content
- Inline explanations over tooltips
- Skeletons mirror final layout exactly
<title>reflects current context- Design all states: empty, sparse, dense, error, loading
- Recovery paths on every error screen
- Curly quotes, ellipsis character (not three periods)
font-variant-numeric: tabular-numsfor number columnsscroll-margin-topfor anchored headings- Non-breaking spaces for units ("10 MB")
7. Performance
- Virtualize large lists (
content-visibility: auto) - Preload above-fold images; lazy-load rest
- Explicit
width/heighton images (CLS) <link rel="preconnect">to CDN origins- Preload critical fonts with
unicode-rangesubsetting - Web Workers for expensive computation
- POST/PATCH/DELETE under 500ms
8. Accessibility
- Accurate
aria-labelmatching visible text aria-hidden="true"on decorative elements- Icon-only buttons need descriptive labels
- Native HTML semantics over ARIA roles
- Hierarchical h1-h6; skip-to-content links
- Never rely on color alone; add text/icons
- Format dates/times/numbers per locale
- Language from
Accept-Language, not IP/GPS
9. Design
- Layered shadows (ambient + direct, 2+ layers)
- Solid + semi-transparent borders for edge clarity
- Child border-radius <= parent minus padding
- Tint borders/shadows/text toward consistent hue on colored backgrounds
- APCA over WCAG 2 for contrast; increase contrast on interactive states
<meta name="theme-color">matching page backgroundcolor-scheme: darkon<html>in dark themes
Related Skills
adilkalam/youtube-transcript
content-media
VerifiedTrustedCommunity
Download YouTube video transcripts when user provides a YouTube URL or asks to download/get/fetch a transcript from YouTube. Also use when user wants to transcribe or get captions/subtitles from a YouTube video.
2SKILL.mdUpdated Mar 27, 2026
adilkalam/using-loaded-knowledge
testing
VerifiedTrustedCommunity
MANDATORY protocol enforcing knowledge check before EVERY response - prevents explaining systems without reading docs, claiming without verification, and ignoring auto-loaded context
2SKILL.mdUpdated Mar 27, 2026
adilkalam/ui-typography-spacing
testing
VerifiedTrustedCommunity
Typography hierarchy and spacing scale fallbacks. Yields to project design-dna when present.
2SKILL.mdUpdated Mar 27, 2026
adilkalam/ui-page-standards
development
VerifiedTrustedCommunity
New page checklist: metadata, loading/error states, component states, form completeness, mobile-first, SEO, API routes. Use when creating or auditing Next.js pages.
2SKILL.mdUpdated Mar 27, 2026