This prompt is for video titled: Start with H1 heading containing the video title. Objective: Create a comprehensive UI/UX design reference document optimized for AI coding assistants and CLI tools from the specified YouTube video source. Input: Draw exclusively from the single designated video source provided in this session. Output Requirements: - Format: Bulleted markdown (.md) with clear hierarchical organization - Main Heading: Video title as H1 (Example: # [Video Title]) - No citation numbers or bracketed references (avoid , [a, b]) - Style: Concise, technical, directive statements for direct code implementation - Prioritization: Lead with fundamental principles, then specific actionable techniques Structure & Organization: Maximum four hierarchical levels, grouped by UI/UX categories. Example high-level categories: 1. Design Philosophy & Principles (Fundamental Rules) 2. Color & Theming (HSL/OKLCH, Dark Mode) 3. Typography (Scale, Weight, Line Height) 4. Layout & Responsive Design (Flexbox, Grid, Spacing Systems) 5. Native HTML Component Implementation (Accessibility/Simplicity Hacks) 6. Advanced Techniques & Best Practices (Depth, Shadows, Performance) Content Focus: Extract actionable, technical guidelines: - Directive Statements: Direct instructions (e.g., "Use HSL," "Apply display: flex") - Specific Code/Techniques: Explicit CSS/HTML attributes, properties, values (e.g., contenteditable, <dialog>, flex-wrap: wrap, inputmode) - Design Rules: Explicit rules/ratios (e.g., proportional sizing, spacing divisible by four) - Best Practices: Modern frameworks, optimization tips (WEBP, SVG), common mistakes to avoid Goal: Self-contained quick-reference guide enabling AI agents to make informed UI/UX decisions based solely on principles from the video source.