[
{
"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"
}
]
