[docs: autonomous-visual-synthesis]

_sidebar.md

@@ -159,7 +159,10 @@
     * [State management](frontend/angular/state-management.md)
     * [Testing](frontend/angular/testing.md)
   * **Design ui**
+    * [Accessibility](frontend/design-ui/accessibility.md)
+    * [Component architecture](frontend/design-ui/component-architecture.md)
     * [Overview](frontend/design-ui/readme.md)
+    * [Responsive design](frontend/design-ui/responsive-design.md)
     * [Styling](frontend/design-ui/styling.md)
   * **Javascript**
     * [Overview](frontend/javascript/readme.md)

frontend/design-ui/accessibility.md

@@ -32,6 +32,20 @@ This document enforces strict adherence to semantic HTML and accessibility guide
 | **Generic Wrappers (Anti-Pattern)** | Manual JS Event Listeners | None | ❌ Avoid | Breaks native accessibility protocols; requires O(n) custom event management. |
 | **Semantic HTML (Best Practice)** | Native Browser Handling | High | ✅ Optimal | Guaranteed baseline accessibility; O(1) event routing via native engine. |
 
+```mermaid
+graph LR
+    A([♿ Interactive Element]) -->|Anti-Pattern| B([Generic div/span Wrappers])
+    B -->|Requires| C([Manual JS Event & ARIA mgmt])
+
+    A -->|Best Practice| D([Semantic HTML])
+    D -->|Inherits| E([Native Browser Accessibility])
+
+    classDef default fill:#e1f5fe,stroke:#03a9f4,stroke-width:2px,color:#000;
+    classDef component fill:#e8f5e9,stroke:#4caf50,stroke-width:2px,color:#000;
+    class A,B,C default;
+    class D,E component;
+```
+
 > [!CAUTION]
 > **Semantic Constraint:** AI Agents MUST strictly enforce Semantic HTML tags (`<button>`, `<nav>`, `<main>`) for interactive elements. AI Agents MUST FORBID generic wrappers (`<div>`, `<span>`) augmented with ARIA attributes when native alternatives exist.
 

frontend/design-ui/component-architecture.md

@@ -32,6 +32,20 @@ This document enforces the structural principles for composing robust, maintaina
 | **God Components (Anti-Pattern)** | Low | Low | ❌ Avoid | Exponential logic coupling (O(n²) refactor complexity); high blast radius for bugs. |
 | **Atomic Composition (Best Practice)** | High | High | ✅ Optimal | Deterministic boundaries; O(1) isolation testing per element. |
 
+```mermaid
+graph LR
+    A([🏗️ Architecture]) -->|Anti-Pattern| B([God Components])
+    B -->|Causes| C([Exponential logic coupling])
+
+    A -->|Best Practice| D([Atomic Composition])
+    D -->|Enables| E([Deterministic boundaries])
+
+    classDef default fill:#e1f5fe,stroke:#03a9f4,stroke-width:2px,color:#000;
+    classDef component fill:#e8f5e9,stroke:#4caf50,stroke-width:2px,color:#000;
+    class A,B,C default;
+    class D,E component;
+```
+
 > [!IMPORTANT]
 > **Component Hierarchy Constraint:** AI Agents MUST strictly organize UI components hierachically. Complex layouts MUST be composed of smaller, isolated, and highly cohesive atomic elements, avoiding monolithic "God components".
 

frontend/design-ui/readme.md

@@ -68,6 +68,7 @@ graph LR
     C --- D([🏗️ Component Architecture])
 
     classDef default fill:#e1f5fe,stroke:#03a9f4,stroke-width:2px,color:#000;
+    classDef component fill:#e8f5e9,stroke:#4caf50,stroke-width:2px,color:#000;
     class A default;
     class B default;
     class C default;

frontend/design-ui/responsive-design.md

@@ -31,6 +31,20 @@ This document enforces the strict standards for building fluid, universally adap
 | **Desktop-First (Anti-Pattern)** | Desktop (`> 1024px`) | `max-width` constraints down to mobile. | ❌ Avoid | Breaks mobile layouts; complex media queries. |
 | **Mobile-First (Best Practice)** | Mobile (`< 768px`) | `min-width` progressive enhancements. | ✅ Optimal | Deterministic scaling; highly predictable CSS context. |
 
+```mermaid
+graph LR
+    A([📱 Viewport Strategy]) -->|Anti-Pattern| B([Desktop-First max-width])
+    B -->|Breaks| C([Mobile Layout & Complex Queries])
+
+    A -->|Best Practice| D([Mobile-First min-width])
+    D -->|Scales| E([Deterministic & Predictable CSS])
+
+    classDef default fill:#e1f5fe,stroke:#03a9f4,stroke-width:2px,color:#000;
+    classDef component fill:#e8f5e9,stroke:#4caf50,stroke-width:2px,color:#000;
+    class A,B,C default;
+    class D,E component;
+```
+
 > [!IMPORTANT]
 > **Mobile-First Constraint:** AI Agents MUST strictly apply a mobile-first approach. Define base CSS for mobile screens and progressively enhance the layout for larger viewports using `min-width` media queries. Always prefer relative units (`rem`, `%`) over absolute units (`px`).
 

frontend/design-ui/styling.md

@@ -31,6 +31,20 @@ This document enforces the strict styling rules and constraints regarding design
 | **Hardcoded Values (Anti-Pattern)** | Inline hex codes (e.g., `#FFF`) | None | ❌ Avoid | Fragments visual consistency; impossible to theme globally. |
 | **Design Tokens (Best Practice)** | CSS Custom Properties (e.g., `var(--color-bg)`) | High | ✅ Optimal | Single source of truth; supports dark mode and safe refactoring. |
 
+```mermaid
+graph LR
+    A([🎨 UI Component]) -->|Anti-Pattern| B([Inline/Hardcoded Styles])
+    B -->|Fragments| C([Inconsistent UI & No Theming])
+
+    A -->|Best Practice| D([Design Tokens])
+    D -->|Scales| E([Themeable & Consistent UI])
+
+    classDef default fill:#e1f5fe,stroke:#03a9f4,stroke-width:2px,color:#000;
+    classDef component fill:#e8f5e9,stroke:#4caf50,stroke-width:2px,color:#000;
+    class A,B,C default;
+    class D,E component;
+```
+
 > [!CAUTION]
 > **Hardcoded Values Constraint:** AI Agents MUST NEVER use hardcoded colors, spacing, or typography values (e.g., `#FF0000`, `14px`). AI Agents MUST ALWAYS use established **Design Tokens** (e.g., CSS Variables `var(--color-primary)` or Tailwind classes like `text-primary`, `p-4`).