Enforce comprehensive UI/UX best practices for accessible, performant, and delightful interfaces. Use when building components, reviewing UI code, or evaluating user experiences.
Enforces UI/UX best practices for accessible, performant, and delightful interfaces. Use when building components, reviewing UI code, or evaluating user experiences.
/plugin marketplace add Tylerbryy/codewarden/plugin install codewarden@codewarden-marketplaceThis skill is limited to using the following tools:
AGENTS.mdThis skill enforces industry best practices for building accessible, performant, and user-friendly interfaces. Use MUST/SHOULD/NEVER rules to guide decisions across interactions, animation, layout, content, performance, and design.
Activate when:
:focus-visible; group with :focus-within)<input> font-size ≥16px or set:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover">
touch-action: manipulation to prevent double-tap zoom; set -webkit-tap-highlight-color to match design<input>/<textarea><textarea>, ⌘/Ctrl+Enter submits; Enter adds newlineautocomplete + meaningful name; correct type and inputmode+1 (123) 456-7890, sk-012345…)autocomplete="off" unless security-critical; don't trigger password managers for non-auth fields<a>/<Link> for navigation (support Cmd/Ctrl/middle-click)aria-live for toasts/inline validation…) for options that open follow-ups (e.g., "Rename…") and loading states (e.g., "Loading…", "Saving…", "Generating…")overscroll-behavior: contain in modals/drawersinert on dragged element/containersprefers-reduced-motion (provide reduced variant)transform, opacity); avoid layout/repaint props (top/left/width/height)transition: all (explicitly list properties to avoid unintended animations)transform-origin (motion starts where it "physically" should)<g>), not parent <svg> (Safari/Firefox rendering bugs)transform-box: fill-box and transform-origin: center on SVG elements when animatingtranslateZ(0) or will-change: transform if text anti-aliasing artifacts appear during transformsenv(safe-area-inset-*))<title> matches current contextfont-variant-numeric: tabular-nums or a mono like Geist Mono)… (not ...)scroll-margin-top on headings for anchored links; include a "Skip to content" link; hierarchical <h1–h6>aria-label), decorative elements aria-hidden, verify in the Accessibility Treearia-labelbutton, a, label, table) before ARIA10 MB, ⌘ + K, Vercel SDK; use ⁠ for zero-widthAccept-Language header and navigator.languages, NOT IP geolocationPOST/PATCH/DELETE) complete in <500 msvirtua) or use content-visibility: auto<link rel="preconnect"> for asset/CDN domains (with crossorigin when needed)unicode-range:hover/:active/:focus<meta name="theme-color"> to match page backgroundcolor-scheme: dark on <html> in dark themes (ensures proper scrollbar/device UI contrast)background-color and color on <select> to avoid dark mode contrast bugsNote: These guidelines reflect Vercel's style guide and are provided as a reference. Adapt these principles to match your brand voice and design system.
& over "and" in UI textYOUR_API_TOKEN_HERE for strings, 0123456789 for numbers)10 MB)… (not ...)When reviewing or building UI:
Scan the component
Check for violations
aria-label on icon buttonsprefers-reduced-motionVerify patterns
Test responsiveness
Performance checks
This skill works alongside react-next-modern:
Both skills should be active when building or reviewing frontend code.
<input onPaste={(e) => e.preventDefault()} />
<input type="email" autoComplete="email" />
<div onClick={handleClick}>Click me</div>
<button onClick={handleClick}>Click me</button>
<button><TrashIcon /></button>
<button aria-label="Delete item"><TrashIcon /></button>
.element {
animation: slide 300ms ease-out;
}
.element {
animation: slide 300ms ease-out;
}
@media (prefers-reduced-motion: reduce) {
.element {
animation: none;
}
}
<button className="w-4 h-4">×</button>
<button className="w-4 h-4 p-4">×</button>
<div className="text-red-500">Error occurred</div>
<div className="text-red-500">
<AlertIcon aria-hidden="true" />
<span>Error occurred</span>
</div>
.button {
transition: all 300ms ease;
}
.button {
transition: background-color 300ms ease, transform 300ms ease;
}
<input type="password" autoComplete="off" />
<input type="password" autoComplete="current-password" />
<div>Your deployment failed.</div>
<button>Continue</button>
<div>
Your API key is incorrect or expired.
<a href="/settings">Generate a new key</a> in settings.
</div>
<button>Save API Key</button>
<select>
<option>Option 1</option>
</select>
<select className="bg-white dark:bg-gray-900 text-black dark:text-white">
<option>Option 1</option>
</select>
Use these guidelines to build interfaces that are:
This skill should be used when the user asks to "create an agent", "add an agent", "write a subagent", "agent frontmatter", "when to use description", "agent examples", "agent tools", "agent colors", "autonomous agent", or needs guidance on agent structure, system prompts, triggering conditions, or agent development best practices for Claude Code plugins.
This skill should be used when the user asks to "create a slash command", "add a command", "write a custom command", "define command arguments", "use command frontmatter", "organize commands", "create command with file references", "interactive command", "use AskUserQuestion in command", or needs guidance on slash command structure, YAML frontmatter fields, dynamic arguments, bash execution in commands, user interaction patterns, or command development best practices for Claude Code.
This skill should be used when the user asks to "create a hook", "add a PreToolUse/PostToolUse/Stop hook", "validate tool use", "implement prompt-based hooks", "use ${CLAUDE_PLUGIN_ROOT}", "set up event-driven automation", "block dangerous commands", or mentions hook events (PreToolUse, PostToolUse, Stop, SubagentStop, SessionStart, SessionEnd, UserPromptSubmit, PreCompact, Notification). Provides comprehensive guidance for creating and implementing Claude Code plugin hooks with focus on advanced prompt-based hooks API.