SkillsAdd

smithery/jshmllr

interface-guidelines

Accessibility and interaction rules for building UIs. Use when building forms, buttons, navigation, animations, or any interactive elements.

Installation

$ npx skills add smithery/jshmllr --skill interface-guidelines
View on skills.sh ↗ Website ↗

Similar popular skills

Related neighbors and high-traction skills in the same topics — useful to compare before installing.

frontend-design Same topic
anthropics/skills

Guidance for distinctive, intentional visual design when building new UI or reshaping an existi…

866.4K installs
agent-browser Same topic
vercel-labs/agent-browser

Browser automation CLI for AI agents. Use when the user needs to interact with websites, includ…

810.4K installs
vercel-react-best-practices Same topic
vercel-labs/agent-skills 697.8K installs
web-design-guidelines Same topic
vercel-labs/agent-skills

Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "chec…

617.3K installs
microsoft-foundry Same topic
microsoft/azure-skills

Build, deploy, evaluate, optimize, fine-tune, and manage Microsoft Foundry agents, models, and …

576.5K installs
azure-diagnostics Same topic
microsoft/azure-skills

Debug Azure production issues on Azure using AppLens, Azure Monitor, resource health, and safe …

568.9K installs

Also in this package

Other skills from smithery/jshmllr.

npx skills add smithery/jshmllr
ui-finesse-workflow 0 design-polish 0

Browse all from smithery/jshmllr

More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Not declared
Cursor Not declared
Codex Not declared
GitHub Copilot Not declared
Windsurf Not declared
Gemini CLI Not declared
Cline Not declared
OpenCode Not declared

Package contents

Files included with this skill beyond the listing page.

  • skill md SKILL.md 3,447 B
  • docs SUMMARY.md 168 B

History

  1. First recorded snapshot · 0 installs

SKILL.md

Interface Guidelines

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 focus rings (:focus-visible)
  • MUST: Manage focus (trap, move, return) per APG patterns
  • NEVER: outline: none without visible focus replacement

Targets & Input

  • MUST: Hit target ≥24px (mobile ≥44px)
  • MUST: Mobile <input> font-size ≥16px to prevent iOS zoom
  • NEVER: Disable browser zoom
  • MUST: touch-action: manipulation to prevent double-tap zoom

Forms

  • MUST: Hydration-safe inputs (no lost focus/value)
  • NEVER: Block paste in inputs
  • MUST: Loading buttons show spinner and keep original label
  • MUST: Enter submits focused input; in textarea, ⌘/Ctrl+Enter submits
  • MUST: Errors inline next to fields; on submit, focus first error
  • MUST: autocomplete + meaningful name; correct type and inputmode
  • MUST: Compatible with password managers & 2FA

State & Navigation

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

Feedback

  • SHOULD: Optimistic UI; reconcile on response
  • MUST: Confirm destructive actions or provide Undo
  • MUST: Use polite aria-live for toasts/inline validation

Animation

  • MUST: Honor prefers-reduced-motion
  • MUST: Animate compositor-friendly props (transform, opacity) only
  • NEVER: Animate layout props (top, left, width, height)
  • NEVER: transition: all—list properties explicitly
  • SHOULD: Use ease-out-quart/quint/expo for natural deceleration
  • MUST: Animations interruptible and input-driven

Layout

  • SHOULD: Optical alignment; adjust ±1px when perception beats geometry
  • MUST: Verify mobile, laptop, ultra-wide
  • MUST: Respect safe areas (env(safe-area-inset-*))
  • MUST: Avoid unwanted scrollbars

Content & Accessibility

  • MUST: Skeletons mirror final content to avoid layout shift
  • MUST: <title> matches current context
  • MUST: No dead ends; always offer next step/recovery
  • MUST: Design empty/sparse/dense/error states
  • MUST: font-variant-numeric: tabular-nums for number comparisons
  • MUST: Redundant status cues (not color-only)
  • MUST: Icon-only buttons have descriptive aria-label
  • MUST: Prefer native semantics before ARIA

Performance

  • MUST: Track and minimize re-renders
  • MUST: Mutations target <500ms
  • MUST: Virtualize large lists (>50 items)
  • MUST: Preload above-fold images; lazy-load the rest
  • MUST: Prevent CLS (explicit image dimensions)

Dark Mode & Theming

  • MUST: color-scheme: dark on <html> for dark themes
  • SHOULD: <meta name="theme-color"> matches page background
  • MUST: Native <select>: explicit background-color and color

Design

  • SHOULD: Layered shadows (ambient + direct)
  • SHOULD: Crisp edges via semi-transparent borders + shadows
  • SHOULD: Nested radii: child ≤ parent; concentric
  • SHOULD: Tint borders/shadows/text toward bg hue
  • MUST: Meet contrast—prefer APCA over WCAG 2
  • MUST: Increase contrast on hover/active/focus