🧹 [code health improvement description] chore(nav): optimize internal connectivity between structured modules

_sidebar.md

@@ -158,8 +158,11 @@
     * [Expert niche](frontend/angular/expert-niche.md)
     * [State management](frontend/angular/state-management.md)
     * [Testing](frontend/angular/testing.md)
-  * **Design ui**
+  * **Design UI**
     * [Overview](frontend/design-ui/readme.md)
+    * [Accessibility](frontend/design-ui/accessibility.md)
+    * [Component Architecture](frontend/design-ui/component-architecture.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

@@ -48,9 +48,6 @@ Using generic `<div>` wrappers and artificially attaching ARIA roles or keyboard
 <button class="btn" onclick="openModal()" aria-label="Open Settings Modal">Click Me</button>
 ```
 
-> [!NOTE]
-> **Internal Routing:** For more context, refer back to the [🎨 UI/UX Design Index](./readme.md).
-
 
 ### 🚀 Solution
 Enforcing **Semantic HTML** is MANDATORY to guarantee deterministic accessibility tree generation. Native elements inherently support keyboard navigation and screen reader parsing without custom JavaScript logic. This STRICTLY eliminates the performance overhead of manual event listener management and mitigates security risks associated with complex, logic-heavy DOM manipulation handlers.

frontend/design-ui/component-architecture.md

@@ -110,9 +110,6 @@ function UserDashboard() {
 }
 ```
 
-> [!NOTE]
-> **Internal Routing:** For more context, refer back to the [🎨 UI/UX Design Index](./readme.md).
-
 
 ### 🚀 Solution
 Strictly enforcing **Component Hierarchy** is MANDATORY to establish deterministic boundaries. Decoupled components map to independent rendering lifecycles, enabling focused isolation testing and STRICTLY reducing framework reconciliation overhead compared to monolithic structures. This predictable architecture minimizes the blast radius for performance regressions and mitigates Cross-Site Scripting (XSS) risks by isolating state and rendering contexts.

frontend/design-ui/readme.md

@@ -51,9 +51,6 @@ Hardcoded values create an inflexible system. They make dark-mode implementation
 }
 ```
 
-> [!NOTE]
-> **Internal Routing:** For more context, refer back to the [🎨 Frontend Architecture](../readme.md).
-
 
 ### 🚀 Solution
 Strictly utilize Design Tokens for all styling. This ensures a deterministic, highly cohesive design system. By relying on CSS variables or framework tokens, updates propagate instantly across the app, allowing agents to reliably structure layouts without guessing aesthetic intent.
@@ -80,10 +77,10 @@ graph LR
 
 The UI/UX architecture is decomposed into the following specialized modules. AI Agents MUST strictly adhere to the guidelines in these documents.
 
-* [🎨 Styling Rules](./styling.md) - Design Tokens, Hardcoded Values, and general CSS best practices.
-* [📱 Responsive Design](./responsive-design.md) - Mobile-First Approach, Relative Units, and fluid layouts.
 * [♿ Accessibility (A11y)](./accessibility.md) - Semantic HTML, ARIA attributes, Focus visibility, and WCAG standards.
 * [🏗️ Component Architecture](./component-architecture.md) - Atomic Design principles and structural UI diagrams.
+* [📱 Responsive Design](./responsive-design.md) - Mobile-First Approach, Relative Units, and fluid layouts.
+* [🎨 Styling Rules](./styling.md) - Design Tokens, Hardcoded Values, and general CSS best practices.
 
 ---
 ## ✅ Checklist for Agents
@@ -122,9 +119,6 @@ Scattering hardcoded visual values across the codebase eliminates the ability to
 }
 ```
 
-> [!NOTE]
-> **Internal Routing:** For more context, refer back to the [🎨 Frontend Architecture](../readme.md).
-
 
 ### 🚀 Solution
 Extracting visual properties into centrally managed Design Tokens is MANDATORY. This pattern enforces strict isolation boundaries and standardizes deterministic visual properties. It STRICTLY prevents arbitrary inline style manipulation, mitigating potential style-based injection vulnerabilities, and creates a predictable environment optimized for parsing and UI refactoring by AI agents, improving overall rendering performance.

frontend/design-ui/responsive-design.md

@@ -65,9 +65,6 @@ A desktop-first approach with absolute units (`px`) often leads to horizontal sc
 }
 ```
 
-> [!NOTE]
-> **Internal Routing:** For more context, refer back to the [🎨 UI/UX Design Index](./readme.md).
-
 
 ### 🚀 Solution
 Implementing a **Mobile-First Approach** using relative units is MANDATORY. Enforcing base constraints on mobile and dynamically scaling upward STRICTLY limits layout shift (CLS) and reduces the CSS parser's evaluation overhead. This unified cascading structure inherently standardizes deterministic scaling properties, ensuring robust layout performance and mitigating the risk of unpredictable rendering states.

frontend/design-ui/styling.md

@@ -55,9 +55,6 @@ Using hardcoded absolute values (`20px`, hex codes) creates inconsistencies acro
 }
 ```
 
-> [!NOTE]
-> **Internal Routing:** For more context, refer back to the [🎨 UI/UX Design Index](./readme.md).
-
 
 ### 🚀 Solution
 Strictly utilizing **Design Tokens** is MANDATORY to establish deterministic visual contracts. Constraining styles strictly to these centrally-managed tokens ensures a single source of truth, reducing CSS payload size and standardizing rendering performance. This pattern STRICTLY prevents arbitrary style manipulation, mitigating style-based injection vulnerabilities and enforcing uncompromised environmental immutability for safe AI Agent parsing.

frontend/readme.md

@@ -95,10 +95,9 @@ This folder acts as a container for documentation around the following technolog
 - [Qwik](./qwik/readme.md)
 
 ## 🎨 UI/UX Design & Styling
-- [Styling Rules](./design-ui/styling.md)
-- [Responsive Design](./design-ui/responsive-design.md)
 - [Accessibility](./design-ui/accessibility.md)
 - [Component Architecture](./design-ui/component-architecture.md)
-
+- [Responsive Design](./design-ui/responsive-design.md)
+- [Styling Rules](./design-ui/styling.md)
 - [UI/UX Design Index](./design-ui/readme.md)
 

patch_callouts.py

@@ -0,0 +1,14 @@
+import os
+import re
+
+directory = 'frontend/design-ui'
+for filename in os.listdir(directory):
+    if filename.endswith('.md'):
+        filepath = os.path.join(directory, filename)
+        with open(filepath, 'r') as f:
+            content = f.read()
+
+        content = re.sub(r'> \[!NOTE\]\n> \*\*Internal Routing:\*\*.*?\n\n+', '\n', content, flags=re.DOTALL)
+
+        with open(filepath, 'w') as f:
+            f.write(content)

patch_frontend_readme.py

@@ -0,0 +1,23 @@
+import re
+filepath = 'frontend/readme.md'
+with open(filepath, 'r') as f:
+    content = f.read()
+
+old_block = """## 🎨 UI/UX Design & Styling
+- [Styling Rules](./design-ui/styling.md)
+- [Responsive Design](./design-ui/responsive-design.md)
+- [Accessibility](./design-ui/accessibility.md)
+- [Component Architecture](./design-ui/component-architecture.md)
+
+- [UI/UX Design Index](./design-ui/readme.md)"""
+
+new_block = """## 🎨 UI/UX Design & Styling
+- [Accessibility](./design-ui/accessibility.md)
+- [Component Architecture](./design-ui/component-architecture.md)
+- [Responsive Design](./design-ui/responsive-design.md)
+- [Styling Rules](./design-ui/styling.md)
+- [UI/UX Design Index](./design-ui/readme.md)"""
+
+content = content.replace(old_block, new_block)
+with open(filepath, 'w') as f:
+    f.write(content)

patch_readme.py

@@ -0,0 +1,18 @@
+import re
+filepath = 'frontend/design-ui/readme.md'
+with open(filepath, 'r') as f:
+    content = f.read()
+
+old_list = """* [🎨 Styling Rules](./styling.md) - Design Tokens, Hardcoded Values, and general CSS best practices.
+* [📱 Responsive Design](./responsive-design.md) - Mobile-First Approach, Relative Units, and fluid layouts.
+* [♿ Accessibility (A11y)](./accessibility.md) - Semantic HTML, ARIA attributes, Focus visibility, and WCAG standards.
+* [🏗️ Component Architecture](./component-architecture.md) - Atomic Design principles and structural UI diagrams."""
+
+new_list = """* [♿ Accessibility (A11y)](./accessibility.md) - Semantic HTML, ARIA attributes, Focus visibility, and WCAG standards.
+* [🏗️ Component Architecture](./component-architecture.md) - Atomic Design principles and structural UI diagrams.
+* [📱 Responsive Design](./responsive-design.md) - Mobile-First Approach, Relative Units, and fluid layouts.
+* [🎨 Styling Rules](./styling.md) - Design Tokens, Hardcoded Values, and general CSS best practices."""
+
+content = content.replace(old_list, new_list)
+with open(filepath, 'w') as f:
+    f.write(content)

patch_sidebar.py

@@ -0,0 +1,19 @@
+import re
+filepath = '_sidebar.md'
+with open(filepath, 'r') as f:
+    content = f.read()
+
+old_block = """  * **Design ui**
+    * [Overview](frontend/design-ui/readme.md)
+    * [Styling](frontend/design-ui/styling.md)"""
+
+new_block = """  * **Design UI**
+    * [Overview](frontend/design-ui/readme.md)
+    * [Accessibility](frontend/design-ui/accessibility.md)
+    * [Component Architecture](frontend/design-ui/component-architecture.md)
+    * [Responsive Design](frontend/design-ui/responsive-design.md)
+    * [Styling](frontend/design-ui/styling.md)"""
+
+content = content.replace(old_block, new_block)
+with open(filepath, 'w') as f:
+    f.write(content)