ui-ux-pro-max-skill/cli/assets/data/ux-guidelines.csv

1	No	Category	Issue	Platform	Description	Do	Don't	Code Example Good	Code Example Bad	Severity
2	1	Navigation	Smooth Scroll	Web	Anchor links should scroll smoothly to target section	Use scroll-behavior: smooth on html element	Jump directly without transition	html { scroll-behavior: smooth; }	<a href='#section'> without CSS	High
3	2	Navigation	Sticky Navigation	Web	Fixed nav should not obscure content	Add padding-top to body equal to nav height	Let nav overlap first section content	pt-20 (if nav is h-20)	No padding compensation	Medium
4	3	Navigation	Active State	All	Current page/section should be visually indicated	Highlight active nav item with color/underline	No visual feedback on current location	text-primary border-b-2	All links same style	Medium
5	4	Navigation	Back Button	Mobile	Users expect back to work predictably	Preserve navigation history properly	Break browser/app back button behavior	history.pushState()	location.replace()	High
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	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
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	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
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	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
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	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
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 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
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
33	32	Interaction	Loading Buttons	All	Prevent double submission during async actions	Disable button and show loading state	Allow multiple clicks during processing	disabled={loading} spinner	Button clickable while loading	High
34	33	Interaction	Error Feedback	All	Users need to know when something fails	Show clear error messages near problem	Silent failures with no feedback	Red border + error message	No indication of error	High
35	34	Interaction	Success Feedback	All	Confirm successful actions to users	Show success message or visual change	No confirmation of completed action	Toast notification or checkmark	Action completes silently	Medium
36	35	Interaction	Confirmation Dialogs	All	Prevent accidental destructive actions	Confirm before delete/irreversible actions	Delete without confirmation	Are you sure modal	Direct delete on click	High
37	36	Accessibility	Color Contrast	All	Text must be readable against background	Minimum 4.5:1 ratio for normal text	Low contrast text	#333 on white (7:1)	#999 on white (2.8:1)	High
38	37	Accessibility	Color Only	All	Don't convey information by color alone	Use icons/text in addition to color	Red/green only for error/success	Red text + error icon	Red border only for error	High
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	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
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
46	45	Accessibility	Skip Links	Web	Allow keyboard users to skip navigation	Provide skip to main content link	No skip link on nav-heavy pages	Skip to main content link	100 tabs to reach content	Medium
47	46	Performance	Image Optimization	All	Large images slow page load	Use appropriate size and format (WebP)	Unoptimized full-size images	srcset with multiple sizes	4000px image for 400px display	High
48	47	Performance	Lazy Loading	All	Load content as needed	Lazy load below-fold images and content	Load everything upfront	loading='lazy'	All images eager load	Medium
49	48	Performance	Code Splitting	Web	Large bundles slow initial load	Split code by route/feature	Single large bundle	dynamic import()	All code in main bundle	Medium
50	49	Performance	Caching	Web	Repeat visits should be fast	Set appropriate cache headers	No caching strategy	Cache-Control headers	Every request hits server	Medium
51	50	Performance	Font Loading	Web	Web fonts can block rendering	Use font-display swap or optional	Invisible text during font load	font-display: swap	FOIT (Flash of Invisible Text)	Medium
52	51	Performance	Third Party Scripts	Web	External scripts can block rendering	Load non-critical scripts async/defer	Synchronous third-party scripts	async or defer attribute	<script src='...'> in head	Medium
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	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
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
60	59	Forms	Required Indicators	All	Mark required fields clearly	Use asterisk or (required) text	No indication of required fields	* required indicator	Guess which are required	Medium
61	60	Forms	Password Visibility	All	Let users see password while typing	Toggle to show/hide password	No visibility toggle	Show/hide password button	Password always hidden	Medium
62	61	Forms	Submit Feedback	All	Confirm form submission status	Show loading then success/error state	No feedback after submit	Loading -> Success message	Button click with no response	High
63	62	Forms	Input Affordance	All	Inputs should look interactive	Use distinct input styling	Inputs that look like plain text	Border/background on inputs	Borderless inputs	Medium
64	63	Forms	Mobile Keyboards	Mobile	Show appropriate keyboard for input type	Use inputmode attribute	Default keyboard for all inputs	inputmode='numeric'	Text keyboard for numbers	Medium
65	64	Responsive	Mobile First	Web	Design for mobile then enhance for larger	Start with mobile styles then add breakpoints	Desktop-first causing mobile issues	Default mobile + md: lg: xl:	Desktop default + max-width queries	Medium
66	65	Responsive	Breakpoint Testing	Web	Test at all common screen sizes	Test at 320 375 414 768 1024 1440	Only test on your device	Multiple device testing	Single device development	Medium
67	66	Responsive	Touch Friendly	Web	Mobile layouts need touch-sized targets	Increase touch targets on mobile	Same tiny buttons on mobile	Larger buttons on mobile	Desktop-sized targets on mobile	High
68	67	Responsive	Readable Font Size	All	Text must be readable on all devices	Minimum 16px body text on mobile	Tiny text on mobile	text-base or larger	text-xs for body text	High
69	68	Responsive	Viewport Meta	Web	Set viewport for mobile devices	Use width=device-width initial-scale=1	Missing or incorrect viewport	<meta name='viewport'...>	No viewport meta tag	High
70	69	Responsive	Horizontal Scroll	Web	Avoid horizontal scrolling	Ensure content fits viewport width	Content wider than viewport	max-w-full overflow-x-hidden	Horizontal scrollbar on mobile	High
71	70	Responsive	Image Scaling	Web	Images should scale with container	Use max-width: 100% on images	Fixed width images overflow	max-w-full h-auto	width='800' fixed	Medium
72	71	Responsive	Table Handling	Web	Tables can overflow on mobile	Use horizontal scroll or card layout	Wide tables breaking layout	overflow-x-auto wrapper	Table overflows viewport	Medium
73	72	Typography	Line Height	All	Adequate line height improves readability	Use 1.5-1.75 for body text	Cramped or excessive line height	leading-relaxed (1.625)	leading-none (1)	Medium
74	73	Typography	Line Length	Web	Long lines are hard to read	Limit to 65-75 characters per line	Full-width text on large screens	max-w-prose	Full viewport width text	Medium
75	74	Typography	Font Size Scale	All	Consistent type hierarchy aids scanning	Use consistent modular scale	Random font sizes	Type scale (12 14 16 18 24 32)	Arbitrary sizes	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	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
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
83	82	Feedback	Toast Notifications	All	Transient messages for non-critical info	Auto-dismiss after 3-5 seconds	Toasts that never disappear	Auto-dismiss toast	Persistent toast	Medium
84	83	Feedback	Confirmation Messages	All	Confirm successful actions	Brief success message	Silent success	Saved successfully toast	No confirmation	Medium
85	84	Content	Truncation	All	Handle long content gracefully	Truncate with ellipsis and expand option	Overflow or broken layout	line-clamp-2 with expand	Overflow or cut off	Medium
86	85	Content	Date Formatting	All	Use locale-appropriate date formats	Use relative or locale-aware dates	Ambiguous date formats	2 hours ago or locale format	01/02/03	Low
87	86	Content	Number Formatting	All	Format large numbers for readability	Use thousand separators or abbreviations	Long unformatted numbers	1.2K or 1,234	1234567	Low
88	87	Content	Placeholder Content	All	Show realistic placeholders during dev	Use realistic sample data	Lorem ipsum everywhere	Real sample content	Lorem ipsum	Low
89	88	Onboarding	User Freedom	All	Users should be able to skip tutorials	Provide Skip and Back buttons	Force linear unskippable tour	Skip Tutorial button	Locked overlay until finished	Medium
90	89	Search	Autocomplete	Web	Help users find results faster	Show predictions as user types	Require full type and enter	Debounced fetch + dropdown	No suggestions	Medium
91	90	Search	No Results	Web	Dead ends frustrate users	Show 'No results' with suggestions	Blank screen or '0 results'	Try searching for X instead	No results found.	Medium
92	91	Data Entry	Bulk Actions	Web	Editing one by one is tedious	Allow multi-select and bulk edit	Single row actions only	Checkbox column + Action bar	Repeated actions per row	Low
93	92	AI Interaction	Disclaimer	All	Users need to know they talk to AI	Clearly label AI generated content	Present AI as human	AI Assistant label	Fake human name without label	High
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	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
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	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