feat: add visual quality rules to frontend-developer agent + new screenshot page

.kilo/agents/frontend-developer.md

@@ -47,6 +47,33 @@ Use the Task tool with `subagent_type` to delegate to other agents:
 5. **Component composition** — build small, reusable parts
 6. **Tool-First Enforcement** — Read existing component files with Read/Grep before modifying. Search for existing patterns before introducing new ones.
 
+## Visual Quality Rules (Learned from Past Mistakes)
+
+### Tab / Navigation Component Design
+1. **Never combine border-bottom indicator with wrapping card shadow** on tab containers. Choose ONE approach:
+   - Either: pills/rounded segments with active state via `background` + `color` (no bottom border)
+   - Or: clean underlined tabs with `border-bottom` on active, but remove any card `box-shadow` or `border-radius` on the tab strip itself
+2. **Active tab must visually connect** with its content panel. Use `background: #fff` on active tab + same-border trick (`border-color: var(--gray-2) var(--gray-2) #fff`) or remove borders entirely and use only background/contrast.
+3. **Never place a box-shadow on a tab container** that also has active underline indicator. The shadow conflicts with the underline and creates visual noise.
+
+### Color Contrast & Cascade Priority
+1. **Always check selector specificity** when styling reused components. If a global `.nav-link { color: white !important }` exists from navbar, scoped tab `.nav-link` MUST use higher specificity or `!important` override.
+2. **Verify contrast BEFORE shipping** — light gray text (`#6c757d`) on white (`#fff`) is only 4.6:1, which is borderline. For small text under 14px, use darker text (`#495057` or `#333`).
+3. **Don't assume Bootstrap defaults are safe** — its `.nav-tabs` may bring unwanted borders, margins, or radius. Always inspect computed styles.
+
+### Border & Shadow Hygiene
+1. **One visual hierarchy per component** — border OR shadow, not both simultaneously on the same element.
+2. **If border-radius is used on parent, ensure child overflow is hidden** via `overflow: hidden` or matching radius on children.
+3. **Avoid `margin-bottom: -Xpx` hacks** for overlapping borders. Use `position: relative` + `z-index` on active tab to lift it above the content border.
+
+### Professional Polish Checklist (Before Handoff)
+- [ ] All text is readable at normal zoom (WCAG AA: 4.5:1 minimum)
+- [ ] No competing borders/shadows on the same element
+- [ ] Active states are visually clear without guessing
+- [ ] Hover states are distinguishable from active states
+- [ ] Mobile: tabs don't overflow or wrap weirdly
+- [ ] Component looks intentional, not accidental
+
 ## Output Format
 
 ```markdown

tests/scripts/capture-screenshots.js

@@ -27,6 +27,7 @@ const VIEWPORTS = [
 const PAGES = [
   { name: 'homepage', path: '/' },
   { name: 'admin-login', path: '/admin/login' },
+  { name: 'product', path: '/product.php?slug=domo-glamping-pvc-d5m' },
 ];
 
 const SCREENSHOT_BASE = path.join(__dirname, '..', 'visual');