feat: add frontend architecture rules FE-001 to FE-004

Add rules to enforce consistent frontend component usage:

- FE-001 (warning): Use pagination macro instead of inline HTML
- FE-002 (warning): Use $icon() helper instead of inline SVGs
- FE-003 (info): Use table macros for consistent styling
- FE-004 (info): Use form macros for consistent styling

Update validate_architecture.py to check FE-001 and FE-002
anti-patterns in templates, with exceptions for macro definitions
and the components showcase page.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

.architecture-rules.yaml

@@ -600,6 +600,92 @@ template_rules:
       file_pattern: "app/templates/**/*.html"
       recommended_pattern: '<template x-if="items.length === 0">No items</template>'
 
+# ============================================================================
+# FRONTEND COMPONENT RULES
+# ============================================================================
+
+frontend_component_rules:
+
+  - id: "FE-001"
+    name: "Use pagination macro instead of inline HTML"
+    severity: "warning"
+    description: |
+      Use the shared pagination macro instead of duplicating pagination HTML.
+      Import from shared/macros/pagination.html.
+
+      WRONG (inline pagination):
+        <div class="grid px-4 py-3 text-xs font-semibold...">
+            <span class="flex items-center col-span-3">
+                Showing ...
+            </span>
+            <nav aria-label="Table navigation">...
+
+      RIGHT (use macro):
+        {% from 'shared/macros/pagination.html' import pagination %}
+        {{ pagination() }}
+    pattern:
+      file_pattern: "app/templates/**/*.html"
+      anti_patterns:
+        - 'aria-label="Table navigation"'
+        - "previousPage\\(\\).*nextPage\\(\\)"
+      exceptions:
+        - "shared/macros/pagination.html"
+        - "components.html"  # Showcase page
+
+  - id: "FE-002"
+    name: "Use $icon() helper instead of inline SVGs"
+    severity: "warning"
+    description: |
+      Use the Alpine.js $icon() helper for consistent iconography.
+      Do not use inline <svg> elements.
+
+      WRONG (inline SVG):
+        <svg class="w-4 h-4" viewBox="0 0 20 20">...</svg>
+
+      RIGHT (icon helper):
+        <span x-html="$icon('arrow-left', 'w-4 h-4')"></span>
+    pattern:
+      file_pattern: "app/templates/**/*.html"
+      anti_patterns:
+        - "<svg.*viewBox.*>.*</svg>"
+      exceptions:
+        - "base.html"  # Base templates may define SVG sprites
+        - "components.html"  # Showcase page
+        - "shared/macros/"  # Macros may contain SVGs for compatibility
+
+  - id: "FE-003"
+    name: "Use table macros for consistent table styling"
+    severity: "info"
+    description: |
+      Use the shared table macros for consistent table styling.
+      Import from shared/macros/tables.html.
+
+      Recommended macros:
+      - table_wrapper() - Wraps table with overflow and shadow
+      - table_header(['Column1', 'Column2']) - Consistent header styling
+      - table_empty_state(colspan, 'icon', 'Title', 'Message') - Empty states
+    pattern:
+      file_pattern: "app/templates/**/*.html"
+      encouraged_patterns:
+        - "{% from 'shared/macros/tables.html' import"
+
+  - id: "FE-004"
+    name: "Use form macros for consistent form styling"
+    severity: "info"
+    description: |
+      Use the shared form macros for consistent input styling and validation.
+      Import from shared/macros/forms.html.
+
+      Recommended macros:
+      - form_input(label, name, x_model, ...) - Text inputs with validation
+      - form_select(label, x_model, options) - Select dropdowns
+      - form_textarea(label, x_model, rows) - Textareas
+      - form_checkbox(label, x_model) - Checkboxes
+    pattern:
+      file_pattern: "app/templates/**/*.html"
+      encouraged_patterns:
+        - "{% from 'shared/macros/forms.html' import"
+
 # ============================================================================
 # FRONTEND STYLING RULES
 # ============================================================================