mcp-probe-kit 3.0.14 → 3.0.16

package/build/resources/ui-ux-data/ux-guidelines.json

@@ -0,0 +1,1190 @@
+[
+  {
+    "No": "1",
+    "Category": "Navigation",
+    "Issue": "Smooth Scroll",
+    "Platform": "Web",
+    "Description": "Anchor links should scroll smoothly to target section",
+    "Do": "Use scroll-behavior: smooth on html element",
+    "Don't": "Jump directly without transition",
+    "Code Example Good": "html { scroll-behavior: smooth; }",
+    "Code Example Bad": "<a href='#section'> without CSS",
+    "Severity": "High"
+  },
+  {
+    "No": "2",
+    "Category": "Navigation",
+    "Issue": "Sticky Navigation",
+    "Platform": "Web",
+    "Description": "Fixed nav should not obscure content",
+    "Do": "Add padding-top to body equal to nav height",
+    "Don't": "Let nav overlap first section content",
+    "Code Example Good": "pt-20 (if nav is h-20)",
+    "Code Example Bad": "No padding compensation",
+    "Severity": "Medium"
+  },
+  {
+    "No": "3",
+    "Category": "Navigation",
+    "Issue": "Active State",
+    "Platform": "All",
+    "Description": "Current page/section should be visually indicated",
+    "Do": "Highlight active nav item with color/underline",
+    "Don't": "No visual feedback on current location",
+    "Code Example Good": "text-primary border-b-2",
+    "Code Example Bad": "All links same style",
+    "Severity": "Medium"
+  },
+  {
+    "No": "4",
+    "Category": "Navigation",
+    "Issue": "Back Button",
+    "Platform": "Mobile",
+    "Description": "Users expect back to work predictably",
+    "Do": "Preserve navigation history properly",
+    "Don't": "Break browser/app back button behavior",
+    "Code Example Good": "history.pushState()",
+    "Code Example Bad": "location.replace()",
+    "Severity": "High"
+  },
+  {
+    "No": "5",
+    "Category": "Navigation",
+    "Issue": "Deep Linking",
+    "Platform": "All",
+    "Description": "URLs should reflect current state for sharing",
+    "Do": "Update URL on state/view changes",
+    "Don't": "Static URLs for dynamic content",
+    "Code Example Good": "Use query params or hash",
+    "Code Example Bad": "Single URL for all states",
+    "Severity": "Medium"
+  },
+  {
+    "No": "6",
+    "Category": "Navigation",
+    "Issue": "Breadcrumbs",
+    "Platform": "Web",
+    "Description": "Show user location in site hierarchy",
+    "Do": "Use for sites with 3+ levels of depth",
+    "Don't": "Use for flat single-level sites",
+    "Code Example Good": "Home > Category > Product",
+    "Code Example Bad": "Only on deep nested pages",
+    "Severity": "Low"
+  },
+  {
+    "No": "7",
+    "Category": "Animation",
+    "Issue": "Excessive Motion",
+    "Platform": "All",
+    "Description": "Too many animations cause distraction and motion sickness",
+    "Do": "Animate 1-2 key elements per view maximum",
+    "Don't": "Animate everything that moves",
+    "Code Example Good": "Single hero animation",
+    "Code Example Bad": "animate-bounce on 5+ elements",
+    "Severity": "High"
+  },
+  {
+    "No": "8",
+    "Category": "Animation",
+    "Issue": "Duration Timing",
+    "Platform": "All",
+    "Description": "Animations should feel responsive not sluggish",
+    "Do": "Use 150-300ms for micro-interactions",
+    "Don't": "Use animations longer than 500ms for UI",
+    "Code Example Good": "transition-all duration-200",
+    "Code Example Bad": "duration-1000",
+    "Severity": "Medium"
+  },
+  {
+    "No": "9",
+    "Category": "Animation",
+    "Issue": "Reduced Motion",
+    "Platform": "All",
+    "Description": "Respect user's motion preferences",
+    "Do": "Check prefers-reduced-motion media query",
+    "Don't": "Ignore accessibility motion settings",
+    "Code Example Good": "@media (prefers-reduced-motion: reduce)",
+    "Code Example Bad": "No motion query check",
+    "Severity": "High"
+  },
+  {
+    "No": "10",
+    "Category": "Animation",
+    "Issue": "Loading States",
+    "Platform": "All",
+    "Description": "Show feedback during async operations",
+    "Do": "Use skeleton screens or spinners",
+    "Don't": "Leave UI frozen with no feedback",
+    "Code Example Good": "animate-pulse skeleton",
+    "Code Example Bad": "Blank screen while loading",
+    "Severity": "High"
+  },
+  {
+    "No": "11",
+    "Category": "Animation",
+    "Issue": "Hover vs Tap",
+    "Platform": "All",
+    "Description": "Hover effects don't work on touch devices",
+    "Do": "Use click/tap for primary interactions",
+    "Don't": "Rely only on hover for important actions",
+    "Code Example Good": "onClick handler",
+    "Code Example Bad": "onMouseEnter only",
+    "Severity": "High"
+  },
+  {
+    "No": "12",
+    "Category": "Animation",
+    "Issue": "Continuous Animation",
+    "Platform": "All",
+    "Description": "Infinite animations are distracting",
+    "Do": "Use for loading indicators only",
+    "Don't": "Use for decorative elements",
+    "Code Example Good": "animate-spin on loader",
+    "Code Example Bad": "animate-bounce on icons",
+    "Severity": "Medium"
+  },
+  {
+    "No": "13",
+    "Category": "Animation",
+    "Issue": "Transform Performance",
+    "Platform": "Web",
+    "Description": "Some CSS properties trigger expensive repaints",
+    "Do": "Use transform and opacity for animations",
+    "Don't": "Animate width/height/top/left properties",
+    "Code Example Good": "transform: translateY()",
+    "Code Example Bad": "top: 10px animation",
+    "Severity": "Medium"
+  },
+  {
+    "No": "14",
+    "Category": "Animation",
+    "Issue": "Easing Functions",
+    "Platform": "All",
+    "Description": "Linear motion feels robotic",
+    "Do": "Use ease-out for entering ease-in for exiting",
+    "Don't": "Use linear for UI transitions",
+    "Code Example Good": "ease-out",
+    "Code Example Bad": "linear",
+    "Severity": "Low"
+  },
+  {
+    "No": "15",
+    "Category": "Layout",
+    "Issue": "Z-Index Management",
+    "Platform": "Web",
+    "Description": "Stacking context conflicts cause hidden elements",
+    "Do": "Define z-index scale system (10 20 30 50)",
+    "Don't": "Use arbitrary large z-index values",
+    "Code Example Good": "z-10 z-20 z-50",
+    "Code Example Bad": "z-[9999]",
+    "Severity": "High"
+  },
+  {
+    "No": "16",
+    "Category": "Layout",
+    "Issue": "Overflow Hidden",
+    "Platform": "Web",
+    "Description": "Hidden overflow can clip important content",
+    "Do": "Test all content fits within containers",
+    "Don't": "Blindly apply overflow-hidden",
+    "Code Example Good": "overflow-auto with scroll",
+    "Code Example Bad": "overflow-hidden truncating content",
+    "Severity": "Medium"
+  },
+  {
+    "No": "17",
+    "Category": "Layout",
+    "Issue": "Fixed Positioning",
+    "Platform": "Web",
+    "Description": "Fixed elements can overlap or be inaccessible",
+    "Do": "Account for safe areas and other fixed elements",
+    "Don't": "Stack multiple fixed elements carelessly",
+    "Code Example Good": "Fixed nav + fixed bottom with gap",
+    "Code Example Bad": "Multiple overlapping fixed elements",
+    "Severity": "Medium"
+  },
+  {
+    "No": "18",
+    "Category": "Layout",
+    "Issue": "Stacking Context",
+    "Platform": "Web",
+    "Description": "New stacking contexts reset z-index",
+    "Do": "Understand what creates new stacking context",
+    "Don't": "Expect z-index to work across contexts",
+    "Code Example Good": "Parent with z-index isolates children",
+    "Code Example Bad": "z-index: 9999 not working",
+    "Severity": "Medium"
+  },
+  {
+    "No": "19",
+    "Category": "Layout",
+    "Issue": "Content Jumping",
+    "Platform": "Web",
+    "Description": "Layout shift when content loads is jarring",
+    "Do": "Reserve space for async content",
+    "Don't": "Let images/content push layout around",
+    "Code Example Good": "aspect-ratio or fixed height",
+    "Code Example Bad": "No dimensions on images",
+    "Severity": "High"
+  },
+  {
+    "No": "20",
+    "Category": "Layout",
+    "Issue": "Viewport Units",
+    "Platform": "Web",
+    "Description": "100vh can be problematic on mobile browsers",
+    "Do": "Use dvh or account for mobile browser chrome",
+    "Don't": "Use 100vh for full-screen mobile layouts",
+    "Code Example Good": "min-h-dvh or min-h-screen",
+    "Code Example Bad": "h-screen on mobile",
+    "Severity": "Medium"
+  },
+  {
+    "No": "21",
+    "Category": "Layout",
+    "Issue": "Container Width",
+    "Platform": "Web",
+    "Description": "Content too wide is hard to read",
+    "Do": "Limit max-width for text content (65-75ch)",
+    "Don't": "Let text span full viewport width",
+    "Code Example Good": "max-w-prose or max-w-3xl",
+    "Code Example Bad": "Full width paragraphs",
+    "Severity": "Medium"
+  },
+  {
+    "No": "22",
+    "Category": "Touch",
+    "Issue": "Touch Target Size",
+    "Platform": "Mobile",
+    "Description": "Small buttons are hard to tap accurately",
+    "Do": "Minimum 44x44px touch targets",
+    "Don't": "Tiny clickable areas",
+    "Code Example Good": "min-h-[44px] min-w-[44px]",
+    "Code Example Bad": "w-6 h-6 buttons",
+    "Severity": "High"
+  },
+  {
+    "No": "23",
+    "Category": "Touch",
+    "Issue": "Touch Spacing",
+    "Platform": "Mobile",
+    "Description": "Adjacent touch targets need adequate spacing",
+    "Do": "Minimum 8px gap between touch targets",
+    "Don't": "Tightly packed clickable elements",
+    "Code Example Good": "gap-2 between buttons",
+    "Code Example Bad": "gap-0 or gap-1",
+    "Severity": "Medium"
+  },
+  {
+    "No": "24",
+    "Category": "Touch",
+    "Issue": "Gesture Conflicts",
+    "Platform": "Mobile",
+    "Description": "Custom gestures can conflict with system",
+    "Do": "Avoid horizontal swipe on main content",
+    "Don't": "Override system gestures",
+    "Code Example Good": "Vertical scroll primary",
+    "Code Example Bad": "Horizontal swipe carousel only",
+    "Severity": "Medium"
+  },
+  {
+    "No": "25",
+    "Category": "Touch",
+    "Issue": "Tap Delay",
+    "Platform": "Mobile",
+    "Description": "300ms tap delay feels laggy",
+    "Do": "Use touch-action CSS or fastclick",
+    "Don't": "Default mobile tap handling",
+    "Code Example Good": "touch-action: manipulation",
+    "Code Example Bad": "No touch optimization",
+    "Severity": "Medium"
+  },
+  {
+    "No": "26",
+    "Category": "Touch",
+    "Issue": "Pull to Refresh",
+    "Platform": "Mobile",
+    "Description": "Accidental refresh is frustrating",
+    "Do": "Disable where not needed",
+    "Don't": "Enable by default everywhere",
+    "Code Example Good": "overscroll-behavior: contain",
+    "Code Example Bad": "Default overscroll",
+    "Severity": "Low"
+  },
+  {
+    "No": "27",
+    "Category": "Touch",
+    "Issue": "Haptic Feedback",
+    "Platform": "Mobile",
+    "Description": "Tactile feedback improves interaction feel",
+    "Do": "Use for confirmations and important actions",
+    "Don't": "Overuse vibration feedback",
+    "Code Example Good": "navigator.vibrate(10)",
+    "Code Example Bad": "Vibrate on every tap",
+    "Severity": "Low"
+  },
+  {
+    "No": "28",
+    "Category": "Interaction",
+    "Issue": "Focus States",
+    "Platform": "All",
+    "Description": "Keyboard users need visible focus indicators",
+    "Do": "Use visible focus rings on interactive elements",
+    "Don't": "Remove focus outline without replacement",
+    "Code Example Good": "focus:ring-2 focus:ring-blue-500",
+    "Code Example Bad": "outline-none without alternative",
+    "Severity": "High"
+  },
+  {
+    "No": "29",
+    "Category": "Interaction",
+    "Issue": "Hover States",
+    "Platform": "Web",
+    "Description": "Visual feedback on interactive elements",
+    "Do": "Change cursor and add subtle visual change",
+    "Don't": "No hover feedback on clickable elements",
+    "Code Example Good": "hover:bg-gray-100 cursor-pointer",
+    "Code Example Bad": "No hover style",
+    "Severity": "Medium"
+  },
+  {
+    "No": "30",
+    "Category": "Interaction",
+    "Issue": "Active States",
+    "Platform": "All",
+    "Description": "Show immediate feedback on press/click",
+    "Do": "Add pressed/active state visual change",
+    "Don't": "No feedback during interaction",
+    "Code Example Good": "active:scale-95",
+    "Code Example Bad": "No active state",
+    "Severity": "Medium"
+  },
+  {
+    "No": "31",
+    "Category": "Interaction",
+    "Issue": "Disabled States",
+    "Platform": "All",
+    "Description": "Clearly indicate non-interactive elements",
+    "Do": "Reduce opacity and change cursor",
+    "Don't": "Confuse disabled with normal state",
+    "Code Example Good": "opacity-50 cursor-not-allowed",
+    "Code Example Bad": "Same style as enabled",
+    "Severity": "Medium"
+  },
+  {
+    "No": "32",
+    "Category": "Interaction",
+    "Issue": "Loading Buttons",
+    "Platform": "All",
+    "Description": "Prevent double submission during async actions",
+    "Do": "Disable button and show loading state",
+    "Don't": "Allow multiple clicks during processing",
+    "Code Example Good": "disabled={loading} spinner",
+    "Code Example Bad": "Button clickable while loading",
+    "Severity": "High"
+  },
+  {
+    "No": "33",
+    "Category": "Interaction",
+    "Issue": "Error Feedback",
+    "Platform": "All",
+    "Description": "Users need to know when something fails",
+    "Do": "Show clear error messages near problem",
+    "Don't": "Silent failures with no feedback",
+    "Code Example Good": "Red border + error message",
+    "Code Example Bad": "No indication of error",
+    "Severity": "High"
+  },
+  {
+    "No": "34",
+    "Category": "Interaction",
+    "Issue": "Success Feedback",
+    "Platform": "All",
+    "Description": "Confirm successful actions to users",
+    "Do": "Show success message or visual change",
+    "Don't": "No confirmation of completed action",
+    "Code Example Good": "Toast notification or checkmark",
+    "Code Example Bad": "Action completes silently",
+    "Severity": "Medium"
+  },
+  {
+    "No": "35",
+    "Category": "Interaction",
+    "Issue": "Confirmation Dialogs",
+    "Platform": "All",
+    "Description": "Prevent accidental destructive actions",
+    "Do": "Confirm before delete/irreversible actions",
+    "Don't": "Delete without confirmation",
+    "Code Example Good": "Are you sure modal",
+    "Code Example Bad": "Direct delete on click",
+    "Severity": "High"
+  },
+  {
+    "No": "36",
+    "Category": "Accessibility",
+    "Issue": "Color Contrast",
+    "Platform": "All",
+    "Description": "Text must be readable against background",
+    "Do": "Minimum 4.5:1 ratio for normal text",
+    "Don't": "Low contrast text",
+    "Code Example Good": "#333 on white (7:1)",
+    "Code Example Bad": "#999 on white (2.8:1)",
+    "Severity": "High"
+  },
+  {
+    "No": "37",
+    "Category": "Accessibility",
+    "Issue": "Color Only",
+    "Platform": "All",
+    "Description": "Don't convey information by color alone",
+    "Do": "Use icons/text in addition to color",
+    "Don't": "Red/green only for error/success",
+    "Code Example Good": "Red text + error icon",
+    "Code Example Bad": "Red border only for error",
+    "Severity": "High"
+  },
+  {
+    "No": "38",
+    "Category": "Accessibility",
+    "Issue": "Alt Text",
+    "Platform": "All",
+    "Description": "Images need text alternatives",
+    "Do": "Descriptive alt text for meaningful images",
+    "Don't": "Empty or missing alt attributes",
+    "Code Example Good": "alt='Dog playing in park'",
+    "Code Example Bad": "alt='' for content images",
+    "Severity": "High"
+  },
+  {
+    "No": "39",
+    "Category": "Accessibility",
+    "Issue": "Heading Hierarchy",
+    "Platform": "Web",
+    "Description": "Screen readers use headings for navigation",
+    "Do": "Use sequential heading levels h1-h6",
+    "Don't": "Skip heading levels or misuse for styling",
+    "Code Example Good": "h1 then h2 then h3",
+    "Code Example Bad": "h1 then h4",
+    "Severity": "Medium"
+  },
+  {
+    "No": "40",
+    "Category": "Accessibility",
+    "Issue": "ARIA Labels",
+    "Platform": "All",
+    "Description": "Interactive elements need accessible names",
+    "Do": "Add aria-label for icon-only buttons",
+    "Don't": "Icon buttons without labels",
+    "Code Example Good": "aria-label='Close menu'",
+    "Code Example Bad": "<button><Icon/></button>",
+    "Severity": "High"
+  },
+  {
+    "No": "41",
+    "Category": "Accessibility",
+    "Issue": "Keyboard Navigation",
+    "Platform": "Web",
+    "Description": "All functionality accessible via keyboard",
+    "Do": "Tab order matches visual order",
+    "Don't": "Keyboard traps or illogical tab order",
+    "Code Example Good": "tabIndex for custom order",
+    "Code Example Bad": "Unreachable elements",
+    "Severity": "High"
+  },
+  {
+    "No": "42",
+    "Category": "Accessibility",
+    "Issue": "Screen Reader",
+    "Platform": "All",
+    "Description": "Content should make sense when read aloud",
+    "Do": "Use semantic HTML and ARIA properly",
+    "Don't": "Div soup with no semantics",
+    "Code Example Good": "<nav> <main> <article>",
+    "Code Example Bad": "<div> for everything",
+    "Severity": "Medium"
+  },
+  {
+    "No": "43",
+    "Category": "Accessibility",
+    "Issue": "Form Labels",
+    "Platform": "All",
+    "Description": "Inputs must have associated labels",
+    "Do": "Use label with for attribute or wrap input",
+    "Don't": "Placeholder-only inputs",
+    "Code Example Good": "<label for='email'>",
+    "Code Example Bad": "placeholder='Email' only",
+    "Severity": "High"
+  },
+  {
+    "No": "44",
+    "Category": "Accessibility",
+    "Issue": "Error Messages",
+    "Platform": "All",
+    "Description": "Error messages must be announced",
+    "Do": "Use aria-live or role=alert for errors",
+    "Don't": "Visual-only error indication",
+    "Code Example Good": "role='alert'",
+    "Code Example Bad": "Red border only",
+    "Severity": "High"
+  },
+  {
+    "No": "45",
+    "Category": "Accessibility",
+    "Issue": "Skip Links",
+    "Platform": "Web",
+    "Description": "Allow keyboard users to skip navigation",
+    "Do": "Provide skip to main content link",
+    "Don't": "No skip link on nav-heavy pages",
+    "Code Example Good": "Skip to main content link",
+    "Code Example Bad": "100 tabs to reach content",
+    "Severity": "Medium"
+  },
+  {
+    "No": "46",
+    "Category": "Performance",
+    "Issue": "Image Optimization",
+    "Platform": "All",
+    "Description": "Large images slow page load",
+    "Do": "Use appropriate size and format (WebP)",
+    "Don't": "Unoptimized full-size images",
+    "Code Example Good": "srcset with multiple sizes",
+    "Code Example Bad": "4000px image for 400px display",
+    "Severity": "High"
+  },
+  {
+    "No": "47",
+    "Category": "Performance",
+    "Issue": "Lazy Loading",
+    "Platform": "All",
+    "Description": "Load content as needed",
+    "Do": "Lazy load below-fold images and content",
+    "Don't": "Load everything upfront",
+    "Code Example Good": "loading='lazy'",
+    "Code Example Bad": "All images eager load",
+    "Severity": "Medium"
+  },
+  {
+    "No": "48",
+    "Category": "Performance",
+    "Issue": "Code Splitting",
+    "Platform": "Web",
+    "Description": "Large bundles slow initial load",
+    "Do": "Split code by route/feature",
+    "Don't": "Single large bundle",
+    "Code Example Good": "dynamic import()",
+    "Code Example Bad": "All code in main bundle",
+    "Severity": "Medium"
+  },
+  {
+    "No": "49",
+    "Category": "Performance",
+    "Issue": "Caching",
+    "Platform": "Web",
+    "Description": "Repeat visits should be fast",
+    "Do": "Set appropriate cache headers",
+    "Don't": "No caching strategy",
+    "Code Example Good": "Cache-Control headers",
+    "Code Example Bad": "Every request hits server",
+    "Severity": "Medium"
+  },
+  {
+    "No": "50",
+    "Category": "Performance",
+    "Issue": "Font Loading",
+    "Platform": "Web",
+    "Description": "Web fonts can block rendering",
+    "Do": "Use font-display swap or optional",
+    "Don't": "Invisible text during font load",
+    "Code Example Good": "font-display: swap",
+    "Code Example Bad": "FOIT (Flash of Invisible Text)",
+    "Severity": "Medium"
+  },
+  {
+    "No": "51",
+    "Category": "Performance",
+    "Issue": "Third Party Scripts",
+    "Platform": "Web",
+    "Description": "External scripts can block rendering",
+    "Do": "Load non-critical scripts async/defer",
+    "Don't": "Synchronous third-party scripts",
+    "Code Example Good": "async or defer attribute",
+    "Code Example Bad": "<script src='...'> in head",
+    "Severity": "Medium"
+  },
+  {
+    "No": "52",
+    "Category": "Performance",
+    "Issue": "Bundle Size",
+    "Platform": "Web",
+    "Description": "Large JavaScript slows interaction",
+    "Do": "Monitor and minimize bundle size",
+    "Don't": "Ignore bundle size growth",
+    "Code Example Good": "Bundle analyzer",
+    "Code Example Bad": "No size monitoring",
+    "Severity": "Medium"
+  },
+  {
+    "No": "53",
+    "Category": "Performance",
+    "Issue": "Render Blocking",
+    "Platform": "Web",
+    "Description": "CSS/JS can block first paint",
+    "Do": "Inline critical CSS defer non-critical",
+    "Don't": "Large blocking CSS files",
+    "Code Example Good": "Critical CSS inline",
+    "Code Example Bad": "All CSS in head",
+    "Severity": "Medium"
+  },
+  {
+    "No": "54",
+    "Category": "Forms",
+    "Issue": "Input Labels",
+    "Platform": "All",
+    "Description": "Every input needs a visible label",
+    "Do": "Always show label above or beside input",
+    "Don't": "Placeholder as only label",
+    "Code Example Good": "<label>Email</label><input>",
+    "Code Example Bad": "placeholder='Email' only",
+    "Severity": "High"
+  },
+  {
+    "No": "55",
+    "Category": "Forms",
+    "Issue": "Error Placement",
+    "Platform": "All",
+    "Description": "Errors should appear near the problem",
+    "Do": "Show error below related input",
+    "Don't": "Single error message at top of form",
+    "Code Example Good": "Error under each field",
+    "Code Example Bad": "All errors at form top",
+    "Severity": "Medium"
+  },
+  {
+    "No": "56",
+    "Category": "Forms",
+    "Issue": "Inline Validation",
+    "Platform": "All",
+    "Description": "Validate as user types or on blur",
+    "Do": "Validate on blur for most fields",
+    "Don't": "Validate only on submit",
+    "Code Example Good": "onBlur validation",
+    "Code Example Bad": "Submit-only validation",
+    "Severity": "Medium"
+  },
+  {
+    "No": "57",
+    "Category": "Forms",
+    "Issue": "Input Types",
+    "Platform": "All",
+    "Description": "Use appropriate input types",
+    "Do": "Use email tel number url etc",
+    "Don't": "Text input for everything",
+    "Code Example Good": "type='email'",
+    "Code Example Bad": "type='text' for email",
+    "Severity": "Medium"
+  },
+  {
+    "No": "58",
+    "Category": "Forms",
+    "Issue": "Autofill Support",
+    "Platform": "Web",
+    "Description": "Help browsers autofill correctly",
+    "Do": "Use autocomplete attribute properly",
+    "Don't": "Block or ignore autofill",
+    "Code Example Good": "autocomplete='email'",
+    "Code Example Bad": "autocomplete='off' everywhere",
+    "Severity": "Medium"
+  },
+  {
+    "No": "59",
+    "Category": "Forms",
+    "Issue": "Required Indicators",
+    "Platform": "All",
+    "Description": "Mark required fields clearly",
+    "Do": "Use asterisk or (required) text",
+    "Don't": "No indication of required fields",
+    "Code Example Good": "* required indicator",
+    "Code Example Bad": "Guess which are required",
+    "Severity": "Medium"
+  },
+  {
+    "No": "60",
+    "Category": "Forms",
+    "Issue": "Password Visibility",
+    "Platform": "All",
+    "Description": "Let users see password while typing",
+    "Do": "Toggle to show/hide password",
+    "Don't": "No visibility toggle",
+    "Code Example Good": "Show/hide password button",
+    "Code Example Bad": "Password always hidden",
+    "Severity": "Medium"
+  },
+  {
+    "No": "61",
+    "Category": "Forms",
+    "Issue": "Submit Feedback",
+    "Platform": "All",
+    "Description": "Confirm form submission status",
+    "Do": "Show loading then success/error state",
+    "Don't": "No feedback after submit",
+    "Code Example Good": "Loading -> Success message",
+    "Code Example Bad": "Button click with no response",
+    "Severity": "High"
+  },
+  {
+    "No": "62",
+    "Category": "Forms",
+    "Issue": "Input Affordance",
+    "Platform": "All",
+    "Description": "Inputs should look interactive",
+    "Do": "Use distinct input styling",
+    "Don't": "Inputs that look like plain text",
+    "Code Example Good": "Border/background on inputs",
+    "Code Example Bad": "Borderless inputs",
+    "Severity": "Medium"
+  },
+  {
+    "No": "63",
+    "Category": "Forms",
+    "Issue": "Mobile Keyboards",
+    "Platform": "Mobile",
+    "Description": "Show appropriate keyboard for input type",
+    "Do": "Use inputmode attribute",
+    "Don't": "Default keyboard for all inputs",
+    "Code Example Good": "inputmode='numeric'",
+    "Code Example Bad": "Text keyboard for numbers",
+    "Severity": "Medium"
+  },
+  {
+    "No": "64",
+    "Category": "Responsive",
+    "Issue": "Mobile First",
+    "Platform": "Web",
+    "Description": "Design for mobile then enhance for larger",
+    "Do": "Start with mobile styles then add breakpoints",
+    "Don't": "Desktop-first causing mobile issues",
+    "Code Example Good": "Default mobile + md: lg: xl:",
+    "Code Example Bad": "Desktop default + max-width queries",
+    "Severity": "Medium"
+  },
+  {
+    "No": "65",
+    "Category": "Responsive",
+    "Issue": "Breakpoint Testing",
+    "Platform": "Web",
+    "Description": "Test at all common screen sizes",
+    "Do": "Test at 320 375 414 768 1024 1440",
+    "Don't": "Only test on your device",
+    "Code Example Good": "Multiple device testing",
+    "Code Example Bad": "Single device development",
+    "Severity": "Medium"
+  },
+  {
+    "No": "66",
+    "Category": "Responsive",
+    "Issue": "Touch Friendly",
+    "Platform": "Web",
+    "Description": "Mobile layouts need touch-sized targets",
+    "Do": "Increase touch targets on mobile",
+    "Don't": "Same tiny buttons on mobile",
+    "Code Example Good": "Larger buttons on mobile",
+    "Code Example Bad": "Desktop-sized targets on mobile",
+    "Severity": "High"
+  },
+  {
+    "No": "67",
+    "Category": "Responsive",
+    "Issue": "Readable Font Size",
+    "Platform": "All",
+    "Description": "Text must be readable on all devices",
+    "Do": "Minimum 16px body text on mobile",
+    "Don't": "Tiny text on mobile",
+    "Code Example Good": "text-base or larger",
+    "Code Example Bad": "text-xs for body text",
+    "Severity": "High"
+  },
+  {
+    "No": "68",
+    "Category": "Responsive",
+    "Issue": "Viewport Meta",
+    "Platform": "Web",
+    "Description": "Set viewport for mobile devices",
+    "Do": "Use width=device-width initial-scale=1",
+    "Don't": "Missing or incorrect viewport",
+    "Code Example Good": "<meta name='viewport'...>",
+    "Code Example Bad": "No viewport meta tag",
+    "Severity": "High"
+  },
+  {
+    "No": "69",
+    "Category": "Responsive",
+    "Issue": "Horizontal Scroll",
+    "Platform": "Web",
+    "Description": "Avoid horizontal scrolling",
+    "Do": "Ensure content fits viewport width",
+    "Don't": "Content wider than viewport",
+    "Code Example Good": "max-w-full overflow-x-hidden",
+    "Code Example Bad": "Horizontal scrollbar on mobile",
+    "Severity": "High"
+  },
+  {
+    "No": "70",
+    "Category": "Responsive",
+    "Issue": "Image Scaling",
+    "Platform": "Web",
+    "Description": "Images should scale with container",
+    "Do": "Use max-width: 100% on images",
+    "Don't": "Fixed width images overflow",
+    "Code Example Good": "max-w-full h-auto",
+    "Code Example Bad": "width='800' fixed",
+    "Severity": "Medium"
+  },
+  {
+    "No": "71",
+    "Category": "Responsive",
+    "Issue": "Table Handling",
+    "Platform": "Web",
+    "Description": "Tables can overflow on mobile",
+    "Do": "Use horizontal scroll or card layout",
+    "Don't": "Wide tables breaking layout",
+    "Code Example Good": "overflow-x-auto wrapper",
+    "Code Example Bad": "Table overflows viewport",
+    "Severity": "Medium"
+  },
+  {
+    "No": "72",
+    "Category": "Typography",
+    "Issue": "Line Height",
+    "Platform": "All",
+    "Description": "Adequate line height improves readability",
+    "Do": "Use 1.5-1.75 for body text",
+    "Don't": "Cramped or excessive line height",
+    "Code Example Good": "leading-relaxed (1.625)",
+    "Code Example Bad": "leading-none (1)",
+    "Severity": "Medium"
+  },
+  {
+    "No": "73",
+    "Category": "Typography",
+    "Issue": "Line Length",
+    "Platform": "Web",
+    "Description": "Long lines are hard to read",
+    "Do": "Limit to 65-75 characters per line",
+    "Don't": "Full-width text on large screens",
+    "Code Example Good": "max-w-prose",
+    "Code Example Bad": "Full viewport width text",
+    "Severity": "Medium"
+  },
+  {
+    "No": "74",
+    "Category": "Typography",
+    "Issue": "Font Size Scale",
+    "Platform": "All",
+    "Description": "Consistent type hierarchy aids scanning",
+    "Do": "Use consistent modular scale",
+    "Don't": "Random font sizes",
+    "Code Example Good": "Type scale (12 14 16 18 24 32)",
+    "Code Example Bad": "Arbitrary sizes",
+    "Severity": "Medium"
+  },
+  {
+    "No": "75",
+    "Category": "Typography",
+    "Issue": "Font Loading",
+    "Platform": "Web",
+    "Description": "Fonts should load without layout shift",
+    "Do": "Reserve space with fallback font",
+    "Don't": "Layout shift when fonts load",
+    "Code Example Good": "font-display: swap + similar fallback",
+    "Code Example Bad": "No fallback font",
+    "Severity": "Medium"
+  },
+  {
+    "No": "76",
+    "Category": "Typography",
+    "Issue": "Contrast Readability",
+    "Platform": "All",
+    "Description": "Body text needs good contrast",
+    "Do": "Use darker text on light backgrounds",
+    "Don't": "Gray text on gray background",
+    "Code Example Good": "text-gray-900 on white",
+    "Code Example Bad": "text-gray-400 on gray-100",
+    "Severity": "High"
+  },
+  {
+    "No": "77",
+    "Category": "Typography",
+    "Issue": "Heading Clarity",
+    "Platform": "All",
+    "Description": "Headings should stand out from body",
+    "Do": "Clear size/weight difference",
+    "Don't": "Headings similar to body text",
+    "Code Example Good": "Bold + larger size",
+    "Code Example Bad": "Same size as body",
+    "Severity": "Medium"
+  },
+  {
+    "No": "78",
+    "Category": "Feedback",
+    "Issue": "Loading Indicators",
+    "Platform": "All",
+    "Description": "Show system status during waits",
+    "Do": "Show spinner/skeleton for operations > 300ms",
+    "Don't": "No feedback during loading",
+    "Code Example Good": "Skeleton or spinner",
+    "Code Example Bad": "Frozen UI",
+    "Severity": "High"
+  },
+  {
+    "No": "79",
+    "Category": "Feedback",
+    "Issue": "Empty States",
+    "Platform": "All",
+    "Description": "Guide users when no content exists",
+    "Do": "Show helpful message and action",
+    "Don't": "Blank empty screens",
+    "Code Example Good": "No items yet. Create one!",
+    "Code Example Bad": "Empty white space",
+    "Severity": "Medium"
+  },
+  {
+    "No": "80",
+    "Category": "Feedback",
+    "Issue": "Error Recovery",
+    "Platform": "All",
+    "Description": "Help users recover from errors",
+    "Do": "Provide clear next steps",
+    "Don't": "Error without recovery path",
+    "Code Example Good": "Try again button + help link",
+    "Code Example Bad": "Error message only",
+    "Severity": "Medium"
+  },
+  {
+    "No": "81",
+    "Category": "Feedback",
+    "Issue": "Progress Indicators",
+    "Platform": "All",
+    "Description": "Show progress for multi-step processes",
+    "Do": "Step indicators or progress bar",
+    "Don't": "No indication of progress",
+    "Code Example Good": "Step 2 of 4 indicator",
+    "Code Example Bad": "No step information",
+    "Severity": "Medium"
+  },
+  {
+    "No": "82",
+    "Category": "Feedback",
+    "Issue": "Toast Notifications",
+    "Platform": "All",
+    "Description": "Transient messages for non-critical info",
+    "Do": "Auto-dismiss after 3-5 seconds",
+    "Don't": "Toasts that never disappear",
+    "Code Example Good": "Auto-dismiss toast",
+    "Code Example Bad": "Persistent toast",
+    "Severity": "Medium"
+  },
+  {
+    "No": "83",
+    "Category": "Feedback",
+    "Issue": "Confirmation Messages",
+    "Platform": "All",
+    "Description": "Confirm successful actions",
+    "Do": "Brief success message",
+    "Don't": "Silent success",
+    "Code Example Good": "Saved successfully toast",
+    "Code Example Bad": "No confirmation",
+    "Severity": "Medium"
+  },
+  {
+    "No": "84",
+    "Category": "Content",
+    "Issue": "Truncation",
+    "Platform": "All",
+    "Description": "Handle long content gracefully",
+    "Do": "Truncate with ellipsis and expand option",
+    "Don't": "Overflow or broken layout",
+    "Code Example Good": "line-clamp-2 with expand",
+    "Code Example Bad": "Overflow or cut off",
+    "Severity": "Medium"
+  },
+  {
+    "No": "85",
+    "Category": "Content",
+    "Issue": "Date Formatting",
+    "Platform": "All",
+    "Description": "Use locale-appropriate date formats",
+    "Do": "Use relative or locale-aware dates",
+    "Don't": "Ambiguous date formats",
+    "Code Example Good": "2 hours ago or locale format",
+    "Code Example Bad": "01/02/03",
+    "Severity": "Low"
+  },
+  {
+    "No": "86",
+    "Category": "Content",
+    "Issue": "Number Formatting",
+    "Platform": "All",
+    "Description": "Format large numbers for readability",
+    "Do": "Use thousand separators or abbreviations",
+    "Don't": "Long unformatted numbers",
+    "Code Example Good": "1.2K or 1,234",
+    "Code Example Bad": "1234567",
+    "Severity": "Low"
+  },
+  {
+    "No": "87",
+    "Category": "Content",
+    "Issue": "Placeholder Content",
+    "Platform": "All",
+    "Description": "Show realistic placeholders during dev",
+    "Do": "Use realistic sample data",
+    "Don't": "Lorem ipsum everywhere",
+    "Code Example Good": "Real sample content",
+    "Code Example Bad": "Lorem ipsum",
+    "Severity": "Low"
+  },
+  {
+    "No": "88",
+    "Category": "Onboarding",
+    "Issue": "User Freedom",
+    "Platform": "All",
+    "Description": "Users should be able to skip tutorials",
+    "Do": "Provide Skip and Back buttons",
+    "Don't": "Force linear unskippable tour",
+    "Code Example Good": "Skip Tutorial button",
+    "Code Example Bad": "Locked overlay until finished",
+    "Severity": "Medium"
+  },
+  {
+    "No": "89",
+    "Category": "Search",
+    "Issue": "Autocomplete",
+    "Platform": "Web",
+    "Description": "Help users find results faster",
+    "Do": "Show predictions as user types",
+    "Don't": "Require full type and enter",
+    "Code Example Good": "Debounced fetch + dropdown",
+    "Code Example Bad": "No suggestions",
+    "Severity": "Medium"
+  },
+  {
+    "No": "90",
+    "Category": "Search",
+    "Issue": "No Results",
+    "Platform": "Web",
+    "Description": "Dead ends frustrate users",
+    "Do": "Show 'No results' with suggestions",
+    "Don't": "Blank screen or '0 results'",
+    "Code Example Good": "Try searching for X instead",
+    "Code Example Bad": "No results found.",
+    "Severity": "Medium"
+  },
+  {
+    "No": "91",
+    "Category": "Data Entry",
+    "Issue": "Bulk Actions",
+    "Platform": "Web",
+    "Description": "Editing one by one is tedious",
+    "Do": "Allow multi-select and bulk edit",
+    "Don't": "Single row actions only",
+    "Code Example Good": "Checkbox column + Action bar",
+    "Code Example Bad": "Repeated actions per row",
+    "Severity": "Low"
+  },
+  {
+    "No": "92",
+    "Category": "AI Interaction",
+    "Issue": "Disclaimer",
+    "Platform": "All",
+    "Description": "Users need to know they talk to AI",
+    "Do": "Clearly label AI generated content",
+    "Don't": "Present AI as human",
+    "Code Example Good": "AI Assistant label",
+    "Code Example Bad": "Fake human name without label",
+    "Severity": "High"
+  },
+  {
+    "No": "93",
+    "Category": "AI Interaction",
+    "Issue": "Streaming",
+    "Platform": "All",
+    "Description": "Waiting for full text is slow",
+    "Do": "Stream text response token by token",
+    "Don't": "Show loading spinner for 10s+",
+    "Code Example Good": "Typewriter effect",
+    "Code Example Bad": "Spinner until 100% complete",
+    "Severity": "Medium"
+  },
+  {
+    "No": "94",
+    "Category": "Spatial UI",
+    "Issue": "Gaze Hover",
+    "Platform": "VisionOS",
+    "Description": "Elements should respond to eye tracking before pinch",
+    "Do": "Scale/highlight element on look",
+    "Don't": "Static element until pinch",
+    "Code Example Good": "hoverEffect()",
+    "Code Example Bad": "onTap only",
+    "Severity": "High"
+  },
+  {
+    "No": "95",
+    "Category": "Spatial UI",
+    "Issue": "Depth Layering",
+    "Platform": "VisionOS",
+    "Description": "UI needs Z-depth to separate content from environment",
+    "Do": "Use glass material and z-offset",
+    "Don't": "Flat opaque panels blocking view",
+    "Code Example Good": ".glassBackgroundEffect()",
+    "Code Example Bad": "bg-white",
+    "Severity": "Medium"
+  },
+  {
+    "No": "96",
+    "Category": "Sustainability",
+    "Issue": "Auto-Play Video",
+    "Platform": "Web",
+    "Description": "Video consumes massive data and energy",
+    "Do": "Click-to-play or pause when off-screen",
+    "Don't": "Auto-play high-res video loops",
+    "Code Example Good": "playsInline muted preload='none'",
+    "Code Example Bad": "autoplay loop",
+    "Severity": "Medium"
+  },
+  {
+    "No": "97",
+    "Category": "Sustainability",
+    "Issue": "Asset Weight",
+    "Platform": "Web",
+    "Description": "Heavy 3D/Image assets increase carbon footprint",
+    "Do": "Compress and lazy load 3D models",
+    "Don't": "Load 50MB textures",
+    "Code Example Good": "Draco compression",
+    "Code Example Bad": "Raw .obj files",
+    "Severity": "Medium"
+  },
+  {
+    "No": "98",
+    "Category": "AI Interaction",
+    "Issue": "Feedback Loop",
+    "Platform": "All",
+    "Description": "AI needs user feedback to improve",
+    "Do": "Thumps up/down or 'Regenerate'",
+    "Don't": "Static output only",
+    "Code Example Good": "Feedback component",
+    "Code Example Bad": "Read-only text",
+    "Severity": "Low"
+  },
+  {
+    "No": "99",
+    "Category": "Accessibility",
+    "Issue": "Motion Sensitivity",
+    "Platform": "All",
+    "Description": "Parallax/Scroll-jacking causes nausea",
+    "Do": "Respect prefers-reduced-motion",
+    "Don't": "Force scroll effects",
+    "Code Example Good": "@media (prefers-reduced-motion)",
+    "Code Example Bad": "ScrollTrigger.create()",
+    "Severity": "High"
+  }
+]