From 7b00dc763126497e4d9fbe142bbdd0925c98c484 Mon Sep 17 00:00:00 2001
From: Eric Gullickson <16152721+ericgullickson@users.noreply.github.com>
Date: Fri, 2 Jan 2026 21:51:18 -0600
Subject: [PATCH] chore: add visual integration criteria to feature template
 (refs #2)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds Visual Integration section to prevent design inconsistencies:
- Icons: Must use MUI Rounded icons only, no emoji in UI
- Colors: Theme colors only, no hardcoded hex, dark mode support
- Components: Use existing shared components (GlassCard, Button, etc.)
- Typography & Spacing: MUI variants, consistent spacing multiples

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .gitea/issue_template/feature.yaml | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/.gitea/issue_template/feature.yaml b/.gitea/issue_template/feature.yaml
index e91f5cc..15becc8 100644
--- a/.gitea/issue_template/feature.yaml
+++ b/.gitea/issue_template/feature.yaml
@@ -76,6 +76,34 @@ body:
     validations:
       required: true
 
+  - type: textarea
+    id: visual-integration
+    attributes:
+      label: Visual Integration (Design Consistency)
+      description: Ensure the feature matches the app's visual language. Reference existing patterns.
+      value: |
+        ### Icons
+        - [ ] Use MUI Rounded icons only (e.g., `HomeRoundedIcon`, `DirectionsCarRoundedIcon`)
+        - [ ] Icon reference: Check `frontend/src/components/Layout.tsx` for existing icons
+        - [ ] No emoji icons in UI (text content only)
+
+        ### Colors
+        - [ ] Use theme colors via MUI sx prop: `color: 'primary.main'`, `bgcolor: 'background.paper'`
+        - [ ] No hardcoded hex colors (use Tailwind theme classes or MUI theme)
+        - [ ] Dark mode support: Use `dark:` Tailwind variants or MUI `theme.applyStyles('dark', ...)`
+
+        ### Components
+        - [ ] Use existing shared components: `GlassCard`, `Button`, `Input` from `shared-minimal/`
+        - [ ] Follow card patterns in: `frontend/src/features/vehicles/` or `frontend/src/features/fuel-logs/`
+        - [ ] Loading states: Use skeleton patterns from existing features
+
+        ### Typography & Spacing
+        - [ ] Use MUI Typography variants: `h4`, `h5`, `body1`, `body2`, `caption`
+        - [ ] Use consistent spacing: `gap-4`, `space-y-4`, `p-4` (multiples of 4)
+        - [ ] Mobile padding: `px-5 pt-5 pb-3` pattern from Layout.tsx
+    validations:
+      required: true
+
   - type: textarea
     id: implementation-notes
     attributes: