csh/playbook
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

📦 deps(thirdparty): update snapshots

Browse Source
This commit is contained in:
ci[bot]
2026-08-14 17:16:04 +08:00
parent ad5eeaaf5b
commit 14e7209e78
283 changed files with 201717 additions and 13469 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui-ux-pro-max/cli/assets/data/ux-guidelines.csv
+30 -10
View File
@@ -6,27 +6,27 @@ No,Category,Issue,Platform,Description,Do,Don't,Code Example Good,Code Example B
5,Navigation,Deep Linking,All,URLs should reflect current state for sharing,Update URL on state/view changes,Static URLs for dynamic content,Use query params or hash,Single URL for all states,Medium
6,Navigation,Breadcrumbs,Web,Show user location in site hierarchy,Use for sites with 3+ levels of depth,Use for flat single-level sites,Home > Category > Product,Only on deep nested pages,Low
7,Animation,Excessive Motion,All,Too many animations cause distraction and motion sickness,Animate 1-2 key elements per view maximum,Animate everything that moves,Single hero animation,animate-bounce on 5+ elements,High
8,Animation,Duration Timing,All,Animations should feel responsive not sluggish,Use 150-300ms for micro-interactions,Use animations longer than 500ms for UI,transition-all duration-200,duration-1000,Medium
8,Animation,Duration Timing,All,Motion duration depends on distance complexity platform and user context,Use shared motion tokens and test that feedback stays responsive,Present 150-300ms or any cutoff as a universal requirement,transition-colors duration-200,One duration copied to every transition,Medium
9,Animation,Reduced Motion,All,Respect user's motion preferences,Check prefers-reduced-motion media query,Ignore accessibility motion settings,@media (prefers-reduced-motion: reduce),No motion query check,High
10,Animation,Loading States,All,Show feedback during async operations,Use skeleton screens or spinners,Leave UI frozen with no feedback,animate-pulse skeleton,Blank screen while loading,High
11,Animation,Hover vs Tap,All,Hover effects don't work on touch devices,Use click/tap for primary interactions,Rely only on hover for important actions,onClick handler,onMouseEnter only,High
12,Animation,Continuous Animation,All,Infinite animations are distracting,Use for loading indicators only,Use for decorative elements,animate-spin on loader,animate-bounce on icons,Medium
13,Animation,Transform Performance,Web,Some CSS properties trigger expensive repaints,Use transform and opacity for animations,Animate width/height/top/left properties,transform: translateY(),top: 10px animation,Medium
14,Animation,Easing Functions,All,Linear motion feels robotic,Use ease-out for entering ease-in for exiting,Use linear for UI transitions,ease-out,linear,Low
14,Animation,Easing Functions,All,Easing should match how an element changes speed and purpose,Use deceleration when arriving acceleration when leaving and linear for constant-rate progress,Reject linear easing even for steady rotation or progress,ease-out for entry; linear for spinner,ease-in-out for every motion,Low
15,Layout,Z-Index Management,Web,Stacking context conflicts cause hidden elements,Define z-index scale system (10 20 30 50),Use arbitrary large z-index values,z-10 z-20 z-50,z-[9999],High
16,Layout,Overflow Hidden,Web,Hidden overflow can clip important content,Test all content fits within containers,Blindly apply overflow-hidden,overflow-auto with scroll,overflow-hidden truncating content,Medium
17,Layout,Fixed Positioning,Web,Fixed elements can overlap or be inaccessible,Account for safe areas and other fixed elements,Stack multiple fixed elements carelessly,Fixed nav + fixed bottom with gap,Multiple overlapping fixed elements,Medium
18,Layout,Stacking Context,Web,New stacking contexts reset z-index,Understand what creates new stacking context,Expect z-index to work across contexts,Parent with z-index isolates children,z-index: 9999 not working,Medium
19,Layout,Content Jumping,Web,Layout shift when content loads is jarring,Reserve space for async content,Let images/content push layout around,aspect-ratio or fixed height,No dimensions on images,High
19,Layout,Content Jumping,Web,Images badges validation text and skeleton replacements can shift nearby content when they update,Reserve appropriate space or keep async states in a stable content-driven container,Insert compact text or media without a layout strategy,aspect-ratio for media; stable count slot for badges,Badge insertion pushes toolbar actions,High
20,Layout,Viewport Units,Web,100vh can be problematic on mobile browsers,Use dvh or account for mobile browser chrome,Use 100vh for full-screen mobile layouts,min-h-dvh or min-h-screen,h-screen on mobile,Medium
21,Layout,Container Width,Web,Content too wide is hard to read,Limit max-width for text content (65-75ch),Let text span full viewport width,max-w-prose or max-w-3xl,Full width paragraphs,Medium
22,Touch,Touch Target Size,Mobile,Small buttons are hard to tap accurately,Minimum 44x44px touch targets,Tiny clickable areas,min-h-[44px] min-w-[44px],w-6 h-6 buttons,High
22,Touch,Touch Target Size,Mobile,Touch target guidance depends on platform and web context,Use 44pt on iOS and 48dp on Android; for web use the separate WCAG Target Size rule,Treat one unit or minimum as universal across platforms,iOS 44pt; Android 48dp; Web 24 CSS px plus WCAG exceptions,w-6 h-6 buttons,High
23,Touch,Touch Spacing,Mobile,Adjacent touch targets need adequate spacing,Minimum 8px gap between touch targets,Tightly packed clickable elements,gap-2 between buttons,gap-0 or gap-1,Medium
24,Touch,Gesture Conflicts,Mobile,Custom gestures can conflict with system,Avoid horizontal swipe on main content,Override system gestures,Vertical scroll primary,Horizontal swipe carousel only,Medium
25,Touch,Tap Delay,Mobile,300ms tap delay feels laggy,Use touch-action CSS or fastclick,Default mobile tap handling,touch-action: manipulation,No touch optimization,Medium
26,Touch,Pull to Refresh,Mobile,Accidental refresh is frustrating,Disable where not needed,Enable by default everywhere,overscroll-behavior: contain,Default overscroll,Low
27,Touch,Haptic Feedback,Mobile,Tactile feedback improves interaction feel,Use for confirmations and important actions,Overuse vibration feedback,navigator.vibrate(10),Vibrate on every tap,Low
28,Interaction,Focus States,All,Keyboard users need visible focus indicators,Use visible focus rings on interactive elements,Remove focus outline without replacement,focus:ring-2 focus:ring-blue-500,outline-none without alternative,High
28,Interaction,Focus States,All,"Keyboard focus, including controls inside a modal, needs a visible indicator","Use a visible focus ring on every interactive control, including modal controls",Remove focus outline without replacement,focus:ring-2 focus:ring-blue-500,outline-none without alternative,High
29,Interaction,Hover States,Web,Visual feedback on interactive elements,Change cursor and add subtle visual change,No hover feedback on clickable elements,hover:bg-gray-100 cursor-pointer,No hover style,Medium
30,Interaction,Active States,All,Show immediate feedback on press/click,Add pressed/active state visual change,No feedback during interaction,active:scale-95,No active state,Medium
31,Interaction,Disabled States,All,Clearly indicate non-interactive elements,Reduce opacity and change cursor,Confuse disabled with normal state,opacity-50 cursor-not-allowed,Same style as enabled,Medium
@@ -39,7 +39,7 @@ No,Category,Issue,Platform,Description,Do,Don't,Code Example Good,Code Example B
38,Accessibility,Alt Text,All,Images need text alternatives,Descriptive alt text for meaningful images,Empty or missing alt attributes,alt='Dog playing in park',alt='' for content images,High
39,Accessibility,Heading Hierarchy,Web,Screen readers use headings for navigation,Use sequential heading levels h1-h6,Skip heading levels or misuse for styling,h1 then h2 then h3,h1 then h4,Medium
40,Accessibility,ARIA Labels,All,Interactive elements need accessible names,Add aria-label for icon-only buttons,Icon buttons without labels,aria-label='Close menu',<button><Icon/></button>,High
41,Accessibility,Keyboard Navigation,Web,All functionality accessible via keyboard,Tab order matches visual order,Keyboard traps or illogical tab order,tabIndex for custom order,Unreachable elements,High
41,Accessibility,Keyboard Navigation,Web,Web users need complete keyboard navigation with visible focus on every operable control,Keep tab order aligned with visual order and test every action without a pointer,Keyboard traps or illogical tab order,tabIndex for custom order,Unreachable elements,High
42,Accessibility,Screen Reader,All,Content should make sense when read aloud,Use semantic HTML and ARIA properly,Div soup with no semantics,<nav> <main> <article>,<div> for everything,Medium
43,Accessibility,Form Labels,All,Inputs must have associated labels,Use label with for attribute or wrap input,Placeholder-only inputs,<label for='email'>,placeholder='Email' only,High
44,Accessibility,Error Messages,All,Error messages must be announced,Use aria-live or role=alert for errors,Visual-only error indication,role='alert',Red border only,High
@@ -53,7 +53,7 @@ No,Category,Issue,Platform,Description,Do,Don't,Code Example Good,Code Example B
52,Performance,Bundle Size,Web,Large JavaScript slows interaction,Monitor and minimize bundle size,Ignore bundle size growth,Bundle analyzer,No size monitoring,Medium
53,Performance,Render Blocking,Web,CSS/JS can block first paint,Inline critical CSS defer non-critical,Large blocking CSS files,Critical CSS inline,All CSS in head,Medium
54,Forms,Input Labels,All,Every input needs a visible label,Always show label above or beside input,Placeholder as only label,<label>Email</label><input>,placeholder='Email' only,High
55,Forms,Error Placement,All,Errors should appear near the problem,Show error below related input,Single error message at top of form,Error under each field,All errors at form top,Medium
55,Forms,Error Placement,All,Each invalid field needs an inline error connected to that field,Show a specific error below the input and reference it with aria-describedby,Show only a top-level error without identifying each invalid field,"<input aria-describedby=""email-error""><p id=""email-error"">Enter an email address</p>",Red border or summary only,High
56,Forms,Inline Validation,All,Validate as user types or on blur,Validate on blur for most fields,Validate only on submit,onBlur validation,Submit-only validation,Medium
57,Forms,Input Types,All,Use appropriate input types,Use email tel number url etc,Text input for everything,type='email',type='text' for email,Medium
58,Forms,Autofill Support,Web,Help browsers autofill correctly,Use autocomplete attribute properly,Block or ignore autofill,autocomplete='email',autocomplete='off' everywhere,Medium
@@ -76,7 +76,7 @@ No,Category,Issue,Platform,Description,Do,Don't,Code Example Good,Code Example B
75,Typography,Font Loading,Web,Fonts should load without layout shift,Reserve space with fallback font,Layout shift when fonts load,font-display: swap + similar fallback,No fallback font,Medium
76,Typography,Contrast Readability,All,Body text needs good contrast,Use darker text on light backgrounds,Gray text on gray background,text-gray-900 on white,text-gray-400 on gray-100,High
77,Typography,Heading Clarity,All,Headings should stand out from body,Clear size/weight difference,Headings similar to body text,Bold + larger size,Same size as body,Medium
78,Feedback,Loading Indicators,All,Show system status during waits,Show spinner/skeleton for operations > 300ms,No feedback during loading,Skeleton or spinner,Frozen UI,High
78,Feedback,Loading Indicators,All,Loading feedback should match the expected wait and avoid flashing for near-instant work,Follow platform and component guidance; preserve layout focus and accessible busy status,Apply one timing threshold to every operation or leave long waits unexplained,Stable skeleton or progress with aria-busy,Flickering spinner or frozen UI,High
79,Feedback,Empty States,All,Guide users when no content exists,Show helpful message and action,Blank empty screens,No items yet. Create one!,Empty white space,Medium
80,Feedback,Error Recovery,All,Help users recover from errors,Provide clear next steps,Error without recovery path,Try again button + help link,Error message only,Medium
81,Feedback,Progress Indicators,All,Show progress for multi-step processes,Step indicators or progress bar,No indication of progress,Step 2 of 4 indicator,No step information,Medium
@@ -94,7 +94,27 @@ No,Category,Issue,Platform,Description,Do,Don't,Code Example Good,Code Example B
93,AI Interaction,Streaming,All,Waiting for full text is slow,Stream text response token by token,Show loading spinner for 10s+,Typewriter effect,Spinner until 100% complete,Medium
94,Spatial UI,Gaze Hover,VisionOS,Elements should respond to eye tracking before pinch,Scale/highlight element on look,Static element until pinch,hoverEffect(),onTap only,High
95,Spatial UI,Depth Layering,VisionOS,UI needs Z-depth to separate content from environment,Use glass material and z-offset,Flat opaque panels blocking view,.glassBackgroundEffect(),bg-white,Medium
96,Sustainability,Auto-Play Video,Web,Video consumes massive data and energy,Click-to-play or pause when off-screen,Auto-play high-res video loops,playsInline muted preload='none',autoplay loop,Medium
96,Sustainability,Auto-Play Video,Web,Autoplaying media consumes data and creates motion barriers,Prefer click-to-play; provide pause and captions; stop off-screen and honor reduced motion,Auto-play high-resolution loops without pause or captions,"<video controls preload=""none""><track kind=""captions"" /></video>",autoplay loop,Medium
97,Sustainability,Asset Weight,Web,Heavy 3D/Image assets increase carbon footprint,Compress and lazy load 3D models,Load 50MB textures,Draco compression,Raw .obj files,Medium
98,AI Interaction,Feedback Loop,All,AI needs user feedback to improve,Thumps up/down or 'Regenerate',Static output only,Feedback component,Read-only text,Low
99,Accessibility,Motion Sensitivity,All,Parallax/Scroll-jacking causes nausea,Respect prefers-reduced-motion,Force scroll effects,@media (prefers-reduced-motion),ScrollTrigger.create(),High
99,Accessibility,Motion Sensitivity,All,Parallax/Scroll-jacking causes nausea,Honor prefers-reduced-motion and present the final readable state without parallax or scroll-jacking,Force scroll effects,@media (prefers-reduced-motion),ScrollTrigger.create(),High
100,Accessibility,Focus Not Obscured (Minimum),Web,WCAG 2.2 AA requires keyboard focus to remain at least partially visible,Offset sticky UI with scroll-padding and dismiss or move persistent overlays,Let headers footers banners or chat widgets fully cover focus,scroll-padding-top: var(--header-height),fixed overlay covers :focus,High
101,Accessibility,Focus Not Obscured (Enhanced),Web,WCAG 2.2 AAA requires keyboard focus to remain fully visible,Keep the entire focused component unobscured by author-created content,Present this enhanced AAA criterion as an AA requirement or allow persistent UI to hide any part of focus,close persistent overlay before focus moves behind it,sticky footer covers half the focused button,Medium
102,Accessibility,Focus Appearance,Web,WCAG 2.2 AAA defines minimum area and contrast for focus indicators,Use an indicator at least as large as a 2 CSS px perimeter with 3:1 state contrast,Present this enhanced AAA criterion as an AA requirement or use a thin low-contrast outline,outline: 2px solid currentColor; outline-offset: 2px,box-shadow: 0 0 1px low-contrast,Medium
103,Accessibility,Dragging Movements,All,WCAG 2.2 AA requires a single-pointer alternative for author-controlled drag operations,Add buttons menus or tap-to-move controls and retain keyboard operation,Make dragging the only way to reorder resize or select,Move up and Move down buttons beside drag handle,drag handle only,High
104,Accessibility,Target Size (Minimum),Web,WCAG 2.2 AA requires 24 CSS px pointer targets or an applicable exception,Use at least 24 by 24 CSS px or verify spacing equivalent inline user-agent or essential exceptions,Assume native 44pt or 48dp guidance defines web conformance,min-width: 24px; min-height: 24px,tiny adjacent icon buttons,High
105,Accessibility,Consistent Help,All,WCAG 2.2 A requires repeated help mechanisms to stay in the same relative order,Keep contact self-help and automated help in consistent locations,Move help controls to different locations on each page,shared header help menu,page-specific help placement,Medium
106,Forms,Redundant Entry,All,WCAG 2.2 A avoids requiring the same information twice in one process,Auto-populate prior values or let users select previously entered information,Ask users to retype the same address or account data without necessity,reuse confirmed shipping address,repeat full address form,Medium
107,Security / Accessibility,Accessible Authentication (Minimum),All,WCAG 2.2 AA says authentication must not depend only on a cognitive function test unless an exception applies,Allow password managers and paste; offer passkeys OAuth or another non-cognitive method,Block paste or require manual OTP transcription with no alternative,"autocomplete=""current-password"" and paste allowed",onpaste preventDefault,Critical
108,Animation,Auto-Rotating Content Controls,All,Auto-rotating content needs user control,Provide previous next and play/pause; stop on focus or hover and when reduced motion is requested,Auto-advance slides without a stop control,"button aria-label=""Pause carousel""",timer-only carousel,High
109,Forms / Accessibility,Focusable Error Summary,Web,An error summary for failed validation complements inline field errors and must be easy to find by keyboard and screen reader users,Place it at the top of the form; move focus to its heading or container after failed submit; link each item to its invalid field; retain inline errors,Replace inline errors with a visual-only summary or move focus on every blur,"<div role=""alert"" tabindex=""-1"" aria-labelledby=""error-title""><h2 id=""error-title"">There is a problem</h2><a href=""#email"">Enter an email address</a></div>",Toast only with no field links or focus target,High
110,Typography,Heading Line Balance,Web,Short multi-line headings may use balanced wrapping as a progressive visual heuristic,Bound the measure and test natural-wrap fallback across widths fonts and locales,Promise an exact final line or insert blanket nonbreaking spaces or hardcoded br tags,.hero-title { max-inline-size: 20ch; text-wrap: balance; },Heading copy rewritten with forced last-line breaks,Medium
111,Layout,Long Token Wrapping,Web,URLs identifiers and user content must not force horizontal overflow,Use overflow-wrap anywhere and let flex or grid text children shrink,Apply word-break break-all to all prose,.token { min-inline-size: 0; overflow-wrap: anywhere; },.token { white-space: nowrap; },High
112,Accessibility,Text Reflow and Spacing,Web,Text must remain available at narrow widths zoom and user spacing overrides,Use fluid sizes content-driven height and unitless line height,Clip text in fixed-width or fixed-height boxes,".copy { inline-size: min(100%, 65ch); height: auto; line-height: 1.5; }",.copy { width: 900px; height: 40px; overflow: hidden; },Critical
113,Content,Essential Text Truncation,All,Headings actions errors safety text and distinguishing names need complete access,Wrap stack resize or provide a visible full-detail path,Clamp essential meaning only to make cards uniform,Action label wraps or opens full details,Primary action shown only as an unexplained ellipsis,Critical
114,Content,Compact Label Semantics,All,Badges communicate state while chips or tags represent values or actions,Choose static or interactive markup from the label's meaning and ownership,Make every pill clickable or encode status with color alone,<span class='status'>Pending</span>,<div class='pill' onclick='toggle()'>Pending</div>,High
115,Layout,Chip Collection Reflow,All,Filter chips and editable value collections must preserve labels when space or text size changes,Wrap the collection or use an operable +n disclosure for hidden overflow values,Force all chips into one clipped row or hide overflow values,<div class='chip-list'>{chips}</div> with flex-wrap,<div class='chip-list' style='height:32px;overflow:hidden'>,High
116,Content,Compact Label Overflow,All,A badge chip or pill label should stay whole on one line when practical and disclose unavoidable truncation,Bound only unpredictable values; use nowrap with a shrinkable label; expose full text to keyboard pointer and touch users,Let one compact label wrap to a second line or use a hover-only tooltip,Flexible label with min-width 0 and an operable full-value disclosure,Fixed-width badge wraps to second line or clips with title-only recovery,High
117,Accessibility,Compact Control Semantics,Web,Interactive chips need a native role accessible name state keyboard operation and visible focus,Prefer a button and expose pressed or selected state that matches the visible label,Use a clickable div or reveal the only action on hover,<button aria-pressed='true'>Open now</button>,<div class='selected' onclick='toggle()'>Open now</div>,Critical
118,Accessibility,Contextual Live Badge Updates,Web,Async badge and count changes should announce a meaningful contextual status without moving focus,Use one appropriate atomic status message such as 3 items in cart,Announce a bare number or make every badge a competing live region,<span role='status' aria-atomic='true'>3 items in cart</span>,<span aria-live='polite'>3</span>,High
119,Animation,Cancellable State Transitions,Web,Rapid compact-control changes can interrupt an in-flight transition,Cancel or replace prior motion; set the final semantic state directly and handle cancellation cleanup,Depend on animationend or transitionend for required state correctness,previous?.cancel(); setSelected(next),Enable the chip only inside transitionend,High
1 No Category Issue Platform Description Do Don't Code Example Good Code Example Bad Severity
6 5 Navigation Deep Linking All URLs should reflect current state for sharing Update URL on state/view changes Static URLs for dynamic content Use query params or hash Single URL for all states Medium
7 6 Navigation Breadcrumbs Web Show user location in site hierarchy Use for sites with 3+ levels of depth Use for flat single-level sites Home > Category > Product Only on deep nested pages Low
8 7 Animation Excessive Motion All Too many animations cause distraction and motion sickness Animate 1-2 key elements per view maximum Animate everything that moves Single hero animation animate-bounce on 5+ elements High
9 8 Animation Duration Timing All Animations should feel responsive not sluggish Motion duration depends on distance complexity platform and user context Use 150-300ms for micro-interactions Use shared motion tokens and test that feedback stays responsive Use animations longer than 500ms for UI Present 150-300ms or any cutoff as a universal requirement transition-all duration-200 transition-colors duration-200 duration-1000 One duration copied to every transition Medium
10 9 Animation Reduced Motion All Respect user's motion preferences Check prefers-reduced-motion media query Ignore accessibility motion settings @media (prefers-reduced-motion: reduce) No motion query check High
11 10 Animation Loading States All Show feedback during async operations Use skeleton screens or spinners Leave UI frozen with no feedback animate-pulse skeleton Blank screen while loading High
12 11 Animation Hover vs Tap All Hover effects don't work on touch devices Use click/tap for primary interactions Rely only on hover for important actions onClick handler onMouseEnter only High
13 12 Animation Continuous Animation All Infinite animations are distracting Use for loading indicators only Use for decorative elements animate-spin on loader animate-bounce on icons Medium
14 13 Animation Transform Performance Web Some CSS properties trigger expensive repaints Use transform and opacity for animations Animate width/height/top/left properties transform: translateY() top: 10px animation Medium
15 14 Animation Easing Functions All Linear motion feels robotic Easing should match how an element changes speed and purpose Use ease-out for entering ease-in for exiting Use deceleration when arriving acceleration when leaving and linear for constant-rate progress Use linear for UI transitions Reject linear easing even for steady rotation or progress ease-out ease-out for entry; linear for spinner linear ease-in-out for every motion Low
16 15 Layout Z-Index Management Web Stacking context conflicts cause hidden elements Define z-index scale system (10 20 30 50) Use arbitrary large z-index values z-10 z-20 z-50 z-[9999] High
17 16 Layout Overflow Hidden Web Hidden overflow can clip important content Test all content fits within containers Blindly apply overflow-hidden overflow-auto with scroll overflow-hidden truncating content Medium
18 17 Layout Fixed Positioning Web Fixed elements can overlap or be inaccessible Account for safe areas and other fixed elements Stack multiple fixed elements carelessly Fixed nav + fixed bottom with gap Multiple overlapping fixed elements Medium
19 18 Layout Stacking Context Web New stacking contexts reset z-index Understand what creates new stacking context Expect z-index to work across contexts Parent with z-index isolates children z-index: 9999 not working Medium
20 19 Layout Content Jumping Web Layout shift when content loads is jarring Images badges validation text and skeleton replacements can shift nearby content when they update Reserve space for async content Reserve appropriate space or keep async states in a stable content-driven container Let images/content push layout around Insert compact text or media without a layout strategy aspect-ratio or fixed height aspect-ratio for media; stable count slot for badges No dimensions on images Badge insertion pushes toolbar actions High
21 20 Layout Viewport Units Web 100vh can be problematic on mobile browsers Use dvh or account for mobile browser chrome Use 100vh for full-screen mobile layouts min-h-dvh or min-h-screen h-screen on mobile Medium
22 21 Layout Container Width Web Content too wide is hard to read Limit max-width for text content (65-75ch) Let text span full viewport width max-w-prose or max-w-3xl Full width paragraphs Medium
23 22 Touch Touch Target Size Mobile Small buttons are hard to tap accurately Touch target guidance depends on platform and web context Minimum 44x44px touch targets Use 44pt on iOS and 48dp on Android; for web use the separate WCAG Target Size rule Tiny clickable areas Treat one unit or minimum as universal across platforms min-h-[44px] min-w-[44px] iOS 44pt; Android 48dp; Web 24 CSS px plus WCAG exceptions w-6 h-6 buttons High
24 23 Touch Touch Spacing Mobile Adjacent touch targets need adequate spacing Minimum 8px gap between touch targets Tightly packed clickable elements gap-2 between buttons gap-0 or gap-1 Medium
25 24 Touch Gesture Conflicts Mobile Custom gestures can conflict with system Avoid horizontal swipe on main content Override system gestures Vertical scroll primary Horizontal swipe carousel only Medium
26 25 Touch Tap Delay Mobile 300ms tap delay feels laggy Use touch-action CSS or fastclick Default mobile tap handling touch-action: manipulation No touch optimization Medium
27 26 Touch Pull to Refresh Mobile Accidental refresh is frustrating Disable where not needed Enable by default everywhere overscroll-behavior: contain Default overscroll Low
28 27 Touch Haptic Feedback Mobile Tactile feedback improves interaction feel Use for confirmations and important actions Overuse vibration feedback navigator.vibrate(10) Vibrate on every tap Low
29 28 Interaction Focus States All Keyboard users need visible focus indicators Keyboard focus, including controls inside a modal, needs a visible indicator Use visible focus rings on interactive elements Use a visible focus ring on every interactive control, including modal controls Remove focus outline without replacement focus:ring-2 focus:ring-blue-500 outline-none without alternative High
30 29 Interaction Hover States Web Visual feedback on interactive elements Change cursor and add subtle visual change No hover feedback on clickable elements hover:bg-gray-100 cursor-pointer No hover style Medium
31 30 Interaction Active States All Show immediate feedback on press/click Add pressed/active state visual change No feedback during interaction active:scale-95 No active state Medium
32 31 Interaction Disabled States All Clearly indicate non-interactive elements Reduce opacity and change cursor Confuse disabled with normal state opacity-50 cursor-not-allowed Same style as enabled Medium
39 38 Accessibility Alt Text All Images need text alternatives Descriptive alt text for meaningful images Empty or missing alt attributes alt='Dog playing in park' alt='' for content images High
40 39 Accessibility Heading Hierarchy Web Screen readers use headings for navigation Use sequential heading levels h1-h6 Skip heading levels or misuse for styling h1 then h2 then h3 h1 then h4 Medium
41 40 Accessibility ARIA Labels All Interactive elements need accessible names Add aria-label for icon-only buttons Icon buttons without labels aria-label='Close menu' <button><Icon/></button> High
42 41 Accessibility Keyboard Navigation Web All functionality accessible via keyboard Web users need complete keyboard navigation with visible focus on every operable control Tab order matches visual order Keep tab order aligned with visual order and test every action without a pointer Keyboard traps or illogical tab order tabIndex for custom order Unreachable elements High
43 42 Accessibility Screen Reader All Content should make sense when read aloud Use semantic HTML and ARIA properly Div soup with no semantics <nav> <main> <article> <div> for everything Medium
44 43 Accessibility Form Labels All Inputs must have associated labels Use label with for attribute or wrap input Placeholder-only inputs <label for='email'> placeholder='Email' only High
45 44 Accessibility Error Messages All Error messages must be announced Use aria-live or role=alert for errors Visual-only error indication role='alert' Red border only High
53 52 Performance Bundle Size Web Large JavaScript slows interaction Monitor and minimize bundle size Ignore bundle size growth Bundle analyzer No size monitoring Medium
54 53 Performance Render Blocking Web CSS/JS can block first paint Inline critical CSS defer non-critical Large blocking CSS files Critical CSS inline All CSS in head Medium
55 54 Forms Input Labels All Every input needs a visible label Always show label above or beside input Placeholder as only label <label>Email</label><input> placeholder='Email' only High
56 55 Forms Error Placement All Errors should appear near the problem Each invalid field needs an inline error connected to that field Show error below related input Show a specific error below the input and reference it with aria-describedby Single error message at top of form Show only a top-level error without identifying each invalid field Error under each field <input aria-describedby="email-error"><p id="email-error">Enter an email address</p> All errors at form top Red border or summary only Medium High
57 56 Forms Inline Validation All Validate as user types or on blur Validate on blur for most fields Validate only on submit onBlur validation Submit-only validation Medium
58 57 Forms Input Types All Use appropriate input types Use email tel number url etc Text input for everything type='email' type='text' for email Medium
59 58 Forms Autofill Support Web Help browsers autofill correctly Use autocomplete attribute properly Block or ignore autofill autocomplete='email' autocomplete='off' everywhere Medium
76 75 Typography Font Loading Web Fonts should load without layout shift Reserve space with fallback font Layout shift when fonts load font-display: swap + similar fallback No fallback font Medium
77 76 Typography Contrast Readability All Body text needs good contrast Use darker text on light backgrounds Gray text on gray background text-gray-900 on white text-gray-400 on gray-100 High
78 77 Typography Heading Clarity All Headings should stand out from body Clear size/weight difference Headings similar to body text Bold + larger size Same size as body Medium
79 78 Feedback Loading Indicators All Show system status during waits Loading feedback should match the expected wait and avoid flashing for near-instant work Show spinner/skeleton for operations > 300ms Follow platform and component guidance; preserve layout focus and accessible busy status No feedback during loading Apply one timing threshold to every operation or leave long waits unexplained Skeleton or spinner Stable skeleton or progress with aria-busy Frozen UI Flickering spinner or frozen UI High
80 79 Feedback Empty States All Guide users when no content exists Show helpful message and action Blank empty screens No items yet. Create one! Empty white space Medium
81 80 Feedback Error Recovery All Help users recover from errors Provide clear next steps Error without recovery path Try again button + help link Error message only Medium
82 81 Feedback Progress Indicators All Show progress for multi-step processes Step indicators or progress bar No indication of progress Step 2 of 4 indicator No step information Medium
94 93 AI Interaction Streaming All Waiting for full text is slow Stream text response token by token Show loading spinner for 10s+ Typewriter effect Spinner until 100% complete Medium
95 94 Spatial UI Gaze Hover VisionOS Elements should respond to eye tracking before pinch Scale/highlight element on look Static element until pinch hoverEffect() onTap only High
96 95 Spatial UI Depth Layering VisionOS UI needs Z-depth to separate content from environment Use glass material and z-offset Flat opaque panels blocking view .glassBackgroundEffect() bg-white Medium
97 96 Sustainability Auto-Play Video Web Video consumes massive data and energy Autoplaying media consumes data and creates motion barriers Click-to-play or pause when off-screen Prefer click-to-play; provide pause and captions; stop off-screen and honor reduced motion Auto-play high-res video loops Auto-play high-resolution loops without pause or captions playsInline muted preload='none' <video controls preload="none"><track kind="captions" /></video> autoplay loop Medium
98 97 Sustainability Asset Weight Web Heavy 3D/Image assets increase carbon footprint Compress and lazy load 3D models Load 50MB textures Draco compression Raw .obj files Medium
99 98 AI Interaction Feedback Loop All AI needs user feedback to improve Thumps up/down or 'Regenerate' Static output only Feedback component Read-only text Low
100 99 Accessibility Motion Sensitivity All Parallax/Scroll-jacking causes nausea Respect prefers-reduced-motion Honor prefers-reduced-motion and present the final readable state without parallax or scroll-jacking Force scroll effects @media (prefers-reduced-motion) ScrollTrigger.create() High
101 100 Accessibility Focus Not Obscured (Minimum) Web WCAG 2.2 AA requires keyboard focus to remain at least partially visible Offset sticky UI with scroll-padding and dismiss or move persistent overlays Let headers footers banners or chat widgets fully cover focus scroll-padding-top: var(--header-height) fixed overlay covers :focus High
102 101 Accessibility Focus Not Obscured (Enhanced) Web WCAG 2.2 AAA requires keyboard focus to remain fully visible Keep the entire focused component unobscured by author-created content Present this enhanced AAA criterion as an AA requirement or allow persistent UI to hide any part of focus close persistent overlay before focus moves behind it sticky footer covers half the focused button Medium
103 102 Accessibility Focus Appearance Web WCAG 2.2 AAA defines minimum area and contrast for focus indicators Use an indicator at least as large as a 2 CSS px perimeter with 3:1 state contrast Present this enhanced AAA criterion as an AA requirement or use a thin low-contrast outline outline: 2px solid currentColor; outline-offset: 2px box-shadow: 0 0 1px low-contrast Medium
104 103 Accessibility Dragging Movements All WCAG 2.2 AA requires a single-pointer alternative for author-controlled drag operations Add buttons menus or tap-to-move controls and retain keyboard operation Make dragging the only way to reorder resize or select Move up and Move down buttons beside drag handle drag handle only High
105 104 Accessibility Target Size (Minimum) Web WCAG 2.2 AA requires 24 CSS px pointer targets or an applicable exception Use at least 24 by 24 CSS px or verify spacing equivalent inline user-agent or essential exceptions Assume native 44pt or 48dp guidance defines web conformance min-width: 24px; min-height: 24px tiny adjacent icon buttons High
106 105 Accessibility Consistent Help All WCAG 2.2 A requires repeated help mechanisms to stay in the same relative order Keep contact self-help and automated help in consistent locations Move help controls to different locations on each page shared header help menu page-specific help placement Medium
107 106 Forms Redundant Entry All WCAG 2.2 A avoids requiring the same information twice in one process Auto-populate prior values or let users select previously entered information Ask users to retype the same address or account data without necessity reuse confirmed shipping address repeat full address form Medium
108 107 Security / Accessibility Accessible Authentication (Minimum) All WCAG 2.2 AA says authentication must not depend only on a cognitive function test unless an exception applies Allow password managers and paste; offer passkeys OAuth or another non-cognitive method Block paste or require manual OTP transcription with no alternative autocomplete="current-password" and paste allowed onpaste preventDefault Critical
109 108 Animation Auto-Rotating Content Controls All Auto-rotating content needs user control Provide previous next and play/pause; stop on focus or hover and when reduced motion is requested Auto-advance slides without a stop control button aria-label="Pause carousel" timer-only carousel High
110 109 Forms / Accessibility Focusable Error Summary Web An error summary for failed validation complements inline field errors and must be easy to find by keyboard and screen reader users Place it at the top of the form; move focus to its heading or container after failed submit; link each item to its invalid field; retain inline errors Replace inline errors with a visual-only summary or move focus on every blur <div role="alert" tabindex="-1" aria-labelledby="error-title"><h2 id="error-title">There is a problem</h2><a href="#email">Enter an email address</a></div> Toast only with no field links or focus target High
111 110 Typography Heading Line Balance Web Short multi-line headings may use balanced wrapping as a progressive visual heuristic Bound the measure and test natural-wrap fallback across widths fonts and locales Promise an exact final line or insert blanket nonbreaking spaces or hardcoded br tags .hero-title { max-inline-size: 20ch; text-wrap: balance; } Heading copy rewritten with forced last-line breaks Medium
112 111 Layout Long Token Wrapping Web URLs identifiers and user content must not force horizontal overflow Use overflow-wrap anywhere and let flex or grid text children shrink Apply word-break break-all to all prose .token { min-inline-size: 0; overflow-wrap: anywhere; } .token { white-space: nowrap; } High
113 112 Accessibility Text Reflow and Spacing Web Text must remain available at narrow widths zoom and user spacing overrides Use fluid sizes content-driven height and unitless line height Clip text in fixed-width or fixed-height boxes .copy { inline-size: min(100%, 65ch); height: auto; line-height: 1.5; } .copy { width: 900px; height: 40px; overflow: hidden; } Critical
114 113 Content Essential Text Truncation All Headings actions errors safety text and distinguishing names need complete access Wrap stack resize or provide a visible full-detail path Clamp essential meaning only to make cards uniform Action label wraps or opens full details Primary action shown only as an unexplained ellipsis Critical
115 114 Content Compact Label Semantics All Badges communicate state while chips or tags represent values or actions Choose static or interactive markup from the label's meaning and ownership Make every pill clickable or encode status with color alone <span class='status'>Pending</span> <div class='pill' onclick='toggle()'>Pending</div> High
116 115 Layout Chip Collection Reflow All Filter chips and editable value collections must preserve labels when space or text size changes Wrap the collection or use an operable +n disclosure for hidden overflow values Force all chips into one clipped row or hide overflow values <div class='chip-list'>{chips}</div> with flex-wrap <div class='chip-list' style='height:32px;overflow:hidden'> High
117 116 Content Compact Label Overflow All A badge chip or pill label should stay whole on one line when practical and disclose unavoidable truncation Bound only unpredictable values; use nowrap with a shrinkable label; expose full text to keyboard pointer and touch users Let one compact label wrap to a second line or use a hover-only tooltip Flexible label with min-width 0 and an operable full-value disclosure Fixed-width badge wraps to second line or clips with title-only recovery High
118 117 Accessibility Compact Control Semantics Web Interactive chips need a native role accessible name state keyboard operation and visible focus Prefer a button and expose pressed or selected state that matches the visible label Use a clickable div or reveal the only action on hover <button aria-pressed='true'>Open now</button> <div class='selected' onclick='toggle()'>Open now</div> Critical
119 118 Accessibility Contextual Live Badge Updates Web Async badge and count changes should announce a meaningful contextual status without moving focus Use one appropriate atomic status message such as 3 items in cart Announce a bare number or make every badge a competing live region <span role='status' aria-atomic='true'>3 items in cart</span> <span aria-live='polite'>3</span> High
120 119 Animation Cancellable State Transitions Web Rapid compact-control changes can interrupt an in-flight transition Cancel or replace prior motion; set the final semantic state directly and handle cancellation cleanup Depend on animationend or transitionend for required state correctness previous?.cancel(); setSelected(next) Enable the chip only inside transitionend High