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-06-25 16:06:49 +00:00
parent 1da991f912
commit a225b70c17
376 changed files with 27320 additions and 4607 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui-ux-pro-max/cli/assets/data/app-interface.csv
+30 -30
View File
@@ -1,31 +1,31 @@
No,Category,Issue,Keywords,Platform,Description,Do,Don't,Code Example Good,Code Example Bad,Severity
1,Accessibility,Icon Button Labels,icon button aria-label,Web,Icon-only buttons must have accessible names,Add aria-label to icon buttons,Icon button without label,"<button aria-label='Close'><XIcon /></button>","<button><XIcon /></button>",Critical
2,Accessibility,Form Control Labels,form input label aria,Web,All form controls need labels or aria-label,Use label element or aria-label,Input without accessible name,"<label for='email'>Email</label><input id='email' />","<input placeholder='Email' />",Critical
3,Accessibility,Keyboard Handlers,keyboard onclick onkeydown,Web,Interactive elements must support keyboard interaction,Add onKeyDown alongside onClick,Click-only interaction,"<div onClick={fn} onKeyDown={fn} tabIndex={0}>","<div onClick={fn}>",High
4,Accessibility,Semantic HTML,semantic button a label,Web,Use semantic HTML before ARIA attributes,Use button/a/label elements,Div with role attribute,"<button onClick={fn}>Submit</button>","<div role='button' onClick={fn}>Submit</div>",High
5,Accessibility,Aria Live,aria-live polite async,Web,Async updates need aria-live for screen readers,Add aria-live='polite' for dynamic content,Silent async updates,"<div aria-live='polite'>{status}</div>","<div>{status}</div> // no announcement",Medium
6,Accessibility,Decorative Icons,aria-hidden decorative icon,Web,Decorative icons should be hidden from screen readers,Add aria-hidden='true' to decorative icons,Decorative icon announced,"<Icon aria-hidden='true' />","<Icon /> // announced as 'image'",Medium
7,Focus,Visible Focus States,focus-visible outline ring,Web,All interactive elements need visible focus states,Use :focus-visible with ring/outline,No focus indication,"focus-visible:ring-2 focus-visible:ring-blue-500","outline-none // no replacement",Critical
8,Focus,Never Remove Outline,outline-none focus replacement,Web,Never remove outline without providing replacement,Replace outline with visible alternative,Remove outline completely,"focus:outline-none focus:ring-2","focus:outline-none // nothing else",Critical
9,Focus,Checkbox Radio Hit Target,checkbox radio label target,Web,Checkbox/radio must share hit target with label,Wrap input and label together,Separate tiny checkbox,"<label class='flex gap-2'><input type='checkbox' /><span>Option</span></label>","<input type='checkbox' id='x' /><label for='x'>Option</label>",Medium
10,Forms,Autocomplete Attribute,autocomplete input form,Web,Inputs need autocomplete attribute for autofill,Add appropriate autocomplete value,Missing autocomplete,"<input autocomplete='email' type='email' />","<input type='email' />",High
11,Forms,Semantic Input Types,input type email tel url,Web,Use semantic input type attributes,Use email/tel/url/number types,text type for everything,"<input type='email' />","<input type='text' /> // for email",Medium
12,Forms,Never Block Paste,paste onpaste password,Web,Never prevent paste functionality,Allow paste on all inputs,Block paste on password/code,"<input type='password' />","<input onPaste={e => e.preventDefault()} />",High
13,Forms,Spellcheck Disable,spellcheck email code,Web,Disable spellcheck on emails and codes,Set spellcheck='false' on codes,Spellcheck on technical input,"<input spellCheck='false' type='email' />","<input type='email' /> // red squiggles",Low
14,Forms,Submit Button Enabled,submit button disabled loading,Web,Keep submit enabled and show spinner during requests,Show loading spinner keep enabled,Disable button during submit,"<button>{loading ? <Spinner /> : 'Submit'}</button>","<button disabled={loading}>Submit</button>",Medium
15,Forms,Inline Errors,error message inline focus,Web,Show error messages inline near the problem field,Inline error with focus on first error,Single error at top,"<input /><span class='text-red-500'>{error}</span>","<div class='error'>{allErrors}</div> // at top",High
16,Performance,Virtualize Lists,virtualize list 50 items,Web,Virtualize lists exceeding 50 items,Use virtual list for large datasets,Render all items,"<VirtualList items={items} />","items.map(item => <Item />)",High
17,Performance,Avoid Layout Reads,layout read render getboundingclientrect,Web,Avoid layout reads during render phase,Read layout in effects or callbacks,getBoundingClientRect in render,"useEffect(() => { el.getBoundingClientRect() })","const rect = el.getBoundingClientRect() // in render",Medium
18,Performance,Batch DOM Operations,batch dom write read,Web,Group DOM operations to minimize reflows,Batch writes then reads,Interleave reads and writes,"writes.forEach(w => w()); reads.forEach(r => r())","write(); read(); write(); read(); // thrashing",Medium
19,Performance,Preconnect CDN,preconnect link cdn,Web,Add preconnect links for CDN domains,Preconnect to known domains,"<link rel='preconnect' href='https://cdn.example.com' />","// no preconnect hint",Low
20,Performance,Lazy Load Images,lazy loading image below-fold,Web,Lazy-load images below the fold,Use loading='lazy' for below-fold images,Load all images eagerly,"<img loading='lazy' src='...' />","<img src='...' /> // above fold only",Medium
21,State,URL Reflects State,url state query params,Web,URL should reflect current UI state,Sync filters/tabs/pagination to URL,State only in memory,"?tab=settings&page=2","useState only // lost on refresh",High
22,State,Deep Linking,deep link stateful component,Web,Stateful components should support deep-linking,Enable sharing current view via URL,No shareable state,"router.push({ query: { ...filters } })","setFilters(f) // not in URL",Medium
23,State,Confirm Destructive Actions,confirm destructive delete modal,Web,Destructive actions require confirmation,Show confirmation dialog before delete,Delete without confirmation,"if (confirm('Delete?')) delete()","onClick={delete} // no confirmation",High
24,Typography,Proper Unicode,unicode ellipsis quotes,Web,Use proper Unicode characters,Use ... curly quotes proper dashes,ASCII approximations,"'Hello...' with proper ellipsis","'Hello...' with three dots",Low
25,Typography,Text Overflow,truncate line-clamp overflow,Web,Handle text overflow properly,Use truncate/line-clamp/break-words,Text overflows container,"<p class='truncate'>Long text...</p>","<p>Long text...</p> // overflows",Medium
26,Typography,Non-Breaking Spaces,nbsp unit brand,Web,Use non-breaking spaces for units and brand names,Use &nbsp; between number and unit,"10&nbsp;kg or Next.js&nbsp;14","10 kg // may wrap",Low
27,Anti-Pattern,No Zoom Disable,viewport zoom disable,Web,Never disable zoom in viewport meta,Allow user zoom,"<meta name='viewport' content='width=device-width'>","<meta name='viewport' content='maximum-scale=1'>",Critical
28,Anti-Pattern,No Transition All,transition all specific,Web,Avoid transition: all - specify properties,Transition specific properties,transition: all,"transition-colors duration-200","transition-all duration-200",Medium
29,Anti-Pattern,Outline Replacement,outline-none ring focus,Web,Never use outline-none without replacement,Provide visible focus replacement,Remove outline with nothing,"focus:outline-none focus:ring-2 focus:ring-blue-500","focus:outline-none // alone",Critical
30,Anti-Pattern,No Hardcoded Dates,date format intl locale,Web,Use Intl for date/number formatting,Use Intl.DateTimeFormat,Hardcoded date format,"new Intl.DateTimeFormat('en').format(date)","date.toLocaleDateString() // or manual format",Medium
1,Accessibility,Icon Button Labels,icon button accessibilityLabel,iOS/Android/React Native,Icon-only buttons must expose an accessible label,Set accessibilityLabel or label prop on icon buttons,Icon buttons without accessible names,"<Pressable accessibilityLabel=""Close""><XIcon /></Pressable>","<Pressable><XIcon /></Pressable>",Critical
2,Accessibility,Form Control Labels,form input label accessibilityLabel,iOS/Android/React Native,All inputs must have a visible label and an accessibility label,Pair Text label with input and set accessibilityLabel,Inputs with placeholder only,"<View><Text>Email</Text><TextInput accessibilityLabel=""Email address"" /></View>","<TextInput placeholder=""Email"" /></View>",Critical
3,Accessibility,Role & Traits,accessibilityRole accessibilityTraits,iOS/Android/React Native,Interactive elements must expose correct roles/traits,Use accessibilityRole/button/link/checkbox etc.,Rely on generic views with no roles,"<Pressable accessibilityRole=""button"">Submit</Pressable>","<View onTouchStart={submit}>Submit</View>",High
4,Accessibility,Dynamic Updates,accessibilityLiveRegion announce,iOS/Android/React Native,Async status updates should be announced to screen readers,Use accessibilityLiveRegion or announceForAccessibility,Update text silently with no announcement,"<Text accessibilityLiveRegion=""polite"">{status}</Text>","<Text>{status}</Text>",Medium
5,Accessibility,Decorative Icons,accessible={false} importantForAccessibility,iOS/Android/React Native,Decorative icons should be hidden from screen readers,Mark decorative icons as not accessible,Have screen reader read every icon,"<Icon accessible={false} importantForAccessibility=""no"" />","<Icon />",Medium
6,Touch,Touch Target Size,touch 44x44 hitSlop,iOS/Android/React Native,Primary touch targets must be at least 44x44pt,Increase hitSlop or padding to meet minimum,Small icons with tiny touch area,"<Pressable hitSlop={10}><Icon /></Pressable>","<Pressable><Icon style={{ width: 16, height: 16 }} /></Pressable>",Critical
7,Touch,Touch Spacing,touch spacing gap 8px,iOS/Android/React Native,Adjacent touch targets need enough spacing,Keep at least 8dp spacing between touchables,Cluster many buttons with no gap,"<View style={{ gap: 8 }}><Button ... /><Button ... /></View>","<View><Button ... /><Button ... /></View>",Medium
8,Touch,Gesture Conflicts,scroll swipe back gesture,iOS/Android/React Native,Custom gestures must not break system scroll/back,Reserve horizontal swipes for carousels,Full-screen custom swipe conflicting with back,"HorizontalPager inside vertical ScrollView","PanResponder on full screen blocking back",High
9,Navigation,Back Behavior,back handler navigation stack,iOS/Android/React Native,Back navigation should be predictable and preserve state,Use navigation.goBack and keep screen state,Reset stack or exit app unexpectedly,onPress={() => navigation.goBack()},"BackHandler.exitApp() on first press",Critical
10,Navigation,Bottom Tabs,tab bar max items,iOS/Android/React Native,Bottom tab bar should have at most 5 primary items,Use 3–5 tabs and move extras to More/Settings,Overloaded tab bar with many icons,Home/Explore/Profile/Settings,"Home/Explore/Shop/Cart/Profile/Settings/More",Medium
11,Navigation,Modal Escape,modal dismiss close affordance,iOS/Android/React Native,Modals/sheets must have clear close actions,Provide close button and swipe-down where platform expects,Trapping users in modal with no obvious exit,"<Modal><Button title=""Close"" onPress={onClose} /></Modal>","<Modal><View>{children}</View></Modal>",High
12,State,Preserve Screen State,navigation preserve state,iOS/Android/React Native,Returning to a screen should restore its scroll and form state,Keep components mounted or persist state,Reset list scroll and form inputs on every visit,"<Tab.Navigator screenOptions={{ unmountOnBlur: false }}>","<Tab.Screen options={{ unmountOnBlur: true }} />",Medium
13,Feedback,Loading Indicators,activity indicator skeleton,iOS/Android/React Native,Show visible feedback during network operations,Use ActivityIndicator or skeleton for >300ms operations,Leave button and screen frozen,"{loading ? <ActivityIndicator /> : <Button title=""Save"" />}", "<Button title=""Save"" onPress={submit} /> // no loading",High
14,Feedback,Success Feedback,toast checkmark banner,iOS/Android/React Native,Confirm successful actions with brief feedback,Show toast/checkmark or banner,Complete actions silently with no confirmation,"showToast('Saved successfully')","// silently update state only",Medium
15,Feedback,Error Feedback,inline error banner,iOS/Android/React Native,Show clear error messages near the problem,input-level error + summary banner,Only change border color with no explanation,"<TextInput ... /><Text style={{color:'red'}}>{error}</Text>","<TextInput style={{borderColor:'red'}} />",High
16,Forms,Inline Validation,onBlur validation,iOS/Android/React Native,Validate inputs on blur or submit with clear messaging,Validate onBlur and onSubmit,Validate on every keystroke causing jank,"onBlur={() => validateEmail(value)}","onChangeText={v => validateEmail(v)} // every char",Medium
17,Forms,Keyboard Type,keyboardType returnKeyType,iOS/Android/React Native,Use appropriate keyboardType and returnKeyType,Match email/tel/number/search types,Use default keyboard for all inputs,"<TextInput keyboardType=""email-address"" />","<TextInput keyboardType=""default"" />",Medium
18,Forms,Auto Focus & Next,autoFocus blurOnSubmit onSubmitEditing,iOS/Android/React Native,Guide users through form fields with Next/Done flows,Use onSubmitEditing to focus next input,Force users to tap each field manually,"onSubmitEditing={() => nextRef.current?.focus()}","// no onSubmitEditing, manual tap only",Low
19,Forms,Password Visibility,secureTextEntry toggle,iOS/Android/React Native,Allow toggling password visibility securely,Provide Show/Hide icon toggling secureTextEntry,Force users to type blind with no option,"<TextInput secureTextEntry={secure} /><Icon onPress={toggle} />","<TextInput secureTextEntry /> // no toggle",Medium
20,Performance,Virtualize Long Lists,FlatList SectionList virtualization,iOS/Android/React Native,Use FlatList/SectionList for lists over ~50 items,Use keyExtractor and initialNumToRender appropriately,Render hundreds of items with ScrollView,"<FlatList data={items} renderItem={...} />","<ScrollView>{items.map(renderItem)}</ScrollView>",High
21,Performance,Image Size & Cache,Image resize cache,iOS/Android/React Native,Use correctly sized and cached images,Use Image component with proper resizeMode and caching,Load full-resolution images everywhere,"<Image source={{uri}} resizeMode=""cover"" />","<Image source={require('4k.png')} /> // small avatar",Medium
22,Performance,Debounce High-Freq Events,debounce scroll search,iOS/Android/React Native,Debounce scroll/search callbacks to avoid jank,Wrap handlers with debounce/throttle,Run heavy logic on every event,"onScroll={debouncedHandleScroll}","onScroll={handleScrollHeavy}",Medium
23,Animation,Duration & Easing,animation duration easing,iOS/Android/React Native,Micro-interactions should be 150–300ms with native-like easing,Use ease-out for enter/ease-in for exit,Use long or linear animations for core UI,"Animated.timing(..., { duration: 200, easing: Easing.out(Easing.quad) })","Animated.timing(..., { duration: 800, easing: Easing.linear })",Medium
24,Animation,Respect Reduced Motion,reduced motion accessibility,iOS/Android/React Native,Respect OS reduced-motion accessibility setting,Check reduceMotionEnabled and simplify animations,Ignore user motion preferences,"if (reduceMotionEnabled) skipAnimation()","Always run complex parallax animations",Critical
25,Animation,Limited Continuous Motion,loop animation loader,iOS/Android/React Native,Reserve infinite animations for loaders and live data,Use looping only where necessary,Keep decorative elements looping forever,"Animated.loop(loaderAnim) for ActivityIndicator","Animated.loop(bounceAnim) on background icons",Medium
26,Typography,Base Font Size,fontScale dynamic type,iOS/Android/React Native,Body text must be readable and support Dynamic Type,Use platform fontScale and at least 14–16pt base,Render critical text below 12pt,"<Text style={{ fontSize: 16 }}>Body</Text>","<Text style={{ fontSize: 10 }}>Body</Text>",High
27,Typography,Dynamic Type Support,allowFontScaling adjustsFontSizeToFit,iOS/Android/React Native,Support system text scaling without breaking layout,Set allowFontScaling and test large text,Disable scaling on all text globally,"<Text allowFontScaling>{label}</Text>","<Text allowFontScaling={false}>{label}</Text>",High
28,Safe Areas,Safe Area Insets,safe area insets notch gesture,iOS/Android/React Native,Content must not overlap notches/gesture bars,Wrap screens in SafeAreaView or apply insets,Place tappable content under system bars,"<SafeAreaView style={{ flex: 1 }}><Screen /></SafeAreaView>","<View style={{ flex: 1 }}><Screen /></View>",High
29,Theming,Light/Dark Contrast,dark mode contrast tokens,iOS/Android/React Native,Ensure sufficient contrast in both light and dark themes,Use semantic tokens and test both themes,Reuse light-theme grays directly in dark mode,"colors.textPrimaryDark = '#F9FAFB'","colors.textPrimaryDark = '#9CA3AF' on '#111827'",High
30,Anti-Pattern,No Gesture-Only Actions,gesture only hidden controls,iOS/Android/React Native,Don't rely solely on hidden gestures for core actions,Provide visible buttons in addition to gestures,Rely on swipe/shake only with no UI affordance,"Swipe to delete + visible Delete button","Only shake device to undo with no UI",Critical
1 No Category Issue Keywords Platform Description Do Don't Code Example Good Code Example Bad Severity
2 1 Accessibility Icon Button Labels icon button aria-label icon button accessibilityLabel Web iOS/Android/React Native Icon-only buttons must have accessible names Icon-only buttons must expose an accessible label Add aria-label to icon buttons Set accessibilityLabel or label prop on icon buttons Icon button without label Icon buttons without accessible names <button aria-label='Close'><XIcon /></button> <Pressable accessibilityLabel="Close"><XIcon /></Pressable> <button><XIcon /></button> <Pressable><XIcon /></Pressable> Critical
3 2 Accessibility Form Control Labels form input label aria form input label accessibilityLabel Web iOS/Android/React Native All form controls need labels or aria-label All inputs must have a visible label and an accessibility label Use label element or aria-label Pair Text label with input and set accessibilityLabel Input without accessible name Inputs with placeholder only <label for='email'>Email</label><input id='email' /> <View><Text>Email</Text><TextInput accessibilityLabel="Email address" /></View> <input placeholder='Email' /> <TextInput placeholder="Email" /></View> Critical
4 3 Accessibility Keyboard Handlers Role & Traits keyboard onclick onkeydown accessibilityRole accessibilityTraits Web iOS/Android/React Native Interactive elements must support keyboard interaction Interactive elements must expose correct roles/traits Add onKeyDown alongside onClick Use accessibilityRole/button/link/checkbox etc. Click-only interaction Rely on generic views with no roles <div onClick={fn} onKeyDown={fn} tabIndex={0}> <Pressable accessibilityRole="button">Submit</Pressable> <div onClick={fn}> <View onTouchStart={submit}>Submit</View> High
5 4 Accessibility Semantic HTML Dynamic Updates semantic button a label accessibilityLiveRegion announce Web iOS/Android/React Native Use semantic HTML before ARIA attributes Async status updates should be announced to screen readers Use button/a/label elements Use accessibilityLiveRegion or announceForAccessibility Div with role attribute Update text silently with no announcement <button onClick={fn}>Submit</button> <Text accessibilityLiveRegion="polite">{status}</Text> <div role='button' onClick={fn}>Submit</div> <Text>{status}</Text> High Medium
6 5 Accessibility Aria Live Decorative Icons aria-live polite async accessible={false} importantForAccessibility Web iOS/Android/React Native Async updates need aria-live for screen readers Decorative icons should be hidden from screen readers Add aria-live='polite' for dynamic content Mark decorative icons as not accessible Silent async updates Have screen reader read every icon <div aria-live='polite'>{status}</div> <Icon accessible={false} importantForAccessibility="no" /> <div>{status}</div> // no announcement <Icon /> Medium
7 6 Accessibility Touch Decorative Icons Touch Target Size aria-hidden decorative icon touch 44x44 hitSlop Web iOS/Android/React Native Decorative icons should be hidden from screen readers Primary touch targets must be at least 44x44pt Add aria-hidden='true' to decorative icons Increase hitSlop or padding to meet minimum Decorative icon announced Small icons with tiny touch area <Icon aria-hidden='true' /> <Pressable hitSlop={10}><Icon /></Pressable> <Icon /> // announced as 'image' <Pressable><Icon style={{ width: 16, height: 16 }} /></Pressable> Medium Critical
8 7 Focus Touch Visible Focus States Touch Spacing focus-visible outline ring touch spacing gap 8px Web iOS/Android/React Native All interactive elements need visible focus states Adjacent touch targets need enough spacing Use :focus-visible with ring/outline Keep at least 8dp spacing between touchables No focus indication Cluster many buttons with no gap focus-visible:ring-2 focus-visible:ring-blue-500 <View style={{ gap: 8 }}><Button ... /><Button ... /></View> outline-none // no replacement <View><Button ... /><Button ... /></View> Critical Medium
9 8 Focus Touch Never Remove Outline Gesture Conflicts outline-none focus replacement scroll swipe back gesture Web iOS/Android/React Native Never remove outline without providing replacement Custom gestures must not break system scroll/back Replace outline with visible alternative Reserve horizontal swipes for carousels Remove outline completely Full-screen custom swipe conflicting with back focus:outline-none focus:ring-2 HorizontalPager inside vertical ScrollView focus:outline-none // nothing else PanResponder on full screen blocking back Critical High
10 9 Focus Navigation Checkbox Radio Hit Target Back Behavior checkbox radio label target back handler navigation stack Web iOS/Android/React Native Checkbox/radio must share hit target with label Back navigation should be predictable and preserve state Wrap input and label together Use navigation.goBack and keep screen state Separate tiny checkbox Reset stack or exit app unexpectedly <label class='flex gap-2'><input type='checkbox' /><span>Option</span></label> onPress={() => navigation.goBack()} <input type='checkbox' id='x' /><label for='x'>Option</label> BackHandler.exitApp() on first press Medium Critical
11 10 Forms Navigation Autocomplete Attribute Bottom Tabs autocomplete input form tab bar max items Web iOS/Android/React Native Inputs need autocomplete attribute for autofill Bottom tab bar should have at most 5 primary items Add appropriate autocomplete value Use 3–5 tabs and move extras to More/Settings Missing autocomplete Overloaded tab bar with many icons <input autocomplete='email' type='email' /> Home/Explore/Profile/Settings <input type='email' /> Home/Explore/Shop/Cart/Profile/Settings/More High Medium
12 11 Forms Navigation Semantic Input Types Modal Escape input type email tel url modal dismiss close affordance Web iOS/Android/React Native Use semantic input type attributes Modals/sheets must have clear close actions Use email/tel/url/number types Provide close button and swipe-down where platform expects text type for everything Trapping users in modal with no obvious exit <input type='email' /> <Modal><Button title="Close" onPress={onClose} /></Modal> <input type='text' /> // for email <Modal><View>{children}</View></Modal> Medium High
13 12 Forms State Never Block Paste Preserve Screen State paste onpaste password navigation preserve state Web iOS/Android/React Native Never prevent paste functionality Returning to a screen should restore its scroll and form state Allow paste on all inputs Keep components mounted or persist state Block paste on password/code Reset list scroll and form inputs on every visit <input type='password' /> <Tab.Navigator screenOptions={{ unmountOnBlur: false }}> <input onPaste={e => e.preventDefault()} /> <Tab.Screen options={{ unmountOnBlur: true }} /> High Medium
14 13 Forms Feedback Spellcheck Disable Loading Indicators spellcheck email code activity indicator skeleton Web iOS/Android/React Native Disable spellcheck on emails and codes Show visible feedback during network operations Set spellcheck='false' on codes Use ActivityIndicator or skeleton for >300ms operations Spellcheck on technical input Leave button and screen frozen <input spellCheck='false' type='email' /> {loading ? <ActivityIndicator /> : <Button title="Save" />} <input type='email' /> // red squiggles <Button title="Save" onPress={submit} /> // no loading Low High
15 14 Forms Feedback Submit Button Enabled Success Feedback submit button disabled loading toast checkmark banner Web iOS/Android/React Native Keep submit enabled and show spinner during requests Confirm successful actions with brief feedback Show loading spinner keep enabled Show toast/checkmark or banner Disable button during submit Complete actions silently with no confirmation <button>{loading ? <Spinner /> : 'Submit'}</button> showToast('Saved successfully') <button disabled={loading}>Submit</button> // silently update state only Medium
16 15 Forms Feedback Inline Errors Error Feedback error message inline focus inline error banner Web iOS/Android/React Native Show error messages inline near the problem field Show clear error messages near the problem Inline error with focus on first error input-level error + summary banner Single error at top Only change border color with no explanation <input /><span class='text-red-500'>{error}</span> <TextInput ... /><Text style={{color:'red'}}>{error}</Text> <div class='error'>{allErrors}</div> // at top <TextInput style={{borderColor:'red'}} /> High
17 16 Performance Forms Virtualize Lists Inline Validation virtualize list 50 items onBlur validation Web iOS/Android/React Native Virtualize lists exceeding 50 items Validate inputs on blur or submit with clear messaging Use virtual list for large datasets Validate onBlur and onSubmit Render all items Validate on every keystroke causing jank <VirtualList items={items} /> onBlur={() => validateEmail(value)} items.map(item => <Item />) onChangeText={v => validateEmail(v)} // every char High Medium
18 17 Performance Forms Avoid Layout Reads Keyboard Type layout read render getboundingclientrect keyboardType returnKeyType Web iOS/Android/React Native Avoid layout reads during render phase Use appropriate keyboardType and returnKeyType Read layout in effects or callbacks Match email/tel/number/search types getBoundingClientRect in render Use default keyboard for all inputs useEffect(() => { el.getBoundingClientRect() }) <TextInput keyboardType="email-address" /> const rect = el.getBoundingClientRect() // in render <TextInput keyboardType="default" /> Medium
19 18 Performance Forms Batch DOM Operations Auto Focus & Next batch dom write read autoFocus blurOnSubmit onSubmitEditing Web iOS/Android/React Native Group DOM operations to minimize reflows Guide users through form fields with Next/Done flows Batch writes then reads Use onSubmitEditing to focus next input Interleave reads and writes Force users to tap each field manually writes.forEach(w => w()); reads.forEach(r => r()) onSubmitEditing={() => nextRef.current?.focus()} write(); read(); write(); read(); // thrashing // no onSubmitEditing, manual tap only Medium Low
20 19 Performance Forms Preconnect CDN Password Visibility preconnect link cdn secureTextEntry toggle Web iOS/Android/React Native Add preconnect links for CDN domains Allow toggling password visibility securely Preconnect to known domains Provide Show/Hide icon toggling secureTextEntry <link rel='preconnect' href='https://cdn.example.com' /> Force users to type blind with no option // no preconnect hint <TextInput secureTextEntry={secure} /><Icon onPress={toggle} /> Low <TextInput secureTextEntry /> // no toggle Medium
21 20 Performance Lazy Load Images Virtualize Long Lists lazy loading image below-fold FlatList SectionList virtualization Web iOS/Android/React Native Lazy-load images below the fold Use FlatList/SectionList for lists over ~50 items Use loading='lazy' for below-fold images Use keyExtractor and initialNumToRender appropriately Load all images eagerly Render hundreds of items with ScrollView <img loading='lazy' src='...' /> <FlatList data={items} renderItem={...} /> <img src='...' /> // above fold only <ScrollView>{items.map(renderItem)}</ScrollView> Medium High
22 21 State Performance URL Reflects State Image Size & Cache url state query params Image resize cache Web iOS/Android/React Native URL should reflect current UI state Use correctly sized and cached images Sync filters/tabs/pagination to URL Use Image component with proper resizeMode and caching State only in memory Load full-resolution images everywhere ?tab=settings&page=2 <Image source={{uri}} resizeMode="cover" /> useState only // lost on refresh <Image source={require('4k.png')} /> // small avatar High Medium
23 22 State Performance Deep Linking Debounce High-Freq Events deep link stateful component debounce scroll search Web iOS/Android/React Native Stateful components should support deep-linking Debounce scroll/search callbacks to avoid jank Enable sharing current view via URL Wrap handlers with debounce/throttle No shareable state Run heavy logic on every event router.push({ query: { ...filters } }) onScroll={debouncedHandleScroll} setFilters(f) // not in URL onScroll={handleScrollHeavy} Medium
24 23 State Animation Confirm Destructive Actions Duration & Easing confirm destructive delete modal animation duration easing Web iOS/Android/React Native Destructive actions require confirmation Micro-interactions should be 150–300ms with native-like easing Show confirmation dialog before delete Use ease-out for enter/ease-in for exit Delete without confirmation Use long or linear animations for core UI if (confirm('Delete?')) delete() Animated.timing(..., { duration: 200, easing: Easing.out(Easing.quad) }) onClick={delete} // no confirmation Animated.timing(..., { duration: 800, easing: Easing.linear }) High Medium
25 24 Typography Animation Proper Unicode Respect Reduced Motion unicode ellipsis quotes reduced motion accessibility Web iOS/Android/React Native Use proper Unicode characters Respect OS reduced-motion accessibility setting Use ... curly quotes proper dashes Check reduceMotionEnabled and simplify animations ASCII approximations Ignore user motion preferences 'Hello...' with proper ellipsis if (reduceMotionEnabled) skipAnimation() 'Hello...' with three dots Always run complex parallax animations Low Critical
26 25 Typography Animation Text Overflow Limited Continuous Motion truncate line-clamp overflow loop animation loader Web iOS/Android/React Native Handle text overflow properly Reserve infinite animations for loaders and live data Use truncate/line-clamp/break-words Use looping only where necessary Text overflows container Keep decorative elements looping forever <p class='truncate'>Long text...</p> Animated.loop(loaderAnim) for ActivityIndicator <p>Long text...</p> // overflows Animated.loop(bounceAnim) on background icons Medium
27 26 Typography Non-Breaking Spaces Base Font Size nbsp unit brand fontScale dynamic type Web iOS/Android/React Native Use non-breaking spaces for units and brand names Body text must be readable and support Dynamic Type Use &nbsp; between number and unit Use platform fontScale and at least 14–16pt base 10&nbsp;kg or Next.js&nbsp;14 Render critical text below 12pt 10 kg // may wrap <Text style={{ fontSize: 16 }}>Body</Text> Low <Text style={{ fontSize: 10 }}>Body</Text> High
28 27 Anti-Pattern Typography No Zoom Disable Dynamic Type Support viewport zoom disable allowFontScaling adjustsFontSizeToFit Web iOS/Android/React Native Never disable zoom in viewport meta Support system text scaling without breaking layout Allow user zoom Set allowFontScaling and test large text <meta name='viewport' content='width=device-width'> Disable scaling on all text globally <meta name='viewport' content='maximum-scale=1'> <Text allowFontScaling>{label}</Text> Critical <Text allowFontScaling={false}>{label}</Text> High
29 28 Anti-Pattern Safe Areas No Transition All Safe Area Insets transition all specific safe area insets notch gesture Web iOS/Android/React Native Avoid transition: all - specify properties Content must not overlap notches/gesture bars Transition specific properties Wrap screens in SafeAreaView or apply insets transition: all Place tappable content under system bars transition-colors duration-200 <SafeAreaView style={{ flex: 1 }}><Screen /></SafeAreaView> transition-all duration-200 <View style={{ flex: 1 }}><Screen /></View> Medium High
30 29 Anti-Pattern Theming Outline Replacement Light/Dark Contrast outline-none ring focus dark mode contrast tokens Web iOS/Android/React Native Never use outline-none without replacement Ensure sufficient contrast in both light and dark themes Provide visible focus replacement Use semantic tokens and test both themes Remove outline with nothing Reuse light-theme grays directly in dark mode focus:outline-none focus:ring-2 focus:ring-blue-500 colors.textPrimaryDark = '#F9FAFB' focus:outline-none // alone colors.textPrimaryDark = '#9CA3AF' on '#111827' Critical High
31 30 Anti-Pattern No Hardcoded Dates No Gesture-Only Actions date format intl locale gesture only hidden controls Web iOS/Android/React Native Use Intl for date/number formatting Don't rely solely on hidden gestures for core actions Use Intl.DateTimeFormat Provide visible buttons in addition to gestures Hardcoded date format Rely on swipe/shake only with no UI affordance new Intl.DateTimeFormat('en').format(date) Swipe to delete + visible Delete button date.toLocaleDateString() // or manual format Only shake device to undo with no UI Medium Critical