boc/prompts/visual-design-audit.md

Visual Design Audit — quiXzoom & Landvex

Production-grade. No generic observations. Every finding must be implementable.

---

STOP CONDITION

Revisionen är inte klar förrän:

• 0 horisontella overflow-fel finns kvar
• 0 inkonsekvenser mellan header/footer-versioner finns kvar
• 0 motstridiga siffror/claims finns kvar
• alla WCAG 2.2 AA-krav passerar
• alla fynd har en implementerbar fix med exakt selector + CSS

---

FÖRBJUDNA UTDATA

Ej tillåtet:

• "looks good"
• "consider improving"
• "might benefit from"
• "increase spacing"
• "improve responsiveness"
• "spacing could be improved"

Varje observation måste sluta i:

selector: <exact CSS selector>
rotorsak: <root cause>
fix: <exact CSS property + value>
breakpoint: <exact px value if responsive>

Annars är fyndet ogiltigt och ska inte inkluderas.

---

FLÖDE

Fas 1 — Rendera & dokumentera

1. Öppna sidan i browser (desktop 1440px, mobil 390px)
2. Ta screenshot av hela sidan (fullPage)
3. Kör i konsolen:

   // Hitta alla overflow-element
   (()=>{const r=[];document.querySelectorAll('*').forEach(el=>{if(el.scrollWidth>el.offsetWidth)r.push({el:el.tagName+'.'+[...el.classList].join('.'),w:el.scrollWidth,ow:el.offsetWidth})});return r})()
   

4. Kör Lighthouse (Performance + Accessibility + SEO) via browser
5. Kör axe-core för WCAG 2.2 AA
6. Dokumentera ALLA fel innan du skriver en rad CSS

Fas 2 — Stack-identifiering (INGEN fråga till användaren)

Identifiera stacken autonomt:

// I konsolen:
window.__NEXT_DATA__        // Next.js
window.__nuxt__             // Nuxt
window.React                // React
document.querySelector('[data-reactroot]')  // React
document.querySelector('[class*="tw-"]')    // Tailwind
document.querySelector('[class*="css-"]')   // CSS-in-JS (emotion/styled)

Kontrollera också:

• <link rel="stylesheet"> href-mönster
• class-namnkonventioner (BEM, atomic, utility)
• <script src> bundle-namn

→ Rapportera stack som del av audit-header.
→ Fråga användaren ENDAST om stacken är ett intern proprietary system som inte går att identifiera med ovan.

Fas 3 — Systematisk fix

Skriv CSS-fixar i exakt prioritetsordning:

1. Overflow/layout-krascher (blocking)
2. WCAG-fel (blocking)
3. Core Web Vitals (high impact)
4. Trust/Enterprise credibility (high impact)
5. SEO surface (medium impact)
6. Kosmetik (low impact)

---

SEKTIONER

A — Overflow & Layout

Kör overflow-detektorn (se Fas 1, steg 3).

För varje träff:

element: <selector>
scrollWidth: Xpx > offsetWidth: Ypx
rotorsak: [tex. img utan max-width, pre utan overflow, grid utan min-width:0]
fix: selector { overflow: hidden; } / max-width: 100%; / min-width: 0;
breakpoint: <px>

B — Typography

Kontrollera:

• Line-length > 75ch på desktop → max-width: 65ch
• Font-size < 16px body → läs computed style
• Font-swap synlig → font-display: swap + <link rel=preload>
• FOUT/FOIT → dokumentera med filmstrip

selector: body
computed font-size: Xpx (expected: ≥16px)
fix: font-size: 1rem (16px)

C — Spacing & Grid

• Kontrollera att spacing följer ett konsekvent system (4px/8px grid)
• Identifiera element med magic numbers (ex. padding: 13px 17px)
• Rapportera med computed values, inte antaganden

D — Color & Contrast

Mät kontrastförhållande med:

// Computed contrast via APCA eller WCAG AA formula
// Minsta godkänd: 4.5:1 (normal text), 3:1 (large text ≥18pt/14pt bold)

Rapportera varje fel:

element: .nav-link
foreground: #888888
background: #0a0a0a
ratio: 2.8:1 (required: 4.5:1)
fix: color: #a8a8a8; /* ratio: 4.6:1 */

E — Responsivitet

Testa exakt på: 375px, 390px, 430px, 768px, 1024px, 1280px, 1440px, 1920px

För varje breakpoint — screenshot + overflow-scan.

F — Interactive States

Kontrollera för alla klickbara element:

• :hover state definierad
• :focus-visible state med synlig outline (WCAG 2.4.11)
• :active state
• Disabled-state om relevant

// Testa focus-visible
document.querySelectorAll('a,button,input,select,textarea').forEach(el=>{
  const s = getComputedStyle(el,':focus-visible');
  if(s.outlineWidth==='0px'&&s.boxShadow==='none') console.warn('no focus style',el)
})

G — Images & Media

• Alla <img> har width + height attribut (CLS prevention)
• loading="lazy" på below-fold images
• alt-texter är beskrivande (inte tomma, inte "image")
• SVG har role="img" + aria-label eller är aria-hidden="true"

H — Header & Footer Consistency

Kontrollera att header och footer är identiska på ALLA sidor:

• Logo
• Navigation items
• CTA-knappar
• Copyright-text och år
• Juridiska länkar

Rapportera varje avvikelse:

page: /methodology/
element: footer
avvikelse: saknar "Privacy Policy" länk (finns på /index)
fix: lägg till <a href="/privacy/">Privacy Policy</a> i footer nav

---

K.1 — Performance & Core Web Vitals

Mät och rapportera:

• LCP (Largest Contentful Paint) — target < 2.5s
• CLS (Cumulative Layout Shift) — target < 0.1
• INP (Interaction to Next Paint) — target < 200ms

Identifiera alla visuella orsaker till:

• Layout shifts → width/height saknas på media, font-swap, dynamiskt injicerat innehåll
• Font swaps → FOUT, FOIT, font-display inte satt
• Image jumps → aspect-ratio saknas, lazy-load utan placeholder
• Counter animations → will-change: transform, reducera om prefers-reduced-motion

För varje problem:

metric: CLS / LCP / INP
impact: +0.XX CLS / +XXXms LCP
selector: <element>
rotorsak: <exakt orsak>
fix: <exakt CSS/HTML-attribut>

---

K.2 — Trust & Enterprise Readiness

För quiXzoom och Landvex är trovärdighet lika viktig som design.

Kontrollera närvaro och kvalitet av:

• Kontaktuppgifter (adress, e-post, telefon om relevant)
• Organisationsinformation (org.nr, registrerat land, legal entity)
• Legal footer (© år, entity-namn, jurisdiktion)
• Privacy policy (länkad från footer + cookie-banner)
• Terms of service
• Methodology/how-it-works page
• Case studies eller proof-of-concept
• Uptime/status page
• Trust-badges (GDPR, Stripe, SSL)
• Named team eller tydlig company-sida

Flagga visuella signaler som får sajten att uppfattas som:

• Startup prototype: placeholder-text, "lorem ipsum", "coming soon" utan datum
• Affiliate site: överdrivna earning-claims utan kontext, inga juridiska disclaimers
• Landing page only: inga sekundära sidor i navigation, ingen intern länkning

För varje enterprise credibility-brist:

signal: saknar org.nr i footer
impact: ser ut som anonymous affiliate site
fix: lägg till "Landvex AB · Org.nr 559141-7042 · Tyresö, Sweden" i footer
selector: footer .legal-copy

Föreslå exakta komponenter som höjer enterprise-känslan:

• Trust bar (logotyper av integrations/partners)
• Security certifications
• Named press mentions
• Verifierbara testimonials (namn + roll + företag)

---

K.3 — SEO Surface Audit

Identifiera visuella element som påverkar:

Crawlability:

• Text gömd bakom JavaScript-tabs utan SSR → Googlebot ser det inte
• Viktigt innehåll i display:none utan progressiv disclosure
• Bilder utan alt-text

Entity Recognition:

• H1 är unik per sida (kör: document.querySelectorAll('h1').length)
• Brand-namn nämns i H1 eller inom första 100 ord av body-text
• Schema-relaterat innehåll är visuellt synligt (inte bara i <script type="application/ld+json">)

Topical Authority:

• Interna länkar exponeras visuellt (crawlbara anchor-taggar, inga JavaScript-only navigationer)
• Viktiga entiteter (branschtermer, produktnamn) är synliga i rubriker och brödtext
• FAQ-innehåll är synligt i DOM utan JavaScript

För varje SEO-brist:

issue: FAQ-svar gömt bakom JS-toggle
impact: Google ser inte FAQ-innehåll, förlorar FAQ-rich-result
selector: .faq-answer[style="display:none"]
fix: använd <details>/<summary> (native, crawlbar) eller SSR-rendera med CSS toggle

Rapportera alla designbeslut som försämrar SEO-signaler.

---

OUTPUT FORMAT

Audit Header

URL: https://www.quixzoom.com/
Date: YYYY-MM-DD
Viewport tested: 1440px desktop / 390px mobile
Stack identified: [ramverk, CSS-approach]
Lighthouse scores: Performance XX | Accessibility XX | SEO XX | BP XX
WCAG 2.2 AA violations: N
Overflow elements found: N

Per Finding

ID: A-001
Section: A — Overflow
Severity: BLOCKING / HIGH / MEDIUM / LOW
Page: /
Viewport: 390px mobile
Screenshot: [bifogad]

Observation: [exakt vad som är fel]
selector: nav .nav-links
rotorsak: flex-wrap: nowrap på container med overflow: visible
fix: .nav-links { flex-wrap: wrap; } eller overflow: hidden på parent
breakpoint: < 768px
metric impact: CLS +0.05 (layout reflow vid render)

Summary Table

| ID    | Sida | Severity | Sektion | Status |
|-------|------|----------|---------|--------|
| A-001 | /    | BLOCKING | Overflow| OPEN   |
| B-002 | /    | HIGH     | Typography | OPEN |

---

SAJTER ATT AUDITERAS

1. https://www.quixzoom.com/ (alla undersidor i sitemap)
2. https://www.landvex.com/ (alla undersidor i sitemap)

Börja med startsidor desktop → mobil, sedan sub-sidor med <200 ms LCP.

---

NOTES

• quiXzoom: CloudFront CDN framför origin — testa med curl -H "Cache-Control: no-cache" för att se origin-svar vs cached
• Landvex: Direct nginx → test mot origin direkt via curl -H "Host: www.landvex.com" http://127.0.0.1/
• Valuta: aldrig SEK i copy — rapportera som BLOCKING om hittat
• Credits-siffror: 12–80 per mission är canonical — rapportera avvikelse som HIGH