feat: Unified popup style, split the homepage into overview and quick links

.agents/skills/ui-ux-pro-max-zh/data/app-interface.csv

@@ -0,0 +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 accessibilityLabel,iOS/Android/React Native,仅图标按钮必须公开可访问的标签,在图标按钮上设置 accessibilityLabel 或 label 属性,没有可访问名称的图标按钮,"<Pressable accessibilityLabel=""Close""><XIcon /></Pressable>",<Pressable><XIcon /></Pressable>,Critical
+2,Accessibility,Form Control Labels,form input label accessibilityLabel,iOS/Android/React Native,所有输入都必须具有可见标签和可访问性标签,将文本标签与输入配对并设置 accessibilityLabel,仅带有占位符的输入,"<View><Text>Email</Text><TextInput accessibilityLabel=""Email address"" /></View>","<TextInput placeholder=""Email"" /></View>",Critical
+3,Accessibility,Role & Traits,accessibilityRole accessibilityTraits,iOS/Android/React Native,交互元素必须暴露正确的角色/特征,使用 accessibilityRole/按钮/链接/复选框等。,依赖没有角色的通用视图,"<Pressable accessibilityRole=""button"">Submit</Pressable>",<View onTouchStart={submit}>Submit</View>,High
+4,Accessibility,Dynamic Updates,accessibilityLiveRegion announce,iOS/Android/React Native,应向屏幕阅读器宣布异步状态更新,使用 accessibilityLiveRegion 或 announceForAccessibility,静默更新文本，不通知,"<Text accessibilityLiveRegion=""polite"">{status}</Text>",<Text>{status}</Text>,Medium
+5,Accessibility,Decorative Icons,accessible={false} importantForAccessibility,iOS/Android/React Native,装饰图标应该对屏幕阅读器隐藏,将装饰图标标记为无障碍不友好,让屏幕阅读器读取每个图标,"<Icon accessible={false} importantForAccessibility=""no"" />",<Icon />,Medium
+6,Touch,Touch Target Size,touch 44x44 hitSlop,iOS/Android/React Native,主要触摸目标必须至少为 44x44pt,增加 hitSlop 或 padding 以满足最小值,带有小触摸区域的小图标,<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,相邻触摸目标需要足够的间距,可触摸对象之间至少保持 8dp 的间距,许多按钮没有间隙地聚集在一起,<View style={{ gap: 8 }}><Button ... /><Button ... /></View>,<View><Button ... /><Button ... /></View>,Medium
+8,Touch,Gesture Conflicts,scroll swipe back gesture,iOS/Android/React Native,自定义手势不得破坏系统滚动/后退,为轮播保留水平滑动,全屏自定义滑动与返回冲突,HorizontalPager inside vertical ScrollView,PanResponder on full screen blocking back,High
+9,Navigation,Back Behavior,back handler navigation stack,iOS/Android/React Native,后退导航应该是可预测的并保留状态,使用 navigation.goBack 并保持屏幕状态,重置导航栈或意外退出应用程序,onPress={() => navigation.goBack()},BackHandler.exitApp() on first press,Critical
+10,Navigation,Bottom Tabs,tab bar max items,iOS/Android/React Native,底部标签栏最多应有 5 个主要项目,使用 3-5 个选项卡并将额外内容移至更多/设置,带有许多图标的超载选项卡栏,Home/Explore/Profile/Settings,Home/Explore/Shop/Cart/Profile/Settings/More,Medium
+11,Navigation,Modal Escape,modal dismiss close affordance,iOS/Android/React Native,模态框/表单必须有明确的关闭动作,在平台期望的位置提供关闭按钮和向下滑动按钮,将用户困在没有明显退出的模式中,"<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,返回屏幕应恢复其滚动和表单状态,保持组件已安装或保持状态,每次访问时重置列表滚动和表单输入,<Tab.Navigator screenOptions={{ unmountOnBlur: false }}>,<Tab.Screen options={{ unmountOnBlur: true }} />,Medium
+13,Feedback,Loading Indicators,activity indicator skeleton,iOS/Android/React Native,在网络操作期间显示可见的反馈,使用 ActivityIndicator 或骨架进行 >300ms 的操作,让按钮和屏幕保持冻结状态,"{loading ? <ActivityIndicator /> : <Button title=""Save"" />}"," ""<Button title=""""Save"""" onPress={submit} /> //没有加载”",High
+14,Feedback,Success Feedback,toast checkmark banner,iOS/Android/React Native,通过简短的反馈确认成功的操作,显示 Toast/复选标记或横幅,默默地完成操作，无需确认,showToast('Saved successfully'),//仅默默更新状态,Medium
+15,Feedback,Error Feedback,inline error banner,iOS/Android/React Native,在问题附近显示清晰的错误消息,输入级错误+摘要横幅,只改变边框颜色，没有任何解释,<TextInput ... /><Text style={{color:'red'}}>{error}</Text>,<TextInput style={{borderColor:'red'}} />,High
+16,Forms,Inline Validation,onBlur validation,iOS/Android/React Native,验证失去焦点的输入或以清晰的消息提交,验证 onBlur 和 onSubmit,验证导致卡顿的每次击键,onBlur={() => validateEmail(value)},onChangeText={v => validateEmail(v)} //每个字符,Medium
+17,Forms,Keyboard Type,keyboardType returnKeyType,iOS/Android/React Native,使用适当的 keyboardType 和 returnKeyType,匹配电子邮件/电话/号码/搜索类型,对所有输入使用默认键盘,"<TextInput keyboardType=""email-address"" />","<TextInput keyboardType=""default"" />",Medium
+18,Forms,Auto Focus & Next,autoFocus blurOnSubmit onSubmitEditing,iOS/Android/React Native,使用下一步/完成流程引导用户浏览表单字段,使用 onSubmitEditing 聚焦下一个输入,强制用户手动点击每个字段,onSubmitEditing={() => nextRef.current?.focus()},//没有 onSubmitEditing，仅手动点击,Low
+19,Forms,Password Visibility,secureTextEntry toggle,iOS/Android/React Native,允许安全地切换密码可见性,提供显示/隐藏图标切换 secureTextEntry,强制用户盲输入，没有选项,<TextInput secureTextEntry={secure} /><Icon onPress={toggle} />,<TextInput secureTextEntry /> //没有切换,Medium
+20,Performance,Virtualize Long Lists,FlatList SectionList virtualization,iOS/Android/React Native,使用 FlatList/SectionList 列出超过 50 个项目,适当使用 keyExtractor 和 initialNumToRender,使用 ScrollView 渲染数百个项目,<FlatList data={items} renderItem={...} />,<ScrollView>{items.map(renderItem)}</ScrollView>,High
+21,Performance,Image Size & Cache,Image resize cache,iOS/Android/React Native,使用正确大小和缓存的图像,使用具有适当 resizeMode 和缓存的 Image 组件,随处加载全分辨率图像,"<Image source={{uri}} resizeMode=""cover"" />",<Image source={require('4k.png')} /> //小头像,Medium
+22,Performance,Debounce High-Freq Events,debounce scroll search,iOS/Android/React Native,对滚动/搜索应用防抖/节流回调以避免卡顿,使用防抖/节流包装处理程序,对每个事件运行大量逻辑,onScroll={debouncedHandleScroll},onScroll={handleScrollHeavy},Medium
+23,Animation,Duration & Easing,animation duration easing,iOS/Android/React Native,微交互应为 150–300 毫秒，并具有类似原生的缓动,使用缓出进入/缓入退出,对核心 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,尊重操作系统简化运动辅助功能设置,检查 reduceMotionEnabled 并简化动画,忽略用户动作偏好,if (reduceMotionEnabled) skipAnimation(),Always run complex parallax animations,Critical
+25,Animation,Limited Continuous Motion,loop animation loader,iOS/Android/React Native,为加载程序和实时数据保留无限动画,仅在必要时使用循环,让装饰元素永远循环,Animated.loop(loaderAnim) for ActivityIndicator,Animated.loop(bounceAnim) on background icons,Medium
+26,Typography,Base Font Size,fontScale dynamic type,iOS/Android/React Native,正文文本必须可读并支持动态类型,使用平台 fontScale 和至少 14–16pt 的基础,渲染 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,支持系统文本缩放而不破坏布局,设置 allowFontScaling 并测试大文本,全局禁用所有文本的缩放,<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,内容不得与凹口/手势栏重叠,在 SafeAreaView 中环绕屏幕或应用插图,将可点击的内容放置在系统栏下方,<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,确保浅色和深色主题有足够的对比度,使用语义标记并测试两个主题,直接在暗黑模式下重复使用浅色主题灰色,colors.textPrimaryDark = '#F9FAFB',colors.textPrimaryDark = '#9CA3AF' on '#111827',High
+30,Anti-Pattern,No Gesture-Only Actions,gesture only hidden controls,iOS/Android/React Native,不要仅依赖隐藏的手势来执行核心操作,除手势外还提供可见按钮,仅依靠滑动/摇动，没有 UI 可供性,Swipe to delete + visible Delete button,Only shake device to undo with no UI,Critical