Design Audit

THIS SKILL TRIGGERS EVERYTHING

When user asks to "check my site" or "recommend improvements", this skill should:

1. •Run comprehensive multi-category analysis
2. •Spawn all 5 validation agents
3. •Check SEO, CRO, Psychology, Accessibility
4. •Provide prioritized recommendations
5. •Offer to fix via other skills

Comprehensive Analysis Categories

Load ALL Relevant References

# 6-Layer Audit
READ: ../../references/audit/first-impression.md
READ: ../../references/audit/copy-clarity.md
READ: ../../references/audit/psychological-triggers.md
READ: ../../references/audit/cta-audit.md
READ: ../../references/audit/mobile-audit.md
READ: ../../references/audit/seo-audit.md

# Psychology (for root cause analysis)
READ: ../../references/psychology/visual-hierarchy.md
READ: ../../references/psychology/trust-signals.md
READ: ../../references/psychology/cognitive-biases.md

# Design System (for visual analysis)
READ: ../../references/design-system/spacing-scale.md
READ: ../../references/design-system/shadows-elevation.md
READ: ../../references/design-system/component-states.md

# SEO (often forgotten!)
READ: ../../references/seo/heading-hierarchy.md
READ: ../../references/seo/meta-titles.md
READ: ../../references/seo/meta-descriptions.md

# Performance
READ: ../../references/performance/core-web-vitals.md

Conversion Benchmarks (Know the Context)

Before auditing, understand what "good" looks like:

Traffic source matters: Email traffic converts at 19.3% vs paid search baseline

The 6-Layer Framework

Layer 1: First Impression (0-5 seconds)

Reference: ../../references/audit/first-impression.md

Layer 2: Copy Clarity

Reference: ../../references/audit/copy-clarity.md

Layer 3: Psychological Triggers

Reference: ../../references/audit/psychological-triggers.md

Testimonial optimization:

• •3-5 on homepage, 100+ in library = 37% higher conversions
• •Show 4.2-4.5 stars (not 5.0) — perfect ratings seem fake
• •Video testimonials: +80% conversion vs text

Layer 4: CTA Effectiveness

Reference: ../../references/audit/cta-audit.md

Layer 5: Mobile Experience

Reference: ../../references/audit/mobile-audit.md

Reality check: 82.9% of visitors are mobile, but convert 8% less than desktop. Close that gap.

Layer 6: Technical SEO

Reference: ../../references/audit/seo-audit.md

Confidence Scoring

Only report findings you can verify. Rate every issue:

Example confidence assessment:

• •"Button is 32px tall" = 95% (measurable)
• •"Headline seems vague" = 75% (subjective)
• •"Users might not understand" = 50% (speculation)

Root Cause Analysis

After completing layers, ask:

1. Is This a Symptom or the Cause?

• •Multiple small buttons → Cause: No design system with spacing standards
• •Inconsistent colors → Cause: No token architecture
• •Weak copy throughout → Cause: No brand voice guidelines

2. What Pattern Repeats?

3. Why Did This Happen?

• •Template without customization → Recommend brand differentiation
• •No design review process → Recommend design audit checklist
• •Solo developer → Recommend design system adoption

Severity Classification

Report Format

## Audit Report: [Page Name]

**Conversion Potential**: [Current estimate] → [Post-fix estimate]
**Priority Score**: X critical, Y important, Z minor

### Executive Summary
[2-3 sentences: biggest problems and biggest opportunities]

### Layer-by-Layer Findings

#### Layer 1: First Impression
- 🔴 [Finding] (95% confidence)
  - Location: [file:line or element]
  - Impact: [conversion impact]
  - Fix: [specific action]

[Continue for all 6 layers...]

### Root Cause Analysis
[Pattern identified and systemic fix]

---
**CHECKPOINT**: What would you like me to fix?
1. Fix all (batches of 3)
2. Fix critical only
3. Fix specific issue
4. Export report

Anti-patterns (When Auditing)

Reference Loading for Fixes

After Audit: Fix or Redesign

After presenting findings, offer clear next steps:

---
**NEXT STEPS:**

1. **Quick Fixes** - Fix critical issues one by one (I'll preserve current design)
2. **Improve Mode** - Apply all fixes while keeping current direction
3. **Redesign Mode** - If issues are systemic, consider fresh redesign
   → I'll ask about desired personality and build new

Which would you like?

When to Suggest Redesign vs Fix

MANDATORY PIPELINE (DO NOT SKIP)

This skill is part of a multi-step pipeline. You MUST follow these steps:

PHASE 1: Pre-Audit (MANDATORY)

Before auditing, you MUST load ALL audit references:

READ: ../../references/audit/first-impression.md
READ: ../../references/audit/copy-clarity.md
READ: ../../references/audit/psychological-triggers.md
READ: ../../references/audit/cta-audit.md
READ: ../../references/audit/mobile-audit.md
READ: ../../references/audit/seo-audit.md

PHASE 2: Multi-Agent Validation (MANDATORY)

You MUST spawn ALL 5 validation agents in parallel:

"Let me launch all 5 Forgex validation agents in parallel..."

In a single message, launch these Task tool calls:

1. •

   design-validator

   • •Prompt: "Validate visual hierarchy, consistency, responsiveness, and polish for [target]. Score 0-100 with specific issues."
2. •

   accessibility-checker

   • •Prompt: "Check WCAG 2.1 AA compliance for [target]. Check Perceivable, Operable, Understandable, Robust. Score 0-100."
3. •

   mobile-validator

   • •Prompt: "Validate touch targets, thumb zones, text readability, form usability for [target]. Score 0-100."
4. •

   dark-mode-checker

   • •Prompt: "Check dark mode implementation for [target]. Look for pure black, shadow issues, saturation, FOUC, form elements. Score 0-100."
5. •

   copy-analyzer

   • •Prompt: "Analyze headlines, CTAs, value propositions, psychology triggers for [target]. Score 0-100."

PHASE 3: 6-Layer Framework Overlay

After agents complete, apply the 6-layer framework:

1. •First Impression (0-5 seconds)
2. •Copy Clarity
3. •Psychological Triggers
4. •CTA Effectiveness
5. •Mobile Experience
6. •Technical SEO

Cross-reference agent findings with framework checklist.

PHASE 4: Aggregate & Report

1. •Collect all agent scores
2. •Filter findings to ≥80% confidence
3. •Classify severity (Critical/Important/Minor)
4. •Identify root causes (patterns that repeat)
5. •Generate unified report (format above)

PHASE 5: Completion

Present findings with CHECKPOINT:

---
**CHECKPOINT**: What would you like me to fix?
1. Fix all (batches of 3)
2. Fix critical only
3. Fix specific issue
4. Export report

FIX MODE PIPELINE

When fixing issues:

1. •

   For copy issues → Invoke copy-optimizer skill

   • •Load psychology frameworks
   • •Apply headline/CTA transformations
   • •Re-run copy-analyzer to verify
2. •

   For component issues → Invoke component-builder skill

   • •Load relevant pattern references
   • •Rebuild component with fixes
   • •Re-run design-validator to verify
3. •

   For theme/color issues → Invoke theme-system skill

   • •Load dark-mode-antipatterns
   • •Fix contrast, color issues
   • •Re-run dark-mode-checker to verify
4. •

   For mobile issues → Load and apply:

   code

   READ: ../../references/mobile/thumb-zone.md
   READ: ../../references/mobile/touch-targets.md
   

   • •Re-run mobile-validator to verify

After Fixes

• •Re-run affected validation agents
• •Confirm all scores ≥80
• •Only then mark complete

REDESIGN MODE

When issues are systemic (3+ root causes):

1. •Suggest redesign option
2. •If accepted, invoke component-builder with redesign mode
3. •Full pipeline runs for new design