[{"data":1,"prerenderedAt":2715},["ShallowReactive",2],{"content-\u002Fplugins\u002Faio-design-system\u002Faio-uiux":3,"children-\u002Fplugins\u002Faio-design-system\u002Faio-uiux":2714},{"id":4,"title":5,"author":6,"body":7,"budget_tier":6,"build_tags":6,"created":6,"description":2706,"document_type":2707,"extension":2708,"game":6,"install":36,"investment_tier":6,"league":6,"meta":2709,"navigation":375,"patch":6,"path":2710,"plugin":24,"profit_per_hour":6,"ratings":6,"seo":2711,"skills_count":6,"status":6,"stem":2712,"strategy_tier":6,"tags":6,"updated":6,"version":6,"weight":6,"__hash__":2713},"content\u002Fplugins\u002Faio-design-system\u002Faio-uiux.md","aio-uiux",null,{"type":8,"value":9,"toc":2668},"minimark",[10,37,42,47,52,55,60,63,82,85,89,95,105,108,312,315,319,322,336,340,343,357,361,364,420,423,427,430,436,440,446,450,453,459,462,476,478,482,488,490,494,498,504,619,621,625,630,742,744,748,753,865,867,871,876,988,990,994,999,1111,1113,1117,1122,1234,1236,1240,1245,1427,1429,1433,1438,1550,1552,1556,1561,1673,1675,1679,1684,1808,1810,1814,1819,1930,1932,1936,1941,2039,2041,2045,2050,2148,2150,2154,2162,2276,2278,2282,2287,2399,2401,2405,2409,2470,2474,2477,2555,2557,2561,2660,2662],[11,12,13],"blockquote",{},[14,15,16,17,25,26,25,30,33,34],"p",{},"From plugin ",[18,19,21],"a",{"href":20},"\u002Fplugins\u002Faio-design-system",[22,23,24],"strong",{},"aio-design-system"," · ",[27,28,29],"code",{},"v1.0.2",[22,31,32],{},"Install:"," ",[27,35,36],{},"\u002Fplugin install aio-design-system@aiocean-plugins",[38,39,41],"h1",{"id":40},"uiux-design-advisor","UI\u002FUX Design Advisor",[11,43,44],{},[14,45,46],{},"\"Design is not just what it looks like and feels like. Design is how it works.\"\n— Steve Jobs",[48,49,51],"h2",{"id":50},"workflow-how-to-use-this-skill","Workflow: How to Use This Skill",[14,53,54],{},"When this skill is triggered, follow these steps. Do NOT just dump reference content — actively analyze the user's specific design challenge and provide targeted, actionable guidance.",[56,57,59],"h3",{"id":58},"step-1-understand-identify-the-design-challenge","Step 1: UNDERSTAND — Identify the Design Challenge",[14,61,62],{},"Before selecting references, understand:",[64,65,66,70,73,76,79],"ul",{},[67,68,69],"li",{},"What is being built? (component, page, full app, design system)",[67,71,72],{},"What's the context? (marketing site, SaaS dashboard, mobile app, e-commerce)",[67,74,75],{},"What aspect needs help? (visual design, accessibility, UX flow, performance)",[67,77,78],{},"What tech stack? (vanilla CSS, Tailwind, React, Vue, etc.)",[67,80,81],{},"Who are the users? (general public, power users, accessibility needs)",[14,83,84],{},"If the user's message already contains enough context, proceed directly to Step 2.",[56,86,88],{"id":87},"step-2-search-find-relevant-references","Step 2: SEARCH — Find Relevant References",[14,90,91,94],{},[22,92,93],{},"First, run semantic search"," with the user's design challenge to find the most relevant topics:",[96,97,103],"pre",{"className":98,"code":100,"language":101,"meta":102},[99],"language-bash","UX=\"${CLAUDE_PLUGIN_ROOT}\u002Fskills\u002Faio-uiux\u002Fscripts\"\nnpx tsx \"$UX\u002Fsearch-uiux.ts\" \"\u003Cuser's design challenge>\" --top 5 --json\n","bash","",[27,104,100],{"__ignoreMap":102},[14,106,107],{},"Read the full markdown file for each top result before proceeding. Then cross-reference with the routing table:",[109,110,111,124],"table",{},[112,113,114],"thead",{},[115,116,117,121],"tr",{},[118,119,120],"th",{},"Design Challenge",[118,122,123],{},"Start With",[125,126,127,138,148,158,168,178,188,198,208,218,228,238,248,258,268,278,292,302],"tbody",{},[115,128,129,135],{},[130,131,132],"td",{},[22,133,134],{},"Building a new component",[130,136,137],{},"Component Patterns → Design Systems → Accessibility",[115,139,140,145],{},[130,141,142],{},[22,143,144],{},"Making something look better",[130,146,147],{},"Visual Hierarchy → Whitespace → Color → Typography",[115,149,150,155],{},[130,151,152],{},[22,153,154],{},"Choosing colors",[130,156,157],{},"Color Theory → Color Harmonies → Semantic Colors → Accessibility Contrast",[115,159,160,165],{},[130,161,162],{},[22,163,164],{},"Typography decisions",[130,166,167],{},"Type Scale → Font Pairing → Readability → Fluid Typography",[115,169,170,175],{},[130,171,172],{},[22,173,174],{},"Layout \u002F spacing issues",[130,176,177],{},"Spacing Systems → CSS Grid → Flexbox → Content Width",[115,179,180,185],{},[130,181,182],{},[22,183,184],{},"Form design",[130,186,187],{},"Form Design → Form Accessibility → Error Messages → Validation",[115,189,190,195],{},[130,191,192],{},[22,193,194],{},"Navigation design",[130,196,197],{},"Navigation Patterns → Navigation Components → Mobile UX",[115,199,200,205],{},[130,201,202],{},[22,203,204],{},"Accessibility audit\u002Ffix",[130,206,207],{},"WCAG Guide → ARIA Patterns → Keyboard Nav → Testing Checklist",[115,209,210,215],{},[130,211,212],{},[22,213,214],{},"Animation \u002F transitions",[130,216,217],{},"Animation Principles → Motion System → CSS Transitions → Micro-animations",[115,219,220,225],{},[130,221,222],{},[22,223,224],{},"Performance concerns",[130,226,227],{},"Perceived Performance → Core Web Vitals → Image Optimization → Font Performance",[115,229,230,235],{},[130,231,232],{},[22,233,234],{},"Dark mode",[130,236,237],{},"Theming & Dark Mode → Semantic Colors → Color Accessibility",[115,239,240,245],{},[130,241,242],{},[22,243,244],{},"Responsive \u002F mobile",[130,246,247],{},"Mobile-First → Fluid Design → Responsive Patterns → Touch Targets",[115,249,250,255],{},[130,251,252],{},[22,253,254],{},"Design system setup",[130,256,257],{},"Design Tokens → Atomic Design → Component API → Tailwind Patterns",[115,259,260,265],{},[130,261,262],{},[22,263,264],{},"UX flow \u002F user behavior",[130,266,267],{},"UX Psychology → UX Laws → Decision Making → Cognitive Load",[115,269,270,275],{},[130,271,272],{},[22,273,274],{},"Writing UI text",[130,276,277],{},"Microcopy → Error Messages → Voice & Tone → Conversion Copy",[115,279,280,285],{},[130,281,282],{},[22,283,284],{},"Modern CSS techniques",[130,286,287,288,291],{},"Custom Properties → Container Queries → ",[289,290],"has",{},"() → Cascade Layers",[115,293,294,299],{},[130,295,296],{},[22,297,298],{},"Loading \u002F empty states",[130,300,301],{},"State Management UX → Perceived Performance → Loading Patterns → Skeleton Screens",[115,303,304,309],{},[130,305,306],{},[22,307,308],{},"Buttons \u002F CTAs",[130,310,311],{},"Buttons → Visual Hierarchy → Von Restorff Effect → Conversion Copy",[14,313,314],{},"State which references you selected and why they fit.",[56,316,318],{"id":317},"step-3-apply-provide-targeted-guidance","Step 3: APPLY — Provide Targeted Guidance",[14,320,321],{},"For each relevant reference area, apply it to the user's specific situation:",[64,323,324,327,330,333],{},[67,325,326],{},"State the principle or pattern (one sentence)",[67,328,329],{},"Show how it applies to their specific case",[67,331,332],{},"Provide concrete code (CSS\u002FHTML) when applicable",[67,334,335],{},"Flag any accessibility requirements",[56,337,339],{"id":338},"step-4-synthesize-combine-into-actionable-advice","Step 4: SYNTHESIZE — Combine Into Actionable Advice",[14,341,342],{},"Merge insights into:",[64,344,345,348,351,354],{},[67,346,347],{},"Specific implementation recommendation with code",[67,349,350],{},"Priority order (what to fix\u002Fimplement first)",[67,352,353],{},"Key tradeoffs to consider",[67,355,356],{},"Accessibility checklist for the specific case",[56,358,360],{"id":359},"step-5-review-check-against-quality-criteria","Step 5: REVIEW — Check Against Quality Criteria",[14,362,363],{},"Verify the recommendation against:",[64,365,368,378,384,390,396,402,408,414],{"className":366},[367],"contains-task-list",[67,369,372,377],{"className":370},[371],"task-list-item",[373,374],"input",{"disabled":375,"type":376},true,"checkbox"," Visual hierarchy is clear (squint test)",[67,379,381,383],{"className":380},[371],[373,382],{"disabled":375,"type":376}," Spacing is consistent (uses system, not arbitrary values)",[67,385,387,389],{"className":386},[371],[373,388],{"disabled":375,"type":376}," Color contrast meets WCAG AA (4.5:1 text, 3:1 UI)",[67,391,393,395],{"className":392},[371],[373,394],{"disabled":375,"type":376}," Interactive elements have all states (hover, focus, active, disabled)",[67,397,399,401],{"className":398},[371],[373,400],{"disabled":375,"type":376}," Touch targets are ≥44×44px on mobile",[67,403,405,407],{"className":404},[371],[373,406],{"disabled":375,"type":376}," Animations respect prefers-reduced-motion",[67,409,411,413],{"className":410},[371],[373,412],{"disabled":375,"type":376}," Text is readable (45-75 char line length, 1.4-1.6 line-height)",[67,415,417,419],{"className":416},[371],[373,418],{"disabled":375,"type":376}," Component is keyboard navigable",[421,422],"hr",{},[48,424,426],{"id":425},"scripts","Scripts",[14,428,429],{},"Before calling any script, resolve the scripts directory (version may vary):",[96,431,434],{"className":432,"code":433,"language":101,"meta":102},[99],"UX=\"${CLAUDE_PLUGIN_ROOT}\u002Fskills\u002Faio-uiux\u002Fscripts\"\n",[27,435,433],{"__ignoreMap":102},[56,437,439],{"id":438},"list-topics","List Topics",[96,441,444],{"className":442,"code":443,"language":101,"meta":102},[99],"$UX\u002Flist-topics.sh                          # All topics by category\n$UX\u002Flist-topics.sh --category accessibility  # Filter by category\n$UX\u002Flist-topics.sh --search \"color\"          # Search by keyword\n$UX\u002Flist-topics.sh --count                   # Quick count\n",[27,445,443],{"__ignoreMap":102},[56,447,449],{"id":448},"semantic-search","Semantic Search",[14,451,452],{},"Find relevant topics by meaning, not just keywords. Uses pre-computed embeddings (snowflake-arctic-embed-xs, 384-dim, runs locally).",[96,454,457],{"className":455,"code":456,"language":101,"meta":102},[99],"npx tsx \"$UX\u002Fsearch-uiux.ts\" \"how to design accessible forms\"\nnpx tsx \"$UX\u002Fsearch-uiux.ts\" \"dark mode color palette\" --top 3\nnpx tsx \"$UX\u002Fsearch-uiux.ts\" \"button component best practices\" --json\n",[27,458,456],{"__ignoreMap":102},[14,460,461],{},"Options:",[64,463,464,470],{},[67,465,466,469],{},[27,467,468],{},"--top N"," — Number of results (default: 5)",[67,471,472,475],{},[27,473,474],{},"--json"," — Output as JSON for programmatic use",[421,477],{},[48,479,481],{"id":480},"important","Important",[14,483,484,487],{},[22,485,486],{},"Always run semantic search first before selecting references."," The search uses embeddings to find the most relevant topics for the user's specific design challenge — this is more reliable than guessing from the catalog. After searching, read the full markdown file for each selected topic.",[421,489],{},[48,491,493],{"id":492},"reference-catalog","Reference Catalog",[56,495,497],{"id":496},"_01-visual-design-foundations","01. Visual Design Foundations",[14,499,500],{},[501,502,503],"em",{},"Core principles of visual communication and composition",[109,505,506,519],{},[112,507,508],{},[115,509,510,513,516],{},[118,511,512],{},"Topic",[118,514,515],{},"Core Idea",[118,517,518],{},"When to Use",[125,520,521,535,549,563,577,591,605],{},[115,522,523,529,532],{},[130,524,525],{},[18,526,528],{"href":527},".\u002Freferences\u002F01-visual-design\u002F01-gestalt-principles","Gestalt Principles",[130,530,531],{},"How humans perceive visual groups",[130,533,534],{},"Organizing UI elements, creating clear relationships",[115,536,537,543,546],{},[130,538,539],{},[18,540,542],{"href":541},".\u002Freferences\u002F01-visual-design\u002F02-visual-hierarchy","Visual Hierarchy",[130,544,545],{},"Guide the eye through importance",[130,547,548],{},"Every layout — primary, secondary, tertiary emphasis",[115,550,551,557,560],{},[130,552,553],{},[18,554,556],{"href":555},".\u002Freferences\u002F01-visual-design\u002F03-golden-ratio-composition","Golden Ratio & Composition",[130,558,559],{},"Mathematical harmony in layout",[130,561,562],{},"Hero sections, image cropping, layout proportions",[115,564,565,571,574],{},[130,566,567],{},[18,568,570],{"href":569},".\u002Freferences\u002F01-visual-design\u002F04-whitespace-negative-space","Whitespace & Negative Space",[130,572,573],{},"Space as a design element",[130,575,576],{},"Feeling cramped, improving readability, luxury feel",[115,578,579,585,588],{},[130,580,581],{},[18,582,584],{"href":583},".\u002Freferences\u002F01-visual-design\u002F05-visual-weight-balance","Visual Weight & Balance",[130,586,587],{},"How elements attract attention",[130,589,590],{},"Balancing asymmetric layouts, focal points",[115,592,593,599,602],{},[130,594,595],{},[18,596,598],{"href":597},".\u002Freferences\u002F01-visual-design\u002F06-contrast-emphasis","Contrast & Emphasis",[130,600,601],{},"Difference creates focus",[130,603,604],{},"CTAs, important information, visual interest",[115,606,607,613,616],{},[130,608,609],{},[18,610,612],{"href":611},".\u002Freferences\u002F01-visual-design\u002F07-alignment-grids","Alignment & Grids",[130,614,615],{},"Order through alignment",[130,617,618],{},"Any layout — grids, optical alignment, consistency",[421,620],{},[56,622,624],{"id":623},"_02-typography","02. Typography",[14,626,627],{},[501,628,629],{},"Type systems, font pairing, and text rendering",[109,631,632,642],{},[112,633,634],{},[115,635,636,638,640],{},[118,637,512],{},[118,639,515],{},[118,641,518],{},[125,643,644,658,672,686,700,714,728],{},[115,645,646,652,655],{},[130,647,648],{},[18,649,651],{"href":650},".\u002Freferences\u002F02-typography\u002F01-type-scale-systems","Type Scale Systems",[130,653,654],{},"Mathematical size progression",[130,656,657],{},"Setting up heading\u002Fbody sizes",[115,659,660,666,669],{},[130,661,662],{},[18,663,665],{"href":664},".\u002Freferences\u002F02-typography\u002F02-font-pairing","Font Pairing",[130,667,668],{},"Combining typefaces harmoniously",[130,670,671],{},"Choosing fonts for a project",[115,673,674,680,683],{},[130,675,676],{},[18,677,679],{"href":678},".\u002Freferences\u002F02-typography\u002F03-vertical-rhythm","Vertical Rhythm",[130,681,682],{},"Consistent spacing rhythm",[130,684,685],{},"Page-level text layout",[115,687,688,694,697],{},[130,689,690],{},[18,691,693],{"href":692},".\u002Freferences\u002F02-typography\u002F04-fluid-responsive-typography","Fluid Responsive Typography",[130,695,696],{},"Type that scales with viewport",[130,698,699],{},"Responsive text without breakpoints",[115,701,702,708,711],{},[130,703,704],{},[18,705,707],{"href":706},".\u002Freferences\u002F02-typography\u002F05-readability-legibility","Readability & Legibility",[130,709,710],{},"Optimal reading experience",[130,712,713],{},"Body text, long-form content",[115,715,716,722,725],{},[130,717,718],{},[18,719,721],{"href":720},".\u002Freferences\u002F02-typography\u002F06-opentype-variable-fonts","OpenType & Variable Fonts",[130,723,724],{},"Advanced font features",[130,726,727],{},"Performance, design polish",[115,729,730,736,739],{},[130,731,732],{},[18,733,735],{"href":734},".\u002Freferences\u002F02-typography\u002F07-web-font-loading","Web Font Loading",[130,737,738],{},"Fast font delivery",[130,740,741],{},"Performance optimization, CLS prevention",[421,743],{},[56,745,747],{"id":746},"_03-color-science","03. Color Science",[14,749,750],{},[501,751,752],{},"Color theory, spaces, palettes, and accessibility",[109,754,755,765],{},[112,756,757],{},[115,758,759,761,763],{},[118,760,512],{},[118,762,515],{},[118,764,518],{},[125,766,767,781,795,809,823,837,851],{},[115,768,769,775,778],{},[130,770,771],{},[18,772,774],{"href":773},".\u002Freferences\u002F03-color-science\u002F01-color-theory-fundamentals","Color Theory Fundamentals",[130,776,777],{},"Color meaning and emotion",[130,779,780],{},"Choosing brand\u002FUI colors",[115,782,783,789,792],{},[130,784,785],{},[18,786,788],{"href":787},".\u002Freferences\u002F03-color-science\u002F02-color-harmonies","Color Harmonies",[130,790,791],{},"Complementary, analogous, triadic",[130,793,794],{},"Building color palettes",[115,796,797,803,806],{},[130,798,799],{},[18,800,802],{"href":801},".\u002Freferences\u002F03-color-science\u002F03-color-spaces-modern-css","Color Spaces & Modern CSS",[130,804,805],{},"oklch, Display P3, color-mix()",[130,807,808],{},"Modern CSS color implementation",[115,810,811,817,820],{},[130,812,813],{},[18,814,816],{"href":815},".\u002Freferences\u002F03-color-science\u002F04-systematic-palette-generation","Systematic Palette Generation",[130,818,819],{},"Building 50-950 shade scales",[130,821,822],{},"Design system color setup",[115,824,825,831,834],{},[130,826,827],{},[18,828,830],{"href":829},".\u002Freferences\u002F03-color-science\u002F05-semantic-color-systems","Semantic Color Systems",[130,832,833],{},"Primitive → semantic → component",[130,835,836],{},"Color token architecture",[115,838,839,845,848],{},[130,840,841],{},[18,842,844],{"href":843},".\u002Freferences\u002F03-color-science\u002F06-color-accessibility-contrast","Color Accessibility & Contrast",[130,846,847],{},"WCAG, APCA, color blindness",[130,849,850],{},"Every color decision",[115,852,853,859,862],{},[130,854,855],{},[18,856,858],{"href":857},".\u002Freferences\u002F03-color-science\u002F07-data-visualization-colors","Data Visualization Colors",[130,860,861],{},"Sequential, diverging, qualitative",[130,863,864],{},"Charts, graphs, dashboards",[421,866],{},[56,868,870],{"id":869},"_04-layout-spacing","04. Layout & Spacing",[14,872,873],{},[501,874,875],{},"Grid systems, spacing tokens, and responsive layout",[109,877,878,888],{},[112,879,880],{},[115,881,882,884,886],{},[118,883,512],{},[118,885,515],{},[118,887,518],{},[125,889,890,904,918,932,946,960,974],{},[115,891,892,898,901],{},[130,893,894],{},[18,895,897],{"href":896},".\u002Freferences\u002F04-layout-spacing\u002F01-spacing-systems","Spacing Systems",[130,899,900],{},"4pt\u002F8pt grid, spacing tokens",[130,902,903],{},"Every layout decision",[115,905,906,912,915],{},[130,907,908],{},[18,909,911],{"href":910},".\u002Freferences\u002F04-layout-spacing\u002F02-css-grid-mastery","CSS Grid Mastery",[130,913,914],{},"Two-dimensional layout",[130,916,917],{},"Page layouts, dashboards, galleries",[115,919,920,926,929],{},[130,921,922],{},[18,923,925],{"href":924},".\u002Freferences\u002F04-layout-spacing\u002F03-flexbox-patterns","Flexbox Patterns",[130,927,928],{},"One-dimensional layout",[130,930,931],{},"Component-level layout, alignment",[115,933,934,940,943],{},[130,935,936],{},[18,937,939],{"href":938},".\u002Freferences\u002F04-layout-spacing\u002F04-responsive-layout-strategies","Responsive Layout Strategies",[130,941,942],{},"Adapting to screen sizes",[130,944,945],{},"Every responsive design",[115,947,948,954,957],{},[130,949,950],{},[18,951,953],{"href":952},".\u002Freferences\u002F04-layout-spacing\u002F05-z-index-layering","Z-Index & Layering",[130,955,956],{},"Stacking context management",[130,958,959],{},"Modals, dropdowns, tooltips, toasts",[115,961,962,968,971],{},[130,963,964],{},[18,965,967],{"href":966},".\u002Freferences\u002F04-layout-spacing\u002F06-box-model-sizing","Box Model & Sizing",[130,969,970],{},"Box-sizing, margins, logical props",[130,972,973],{},"Layout debugging, i18n",[115,975,976,982,985],{},[130,977,978],{},[18,979,981],{"href":980},".\u002Freferences\u002F04-layout-spacing\u002F07-content-width-containers","Content Width & Containers",[130,983,984],{},"Max-width, container patterns",[130,986,987],{},"Readable content, full-bleed layouts",[421,989],{},[56,991,993],{"id":992},"_05-accessibility-a11y","05. Accessibility (a11y)",[14,995,996],{},[501,997,998],{},"WCAG 2.2, ARIA, keyboard navigation, screen readers",[109,1000,1001,1011],{},[112,1002,1003],{},[115,1004,1005,1007,1009],{},[118,1006,512],{},[118,1008,515],{},[118,1010,518],{},[125,1012,1013,1027,1041,1055,1069,1083,1097],{},[115,1014,1015,1021,1024],{},[130,1016,1017],{},[18,1018,1020],{"href":1019},".\u002Freferences\u002F05-accessibility\u002F01-wcag-22-essential-guide","WCAG 2.2 Essential Guide",[130,1022,1023],{},"Web accessibility guidelines",[130,1025,1026],{},"Every project — baseline requirements",[115,1028,1029,1035,1038],{},[130,1030,1031],{},[18,1032,1034],{"href":1033},".\u002Freferences\u002F05-accessibility\u002F02-aria-patterns-reference","ARIA Patterns Reference",[130,1036,1037],{},"Widget roles and states",[130,1039,1040],{},"Custom interactive components",[115,1042,1043,1049,1052],{},[130,1044,1045],{},[18,1046,1048],{"href":1047},".\u002Freferences\u002F05-accessibility\u002F03-keyboard-navigation","Keyboard Navigation",[130,1050,1051],{},"Tab order, focus management",[130,1053,1054],{},"Every interactive element",[115,1056,1057,1063,1066],{},[130,1058,1059],{},[18,1060,1062],{"href":1061},".\u002Freferences\u002F05-accessibility\u002F04-screen-reader-optimization","Screen Reader Optimization",[130,1064,1065],{},"Semantic HTML, live regions",[130,1067,1068],{},"Dynamic content, SPAs",[115,1070,1071,1077,1080],{},[130,1072,1073],{},[18,1074,1076],{"href":1075},".\u002Freferences\u002F05-accessibility\u002F05-color-motion-accessibility","Color & Motion Accessibility",[130,1078,1079],{},"Contrast, reduced-motion",[130,1081,1082],{},"Color decisions, animations",[115,1084,1085,1091,1094],{},[130,1086,1087],{},[18,1088,1090],{"href":1089},".\u002Freferences\u002F05-accessibility\u002F06-form-accessibility","Form Accessibility",[130,1092,1093],{},"Labels, errors, validation",[130,1095,1096],{},"Every form",[115,1098,1099,1105,1108],{},[130,1100,1101],{},[18,1102,1104],{"href":1103},".\u002Freferences\u002F05-accessibility\u002F07-testing-checklist","Testing Checklist",[130,1106,1107],{},"Automated + manual testing",[130,1109,1110],{},"Pre-launch, code review",[421,1112],{},[56,1114,1116],{"id":1115},"_06-ux-psychology","06. UX Psychology",[14,1118,1119],{},[501,1120,1121],{},"Cognitive psychology and behavioral design for interfaces",[109,1123,1124,1134],{},[112,1125,1126],{},[115,1127,1128,1130,1132],{},[118,1129,512],{},[118,1131,515],{},[118,1133,518],{},[125,1135,1136,1150,1164,1178,1192,1206,1220],{},[115,1137,1138,1144,1147],{},[130,1139,1140],{},[18,1141,1143],{"href":1142},".\u002Freferences\u002F06-ux-psychology\u002F01-cognitive-load","Cognitive Load",[130,1145,1146],{},"Reduce mental effort",[130,1148,1149],{},"Complex interfaces, forms, onboarding",[115,1151,1152,1158,1161],{},[130,1153,1154],{},[18,1155,1157],{"href":1156},".\u002Freferences\u002F06-ux-psychology\u002F02-attention-perception","Attention & Perception",[130,1159,1160],{},"How users scan and notice",[130,1162,1163],{},"CTA placement, important info display",[115,1165,1166,1172,1175],{},[130,1167,1168],{},[18,1169,1171],{"href":1170},".\u002Freferences\u002F06-ux-psychology\u002F03-decision-making","Decision Making",[130,1173,1174],{},"Choice architecture",[130,1176,1177],{},"Options, pricing, configuration",[115,1179,1180,1186,1189],{},[130,1181,1182],{},[18,1183,1185],{"href":1184},".\u002Freferences\u002F06-ux-psychology\u002F04-persuasion-influence","Persuasion & Influence",[130,1187,1188],{},"Ethical persuasion patterns",[130,1190,1191],{},"Landing pages, conversions, trust",[115,1193,1194,1200,1203],{},[130,1195,1196],{},[18,1197,1199],{"href":1198},".\u002Freferences\u002F06-ux-psychology\u002F05-emotional-design","Emotional Design",[130,1201,1202],{},"Visceral, behavioral, reflective",[130,1204,1205],{},"Brand experience, delight, trust",[115,1207,1208,1214,1217],{},[130,1209,1210],{},[18,1211,1213],{"href":1212},".\u002Freferences\u002F06-ux-psychology\u002F06-habit-formation","Habit Formation",[130,1215,1216],{},"Hook model, engagement loops",[130,1218,1219],{},"Product engagement, onboarding",[115,1221,1222,1228,1231],{},[130,1223,1224],{},[18,1225,1227],{"href":1226},".\u002Freferences\u002F06-ux-psychology\u002F07-memory-learning","Memory & Learning",[130,1229,1230],{},"Recognition, recall, mental models",[130,1232,1233],{},"Navigation, onboarding, help",[421,1235],{},[56,1237,1239],{"id":1238},"_07-ux-laws","07. UX Laws",[14,1241,1242],{},[501,1243,1244],{},"30+ evidence-based laws for interface design",[109,1246,1247,1257],{},[112,1248,1249],{},[115,1250,1251,1253,1255],{},[118,1252,512],{},[118,1254,515],{},[118,1256,518],{},[125,1258,1259,1273,1287,1301,1315,1329,1343,1357,1371,1385,1399,1413],{},[115,1260,1261,1267,1270],{},[130,1262,1263],{},[18,1264,1266],{"href":1265},".\u002Freferences\u002F07-ux-laws\u002F01-fitts-law","Fitts's Law",[130,1268,1269],{},"Target size × distance = time",[130,1271,1272],{},"Button sizing, touch targets, CTA placement",[115,1274,1275,1281,1284],{},[130,1276,1277],{},[18,1278,1280],{"href":1279},".\u002Freferences\u002F07-ux-laws\u002F02-hicks-law","Hick's Law",[130,1282,1283],{},"More choices = slower decisions",[130,1285,1286],{},"Menu design, option reduction",[115,1288,1289,1295,1298],{},[130,1290,1291],{},[18,1292,1294],{"href":1293},".\u002Freferences\u002F07-ux-laws\u002F03-jakobs-law","Jakob's Law",[130,1296,1297],{},"Users prefer familiar patterns",[130,1299,1300],{},"Convention decisions, innovation risk",[115,1302,1303,1309,1312],{},[130,1304,1305],{},[18,1306,1308],{"href":1307},".\u002Freferences\u002F07-ux-laws\u002F04-millers-law","Miller's Law",[130,1310,1311],{},"7±2 chunks in working memory",[130,1313,1314],{},"Navigation, grouping, information architecture",[115,1316,1317,1323,1326],{},[130,1318,1319],{},[18,1320,1322],{"href":1321},".\u002Freferences\u002F07-ux-laws\u002F05-teslers-law","Tesler's Law",[130,1324,1325],{},"Complexity can't be removed",[130,1327,1328],{},"Smart defaults, progressive disclosure",[115,1330,1331,1337,1340],{},[130,1332,1333],{},[18,1334,1336],{"href":1335},".\u002Freferences\u002F07-ux-laws\u002F06-doherty-threshold","Doherty Threshold",[130,1338,1339],{},"400ms for flow state",[130,1341,1342],{},"Loading optimization, perceived performance",[115,1344,1345,1351,1354],{},[130,1346,1347],{},[18,1348,1350],{"href":1349},".\u002Freferences\u002F07-ux-laws\u002F07-aesthetic-usability","Aesthetic-Usability",[130,1352,1353],{},"Beautiful = perceived usable",[130,1355,1356],{},"Visual polish investment",[115,1358,1359,1365,1368],{},[130,1360,1361],{},[18,1362,1364],{"href":1363},".\u002Freferences\u002F07-ux-laws\u002F08-von-restorff-effect","Von Restorff Effect",[130,1366,1367],{},"Distinctive items remembered",[130,1369,1370],{},"CTAs, badges, highlights",[115,1372,1373,1379,1382],{},[130,1374,1375],{},[18,1376,1378],{"href":1377},".\u002Freferences\u002F07-ux-laws\u002F09-peak-end-rule","Peak-End Rule",[130,1380,1381],{},"Peaks and endings matter most",[130,1383,1384],{},"Onboarding, checkout, error recovery",[115,1386,1387,1393,1396],{},[130,1388,1389],{},[18,1390,1392],{"href":1391},".\u002Freferences\u002F07-ux-laws\u002F10-serial-position-effect","Serial Position Effect",[130,1394,1395],{},"First\u002Flast items remembered",[130,1397,1398],{},"Navigation order, list design",[115,1400,1401,1407,1410],{},[130,1402,1403],{},[18,1404,1406],{"href":1405},".\u002Freferences\u002F07-ux-laws\u002F11-goal-gradient-effect","Goal-Gradient Effect",[130,1408,1409],{},"Acceleration near completion",[130,1411,1412],{},"Progress bars, multi-step flows",[115,1414,1415,1421,1424],{},[130,1416,1417],{},[18,1418,1420],{"href":1419},".\u002Freferences\u002F07-ux-laws\u002F12-more-ux-laws","More UX Laws",[130,1422,1423],{},"Postel's, Weber-Fechner, Prägnanz, + more",[130,1425,1426],{},"Comprehensive reference",[421,1428],{},[56,1430,1432],{"id":1431},"_08-interaction-design","08. Interaction Design",[14,1434,1435],{},[501,1436,1437],{},"Forms, navigation, states, and user flows",[109,1439,1440,1450],{},[112,1441,1442],{},[115,1443,1444,1446,1448],{},[118,1445,512],{},[118,1447,515],{},[118,1449,518],{},[125,1451,1452,1466,1480,1494,1508,1522,1536],{},[115,1453,1454,1460,1463],{},[130,1455,1456],{},[18,1457,1459],{"href":1458},".\u002Freferences\u002F08-interaction-design\u002F01-form-design","Form Design",[130,1461,1462],{},"Input types, validation, flow",[130,1464,1465],{},"Building any form",[115,1467,1468,1474,1477],{},[130,1469,1470],{},[18,1471,1473],{"href":1472},".\u002Freferences\u002F08-interaction-design\u002F02-navigation-patterns","Navigation Patterns",[130,1475,1476],{},"Navbar, sidebar, tabs, breadcrumbs",[130,1478,1479],{},"Information architecture",[115,1481,1482,1488,1491],{},[130,1483,1484],{},[18,1485,1487],{"href":1486},".\u002Freferences\u002F08-interaction-design\u002F03-state-management-ux","State Management UX",[130,1489,1490],{},"Loading, empty, error, success",[130,1492,1493],{},"Every interactive component",[115,1495,1496,1502,1505],{},[130,1497,1498],{},[18,1499,1501],{"href":1500},".\u002Freferences\u002F08-interaction-design\u002F04-micro-interactions","Micro-interactions",[130,1503,1504],{},"Trigger, rule, feedback, loop",[130,1506,1507],{},"Adding polish, user feedback",[115,1509,1510,1516,1519],{},[130,1511,1512],{},[18,1513,1515],{"href":1514},".\u002Freferences\u002F08-interaction-design\u002F05-feedback-patterns","Feedback Patterns",[130,1517,1518],{},"Toasts, alerts, progress, undo",[130,1520,1521],{},"System-to-user communication",[115,1523,1524,1530,1533],{},[130,1525,1526],{},[18,1527,1529],{"href":1528},".\u002Freferences\u002F08-interaction-design\u002F06-search-filter-sort","Search, Filter & Sort",[130,1531,1532],{},"Search input, facets, results",[130,1534,1535],{},"Data-heavy interfaces",[115,1537,1538,1544,1547],{},[130,1539,1540],{},[18,1541,1543],{"href":1542},".\u002Freferences\u002F08-interaction-design\u002F07-drag-drop-gestures","Drag, Drop & Gestures",[130,1545,1546],{},"Drag handles, touch gestures",[130,1548,1549],{},"Sortable lists, kanban, mobile",[421,1551],{},[56,1553,1555],{"id":1554},"_09-motion-animation","09. Motion & Animation",[14,1557,1558],{},[501,1559,1560],{},"Animation principles, CSS transitions, scroll-driven effects",[109,1562,1563,1573],{},[112,1564,1565],{},[115,1566,1567,1569,1571],{},[118,1568,512],{},[118,1570,515],{},[118,1572,518],{},[125,1574,1575,1589,1603,1617,1631,1645,1659],{},[115,1576,1577,1583,1586],{},[130,1578,1579],{},[18,1580,1582],{"href":1581},".\u002Freferences\u002F09-motion-animation\u002F01-animation-principles","Animation Principles",[130,1584,1585],{},"Disney's 12 principles for UI",[130,1587,1588],{},"Understanding \"why\" behind motion",[115,1590,1591,1597,1600],{},[130,1592,1593],{},[18,1594,1596],{"href":1595},".\u002Freferences\u002F09-motion-animation\u002F02-motion-design-system","Motion Design System",[130,1598,1599],{},"Duration\u002Feasing token system",[130,1601,1602],{},"Setting up consistent motion",[115,1604,1605,1611,1614],{},[130,1606,1607],{},[18,1608,1610],{"href":1609},".\u002Freferences\u002F09-motion-animation\u002F03-css-transitions","CSS Transitions",[130,1612,1613],{},"Property transitions, 60fps",[130,1615,1616],{},"Hover, focus, state changes",[115,1618,1619,1625,1628],{},[130,1620,1621],{},[18,1622,1624],{"href":1623},".\u002Freferences\u002F09-motion-animation\u002F04-css-keyframe-animations","CSS Keyframe Animations",[130,1626,1627],{},"@keyframes, multi-step",[130,1629,1630],{},"Enter\u002Fexit, loading, attention",[115,1632,1633,1639,1642],{},[130,1634,1635],{},[18,1636,1638],{"href":1637},".\u002Freferences\u002F09-motion-animation\u002F05-scroll-driven-animations","Scroll-Driven Animations",[130,1640,1641],{},"Scroll progress, reveal on scroll",[130,1643,1644],{},"Landing pages, storytelling",[115,1646,1647,1653,1656],{},[130,1648,1649],{},[18,1650,1652],{"href":1651},".\u002Freferences\u002F09-motion-animation\u002F06-page-view-transitions","Page & View Transitions",[130,1654,1655],{},"View Transitions API",[130,1657,1658],{},"Route changes, shared elements",[115,1660,1661,1667,1670],{},[130,1662,1663],{},[18,1664,1666],{"href":1665},".\u002Freferences\u002F09-motion-animation\u002F07-micro-animation-library","Micro-Animation Library",[130,1668,1669],{},"25+ copy-paste CSS animations",[130,1671,1672],{},"Quick implementation reference",[421,1674],{},[56,1676,1678],{"id":1677},"_10-component-patterns","10. Component Patterns",[14,1680,1681],{},[501,1682,1683],{},"Design patterns for UI components",[109,1685,1686,1696],{},[112,1687,1688],{},[115,1689,1690,1692,1694],{},[118,1691,512],{},[118,1693,515],{},[118,1695,518],{},[125,1697,1698,1712,1726,1740,1754,1767,1780,1794],{},[115,1699,1700,1706,1709],{},[130,1701,1702],{},[18,1703,1705],{"href":1704},".\u002Freferences\u002F10-component-patterns\u002F01-buttons","Buttons",[130,1707,1708],{},"Hierarchy, states, sizing",[130,1710,1711],{},"Every interactive UI",[115,1713,1714,1720,1723],{},[130,1715,1716],{},[18,1717,1719],{"href":1718},".\u002Freferences\u002F10-component-patterns\u002F02-forms-inputs","Forms & Inputs",[130,1721,1722],{},"Input types, states, validation",[130,1724,1725],{},"Building forms",[115,1727,1728,1734,1737],{},[130,1729,1730],{},[18,1731,1733],{"href":1732},".\u002Freferences\u002F10-component-patterns\u002F03-cards-containers","Cards & Containers",[130,1735,1736],{},"Card anatomy, grid layouts",[130,1738,1739],{},"Content display",[115,1741,1742,1748,1751],{},[130,1743,1744],{},[18,1745,1747],{"href":1746},".\u002Freferences\u002F10-component-patterns\u002F04-modals-dialogs-sheets","Modals, Dialogs & Sheets",[130,1749,1750],{},"When to use which overlay",[130,1752,1753],{},"Confirmations, forms, settings",[115,1755,1756,1762,1765],{},[130,1757,1758],{},[18,1759,1761],{"href":1760},".\u002Freferences\u002F10-component-patterns\u002F05-tables-data-display","Tables & Data Display",[130,1763,1764],{},"Sorting, filtering, responsive",[130,1766,1535],{},[115,1768,1769,1775,1777],{},[130,1770,1771],{},[18,1772,1774],{"href":1773},".\u002Freferences\u002F10-component-patterns\u002F06-navigation-components","Navigation Components",[130,1776,1476],{},[130,1778,1779],{},"App chrome, wayfinding",[115,1781,1782,1788,1791],{},[130,1783,1784],{},[18,1785,1787],{"href":1786},".\u002Freferences\u002F10-component-patterns\u002F07-feedback-components","Feedback Components",[130,1789,1790],{},"Toasts, alerts, badges, progress",[130,1792,1793],{},"System feedback",[115,1795,1796,1802,1805],{},[130,1797,1798],{},[18,1799,1801],{"href":1800},".\u002Freferences\u002F10-component-patterns\u002F08-complex-components","Complex Components",[130,1803,1804],{},"Command palette, data grid, tree",[130,1806,1807],{},"Advanced interfaces",[421,1809],{},[56,1811,1813],{"id":1812},"_11-design-systems","11. Design Systems",[14,1815,1816],{},[501,1817,1818],{},"Tokens, atomic design, theming, and popular systems",[109,1820,1821,1831],{},[112,1822,1823],{},[115,1824,1825,1827,1829],{},[118,1826,512],{},[118,1828,515],{},[118,1830,518],{},[125,1832,1833,1846,1860,1874,1888,1902,1916],{},[115,1834,1835,1841,1843],{},[130,1836,1837],{},[18,1838,1840],{"href":1839},".\u002Freferences\u002F11-design-systems\u002F01-design-token-architecture","Design Token Architecture",[130,1842,833],{},[130,1844,1845],{},"Setting up any design system",[115,1847,1848,1854,1857],{},[130,1849,1850],{},[18,1851,1853],{"href":1852},".\u002Freferences\u002F11-design-systems\u002F02-atomic-design","Atomic Design",[130,1855,1856],{},"Atoms, molecules, organisms",[130,1858,1859],{},"Component organization",[115,1861,1862,1868,1871],{},[130,1863,1864],{},[18,1865,1867],{"href":1866},".\u002Freferences\u002F11-design-systems\u002F03-component-api-design","Component API Design",[130,1869,1870],{},"Props, variants, composition",[130,1872,1873],{},"Building reusable components",[115,1875,1876,1882,1885],{},[130,1877,1878],{},[18,1879,1881],{"href":1880},".\u002Freferences\u002F11-design-systems\u002F04-popular-systems-analysis","Popular Systems Analysis",[130,1883,1884],{},"Material, Apple, Fluent, shadcn",[130,1886,1887],{},"Learning from the best",[115,1889,1890,1896,1899],{},[130,1891,1892],{},[18,1893,1895],{"href":1894},".\u002Freferences\u002F11-design-systems\u002F05-theming-dark-mode","Theming & Dark Mode",[130,1897,1898],{},"CSS custom properties, themes",[130,1900,1901],{},"Dark mode, multi-theme",[115,1903,1904,1910,1913],{},[130,1905,1906],{},[18,1907,1909],{"href":1908},".\u002Freferences\u002F11-design-systems\u002F06-design-system-checklist","Design System Checklist",[130,1911,1912],{},"Everything a system needs",[130,1914,1915],{},"Starting or auditing a system",[115,1917,1918,1924,1927],{},[130,1919,1920],{},[18,1921,1923],{"href":1922},".\u002Freferences\u002F11-design-systems\u002F07-tailwind-design-patterns","Tailwind Design Patterns",[130,1925,1926],{},"cva, tailwind-merge, config",[130,1928,1929],{},"Tailwind-based projects",[421,1931],{},[56,1933,1935],{"id":1934},"_12-ux-writing","12. UX Writing",[14,1937,1938],{},[501,1939,1940],{},"Microcopy, content design, and inclusive language",[109,1942,1943,1953],{},[112,1944,1945],{},[115,1946,1947,1949,1951],{},[118,1948,512],{},[118,1950,515],{},[118,1952,518],{},[125,1954,1955,1969,1983,1997,2011,2025],{},[115,1956,1957,1963,1966],{},[130,1958,1959],{},[18,1960,1962],{"href":1961},".\u002Freferences\u002F12-ux-writing\u002F01-microcopy-patterns","Microcopy Patterns",[130,1964,1965],{},"Button labels, errors, empty states",[130,1967,1968],{},"Writing any UI text",[115,1970,1971,1977,1980],{},[130,1972,1973],{},[18,1974,1976],{"href":1975},".\u002Freferences\u002F12-ux-writing\u002F02-voice-tone-guidelines","Voice & Tone Guidelines",[130,1978,1979],{},"Consistent brand voice",[130,1981,1982],{},"Establishing content guidelines",[115,1984,1985,1991,1994],{},[130,1986,1987],{},[18,1988,1990],{"href":1989},".\u002Freferences\u002F12-ux-writing\u002F03-error-messages","Error Messages",[130,1992,1993],{},"What + why + how to fix",[130,1995,1996],{},"Error handling copy",[115,1998,1999,2005,2008],{},[130,2000,2001],{},[18,2002,2004],{"href":2003},".\u002Freferences\u002F12-ux-writing\u002F04-onboarding-copy","Onboarding Copy",[130,2006,2007],{},"Welcome, tours, progressive",[130,2009,2010],{},"First-run experience",[115,2012,2013,2019,2022],{},[130,2014,2015],{},[18,2016,2018],{"href":2017},".\u002Freferences\u002F12-ux-writing\u002F05-conversion-copy","Conversion Copy",[130,2020,2021],{},"CTAs, headlines, social proof",[130,2023,2024],{},"Landing pages, signup flows",[115,2026,2027,2033,2036],{},[130,2028,2029],{},[18,2030,2032],{"href":2031},".\u002Freferences\u002F12-ux-writing\u002F06-inclusive-writing","Inclusive Writing",[130,2034,2035],{},"Gender-neutral, plain language",[130,2037,2038],{},"All user-facing text",[421,2040],{},[56,2042,2044],{"id":2043},"_13-performance-ux","13. Performance UX",[14,2046,2047],{},[501,2048,2049],{},"Perceived performance, Core Web Vitals, optimization",[109,2051,2052,2062],{},[112,2053,2054],{},[115,2055,2056,2058,2060],{},[118,2057,512],{},[118,2059,515],{},[118,2061,518],{},[125,2063,2064,2078,2092,2106,2120,2134],{},[115,2065,2066,2072,2075],{},[130,2067,2068],{},[18,2069,2071],{"href":2070},".\u002Freferences\u002F13-performance-ux\u002F01-perceived-performance","Perceived Performance",[130,2073,2074],{},"Psychology of waiting",[130,2076,2077],{},"Making things feel fast",[115,2079,2080,2086,2089],{},[130,2081,2082],{},[18,2083,2085],{"href":2084},".\u002Freferences\u002F13-performance-ux\u002F02-core-web-vitals","Core Web Vitals",[130,2087,2088],{},"LCP, INP, CLS",[130,2090,2091],{},"Performance auditing",[115,2093,2094,2100,2103],{},[130,2095,2096],{},[18,2097,2099],{"href":2098},".\u002Freferences\u002F13-performance-ux\u002F03-image-optimization","Image Optimization",[130,2101,2102],{},"Formats, responsive, lazy",[130,2104,2105],{},"Every image implementation",[115,2107,2108,2114,2117],{},[130,2109,2110],{},[18,2111,2113],{"href":2112},".\u002Freferences\u002F13-performance-ux\u002F04-font-performance","Font Performance",[130,2115,2116],{},"font-display, preload, subset",[130,2118,2119],{},"Web font optimization",[115,2121,2122,2128,2131],{},[130,2123,2124],{},[18,2125,2127],{"href":2126},".\u002Freferences\u002F13-performance-ux\u002F05-critical-rendering-path","Critical Rendering Path",[130,2129,2130],{},"Above-the-fold, CSS containment",[130,2132,2133],{},"Page load optimization",[115,2135,2136,2142,2145],{},[130,2137,2138],{},[18,2139,2141],{"href":2140},".\u002Freferences\u002F13-performance-ux\u002F06-loading-patterns-library","Loading Patterns Library",[130,2143,2144],{},"Skeleton, spinner, progress CSS",[130,2146,2147],{},"Copy-paste loading patterns",[421,2149],{},[56,2151,2153],{"id":2152},"_14-modern-css","14. Modern CSS",[14,2155,2156],{},[501,2157,2158,2159,2161],{},"Custom properties, container queries, ",[289,2160],{},"(), cascade layers",[109,2163,2164,2174],{},[112,2165,2166],{},[115,2167,2168,2170,2172],{},[118,2169,512],{},[118,2171,515],{},[118,2173,518],{},[125,2175,2176,2190,2204,2220,2234,2248,2262],{},[115,2177,2178,2184,2187],{},[130,2179,2180],{},[18,2181,2183],{"href":2182},".\u002Freferences\u002F14-modern-css\u002F01-custom-properties-architecture","Custom Properties Architecture",[130,2185,2186],{},"CSS token system design",[130,2188,2189],{},"Any CSS architecture",[115,2191,2192,2198,2201],{},[130,2193,2194],{},[18,2195,2197],{"href":2196},".\u002Freferences\u002F14-modern-css\u002F02-container-queries","Container Queries",[130,2199,2200],{},"Component-level responsiveness",[130,2202,2203],{},"Self-contained components",[115,2205,2206,2214,2217],{},[130,2207,2208],{},[18,2209,2211,2213],{"href":2210},".\u002Freferences\u002F14-modern-css\u002F03-has-selector-patterns",[289,2212],{},"() Selector Patterns",[130,2215,2216],{},"Parent selector, state-based",[130,2218,2219],{},"Advanced styling without JS",[115,2221,2222,2228,2231],{},[130,2223,2224],{},[18,2225,2227],{"href":2226},".\u002Freferences\u002F14-modern-css\u002F04-cascade-layers","Cascade Layers",[130,2229,2230],{},"@layer for specificity control",[130,2232,2233],{},"Managing CSS specificity",[115,2235,2236,2242,2245],{},[130,2237,2238],{},[18,2239,2241],{"href":2240},".\u002Freferences\u002F14-modern-css\u002F05-modern-layout-techniques","Modern Layout Techniques",[130,2243,2244],{},"Subgrid, nesting, logical props",[130,2246,2247],{},"Cutting-edge layout",[115,2249,2250,2256,2259],{},[130,2251,2252],{},[18,2253,2255],{"href":2254},".\u002Freferences\u002F14-modern-css\u002F06-color-functions","Color Functions",[130,2257,2258],{},"oklch, color-mix, light-dark()",[130,2260,2261],{},"Modern color implementation",[115,2263,2264,2270,2273],{},[130,2265,2266],{},[18,2267,2269],{"href":2268},".\u002Freferences\u002F14-modern-css\u002F07-scroll-snap-popover","Scroll Snap & Popover",[130,2271,2272],{},"Scroll snap, popover, dialog",[130,2274,2275],{},"Native browser patterns",[421,2277],{},[56,2279,2281],{"id":2280},"_15-responsive-design","15. Responsive Design",[14,2283,2284],{},[501,2285,2286],{},"Mobile-first, fluid design, touch targets",[109,2288,2289,2299],{},[112,2290,2291],{},[115,2292,2293,2295,2297],{},[118,2294,512],{},[118,2296,515],{},[118,2298,518],{},[125,2300,2301,2315,2329,2343,2357,2371,2385],{},[115,2302,2303,2309,2312],{},[130,2304,2305],{},[18,2306,2308],{"href":2307},".\u002Freferences\u002F15-responsive-design\u002F01-mobile-first-strategy","Mobile-First Strategy",[130,2310,2311],{},"Progressive enhancement",[130,2313,2314],{},"Starting any responsive project",[115,2316,2317,2323,2326],{},[130,2318,2319],{},[18,2320,2322],{"href":2321},".\u002Freferences\u002F15-responsive-design\u002F02-breakpoint-system","Breakpoint System",[130,2324,2325],{},"Content-based breakpoints",[130,2327,2328],{},"Defining responsive breakpoints",[115,2330,2331,2337,2340],{},[130,2332,2333],{},[18,2334,2336],{"href":2335},".\u002Freferences\u002F15-responsive-design\u002F03-fluid-design","Fluid Design",[130,2338,2339],{},"clamp(), no-breakpoint layouts",[130,2341,2342],{},"Truly fluid interfaces",[115,2344,2345,2351,2354],{},[130,2346,2347],{},[18,2348,2350],{"href":2349},".\u002Freferences\u002F15-responsive-design\u002F04-responsive-patterns","Responsive Patterns",[130,2352,2353],{},"Stack, sidebar, grid, table",[130,2355,2356],{},"Common responsive transformations",[115,2358,2359,2365,2368],{},[130,2360,2361],{},[18,2362,2364],{"href":2363},".\u002Freferences\u002F15-responsive-design\u002F05-touch-targets-mobile-ux","Touch Targets & Mobile UX",[130,2366,2367],{},"44px minimum, thumb zones",[130,2369,2370],{},"Mobile-specific design",[115,2372,2373,2379,2382],{},[130,2374,2375],{},[18,2376,2378],{"href":2377},".\u002Freferences\u002F15-responsive-design\u002F06-responsive-images","Responsive Images",[130,2380,2381],{},"srcset, picture, art direction",[130,2383,2384],{},"Image delivery optimization",[115,2386,2387,2393,2396],{},[130,2388,2389],{},[18,2390,2392],{"href":2391},".\u002Freferences\u002F15-responsive-design\u002F07-print-stylesheets","Print Stylesheets",[130,2394,2395],{},"@media print, page breaks",[130,2397,2398],{},"Print-friendly pages",[421,2400],{},[48,2402,2404],{"id":2403},"quick-reference-card","Quick Reference Card",[56,2406,2408],{"id":2407},"the-10-most-impactful-design-decisions","The 10 Most Impactful Design Decisions",[2410,2411,2412,2417,2423,2429,2435,2441,2447,2453,2459,2464],"ol",{},[67,2413,2414,2416],{},[22,2415,542],{}," — Guide the eye: size, color, weight, space",[67,2418,2419,2422],{},[22,2420,2421],{},"Spacing System"," — Use 8pt grid, consistent tokens, generous whitespace",[67,2424,2425,2428],{},[22,2426,2427],{},"Color Contrast"," — WCAG AA minimum: 4.5:1 text, 3:1 UI components",[67,2430,2431,2434],{},[22,2432,2433],{},"Typography"," — Max 2 fonts, clear type scale, 45-75 char line length",[67,2436,2437,2440],{},[22,2438,2439],{},"Component States"," — Every element needs: hover, focus, active, disabled, loading, error",[67,2442,2443,2446],{},[22,2444,2445],{},"Touch Targets"," — Minimum 44×44px, use full clickable area",[67,2448,2449,2452],{},[22,2450,2451],{},"Loading States"," — Skeleton screens > spinners > nothing",[67,2454,2455,2458],{},[22,2456,2457],{},"Error Handling"," — What happened + why + how to fix",[67,2460,2461,2463],{},[22,2462,1048],{}," — Tab order, focus visible, escape to dismiss",[67,2465,2466,2469],{},[22,2467,2468],{},"Motion"," — 200-300ms transitions, ease-out for enters, respect prefers-reduced-motion",[56,2471,2473],{"id":2472},"design-review-checklist","Design Review Checklist",[14,2475,2476],{},"Before shipping any UI, verify:",[64,2478,2480,2486,2492,2498,2504,2510,2519,2525,2531,2537,2543,2549],{"className":2479},[367],[67,2481,2483,2485],{"className":2482},[371],[373,2484],{"disabled":375,"type":376}," Visual hierarchy is clear (squint test passes)",[67,2487,2489,2491],{"className":2488},[371],[373,2490],{"disabled":375,"type":376}," Spacing uses system tokens, not arbitrary values",[67,2493,2495,2497],{"className":2494},[371],[373,2496],{"disabled":375,"type":376}," Color contrast meets WCAG AA (test with browser devtools)",[67,2499,2501,2503],{"className":2500},[371],[373,2502],{"disabled":375,"type":376}," All interactive elements have hover, focus, active, and disabled states",[67,2505,2507,2509],{"className":2506},[371],[373,2508],{"disabled":375,"type":376}," Touch targets are at least 44×44px",[67,2511,2513,2515,2516],{"className":2512},[371],[373,2514],{"disabled":375,"type":376}," Animations respect ",[27,2517,2518],{},"prefers-reduced-motion",[67,2520,2522,2524],{"className":2521},[371],[373,2523],{"disabled":375,"type":376}," Text line length is 45-75 characters",[67,2526,2528,2530],{"className":2527},[371],[373,2529],{"disabled":375,"type":376}," Forms have visible labels, clear errors, proper autocomplete",[67,2532,2534,2536],{"className":2533},[371],[373,2535],{"disabled":375,"type":376}," Empty states, loading states, and error states are designed",[67,2538,2540,2542],{"className":2539},[371],[373,2541],{"disabled":375,"type":376}," Page is navigable with keyboard only",[67,2544,2546,2548],{"className":2545},[371],[373,2547],{"disabled":375,"type":376}," Screen reader announces dynamic changes (aria-live)",[67,2550,2552,2554],{"className":2551},[371],[373,2553],{"disabled":375,"type":376}," Images have meaningful alt text (or alt=\"\" for decorative)",[421,2556],{},[48,2558,2560],{"id":2559},"sources-further-reading","Sources & Further Reading",[64,2562,2563,2572,2580,2588,2596,2604,2612,2620,2628,2636,2644,2652],{},[67,2564,2565,2571],{},[18,2566,2570],{"href":2567,"rel":2568},"https:\u002F\u002Fwww.refactoringui.com\u002F",[2569],"nofollow","Refactoring UI"," — Steve Schoger & Adam Wathan",[67,2573,2574,2579],{},[18,2575,2578],{"href":2576,"rel":2577},"https:\u002F\u002Flawsofux.com\u002F",[2569],"Laws of UX"," — Jon Yablonski",[67,2581,2582,2587],{},[18,2583,2586],{"href":2584,"rel":2585},"https:\u002F\u002Finclusive-components.design\u002F",[2569],"Inclusive Components"," — Heydon Pickering",[67,2589,2590,2595],{},[18,2591,2594],{"href":2592,"rel":2593},"https:\u002F\u002Fevery-layout.dev\u002F",[2569],"Every Layout"," — Andy Bell & Heydon Pickering",[67,2597,2598,2603],{},[18,2599,2602],{"href":2600,"rel":2601},"https:\u002F\u002Fwww.w3.org\u002FTR\u002FWCAG22\u002F",[2569],"WCAG 2.2"," — W3C",[67,2605,2606,2611],{},[18,2607,2610],{"href":2608,"rel":2609},"https:\u002F\u002Fm3.material.io\u002F",[2569],"Material Design 3"," — Google",[67,2613,2614,2619],{},[18,2615,2618],{"href":2616,"rel":2617},"https:\u002F\u002Fdeveloper.apple.com\u002Fdesign\u002F",[2569],"Human Interface Guidelines"," — Apple",[67,2621,2622,2627],{},[18,2623,2626],{"href":2624,"rel":2625},"https:\u002F\u002Fwww.a11yproject.com\u002F",[2569],"A11y Project"," — Community",[67,2629,2630,2635],{},[18,2631,2634],{"href":2632,"rel":2633},"https:\u002F\u002Fweb.dev\u002F",[2569],"web.dev"," — Google (performance, CSS, accessibility)",[67,2637,2638,2643],{},[18,2639,2642],{"href":2640,"rel":2641},"https:\u002F\u002Fsensible.com\u002Fdont-make-me-think\u002F",[2569],"Don't Make Me Think"," — Steve Krug",[67,2645,2646,2651],{},[18,2647,2650],{"href":2648,"rel":2649},"https:\u002F\u002Fwww.nngroup.com\u002F",[2569],"The Design of Everyday Things"," — Don Norman",[67,2653,2654,2659],{},[18,2655,2658],{"href":2656,"rel":2657},"https:\u002F\u002Fwww.susanweinschenk.com\u002F",[2569],"100 Things Every Designer Needs to Know About People"," — Susan Weinschenk",[421,2661],{},[14,2663,2664,2667],{},[501,2665,2666],{},"\"Good design is obvious. Great design is transparent.\"","\n— Joe Sparano",{"title":102,"searchDepth":2669,"depth":2669,"links":2670},2,[2671,2679,2683,2684,2701,2705],{"id":50,"depth":2669,"text":51,"children":2672},[2673,2675,2676,2677,2678],{"id":58,"depth":2674,"text":59},3,{"id":87,"depth":2674,"text":88},{"id":317,"depth":2674,"text":318},{"id":338,"depth":2674,"text":339},{"id":359,"depth":2674,"text":360},{"id":425,"depth":2669,"text":426,"children":2680},[2681,2682],{"id":438,"depth":2674,"text":439},{"id":448,"depth":2674,"text":449},{"id":480,"depth":2669,"text":481},{"id":492,"depth":2669,"text":493,"children":2685},[2686,2687,2688,2689,2690,2691,2692,2693,2694,2695,2696,2697,2698,2699,2700],{"id":496,"depth":2674,"text":497},{"id":623,"depth":2674,"text":624},{"id":746,"depth":2674,"text":747},{"id":869,"depth":2674,"text":870},{"id":992,"depth":2674,"text":993},{"id":1115,"depth":2674,"text":1116},{"id":1238,"depth":2674,"text":1239},{"id":1431,"depth":2674,"text":1432},{"id":1554,"depth":2674,"text":1555},{"id":1677,"depth":2674,"text":1678},{"id":1812,"depth":2674,"text":1813},{"id":1934,"depth":2674,"text":1935},{"id":2043,"depth":2674,"text":2044},{"id":2152,"depth":2674,"text":2153},{"id":2280,"depth":2674,"text":2281},{"id":2403,"depth":2669,"text":2404,"children":2702},[2703,2704],{"id":2407,"depth":2674,"text":2408},{"id":2472,"depth":2674,"text":2473},{"id":2559,"depth":2669,"text":2560},"Web UI design and review advisor — layouts, components, color, typography, animations, accessibility, and design systems. Covers UX psychology, interaction patterns, WCAG compliance, responsive design, and modern CSS.","skill","md",{},"\u002Fplugins\u002Faio-design-system\u002Faio-uiux",{"title":5,"description":2706},"plugins\u002Faio-design-system\u002Faio-uiux","tybufa8DYwSFTAgWyPbp1pfBJKvtJT7PU_Dgt2Teq74",[],1779707415961]