Jump To Section +
Summary How to Read Overview Features Roles Matrix Coherence FAQ Navigation Audit Visual Checks Viewports Heatmap Timeline Findings Disputed Coverage Recommendations Appendix
Unified Product + QA Report

spel Report — {APP_NAME}

A structured view of product coverage, visual quality, interaction coherence, and verified issues across the audited experience.

URL: {APP_URL} Date: {DATE} Scope: {SCOPE} Session: {SESSION_ID}
Pipeline: {PIPELINE_STAGES}

Executive Summary

{FEATURE_COUNT}
Features
{USER_ROLES_COUNT}
User Roles
{PAGES_DISCOVERED}
Pages
{COHERENCE_SCORE}
Coherence
{CRITICAL_COUNT}
Critical
{HIGH_COUNT}
High
{MEDIUM_COUNT}
Medium
{LOW_COUNT}
Low
{TOTAL_COUNT}
Total Issues
Severity Distribution
Critical
{CRITICAL_COUNT}
High
{HIGH_COUNT}
Medium
{MEDIUM_COUNT}
Low
{LOW_COUNT}
Audit Coverage
Pages Audited{PAGES_AUDITED}
Categories Audited{CATEGORIES_CHECKED}
Viewports Tested{VIEWPORTS_TESTED}
Screenshots Captured{TOTAL_SCREENSHOTS}
Verified
{VERIFIED_COUNT}
Reported
{REPORTED_COUNT}
Checks Passed
{CHECKS_PASSED}

Verdict: {VERDICT_SUMMARY}

Pages audited: {PAGES_AUDITED} Categories audited: {CATEGORIES_CHECKED} Viewports: {VIEWPORTS_TESTED}
Checks passed: {CHECKS_PASSED} Checks failed: {CHECKS_FAILED} Checks skipped: {CHECKS_SKIPPED}

How To Read This Report

Score Labels

Coherence scores use a 0-100 scale: 80-100 = stable and consistent, 60-79 = usable with notable friction, below 60 = corrective design work should be prioritized.

Severity Labels
  • Critical blocks core tasks or causes data/security risk
  • High strongly degrades key user flows
  • Medium creates repeated friction or confusion
  • Low cosmetic or edge-case quality issues
Evidence Rule

A finding is considered verified only when both reproduction steps and concrete evidence (snapshot refs, screenshots, logs, or transcript traces) are present.

Decision Logic
1Discovery maps pages, roles, and feature intent so issues are judged against expected product behavior.
2Hunter proposes potential bugs and attaches first-pass evidence from real interactions.
3Skeptic challenges weak claims, attempts counter-evidence, and filters false positives.
4Referee confirms only issues with reproducible proof and assigns final severity for prioritization.

Product Overview

Metadata

Product Name {APP_NAME}
URL {APP_URL}
Category {PRODUCT_CATEGORY}
Industry {PRODUCT_INDUSTRY}
Target Audience {TARGET_AUDIENCE}
Discovery Date {DISCOVERY_DATE}

Description

{PRODUCT_DESCRIPTION}

Value Proposition

{VALUE_PROPOSITION}

Feature Inventory

Complete list of discovered features organized by category.

Mapped Features
{FEATURE_COUNT}
Pages Supporting Features
{PAGES_DISCOVERED}
Role Touchpoints
{USER_ROLES_COUNT}
ID Feature Category Location Status
F-001 User authentication Security /login Verified
F-002 Dashboard overview Core /dashboard Gated
F-003 Search functionality Navigation /search Untested

User Roles

Identified user personas and their primary tasks.

Administrator
Verified
Full system access with configuration and user management capabilities.
  • Manage user accounts
  • Configure system settings
  • View audit logs
  • Access all features
Standard User
Verified
Regular user with access to core features based on permissions.
  • Create and edit content
  • View dashboard
  • Use search features
  • Manage personal settings
Guest
Inferred
Limited read-only access for unauthenticated visitors.
  • View public content
  • Search public resources
  • Register for account

Feature Matrix

Cross-reference of user roles and feature availability.

Role / Feature Auth Dashboard Search Settings Admin Reports API
Administrator ✓ ✓ ✓ ✓ ✓ ✓ ✓
Standard User ✓ ✓ ✓ ✓ ✗ ◐ ✗
Guest ✗ ✗ ◐ ✗ ✗ ✗ ✗
✓ = Full access ◐ = Partial access ✗ = No access

Coherence Audit

Evaluation across 8 coherence dimensions.

{COHERENCE_SCORE}Overall Coherence

Signal, Not Noise

The score summarizes consistency across visual language, interaction behavior, and recovery quality. Use low-scoring dimensions below as the immediate design and QA backlog.

Visual Consistency 85
85%
  • Minor color variation in secondary buttons
Refs: @e1a, @e2b
Interaction Patterns 92
92%
  • No issues found
Refs: @e3c
Navigation Flow 74
74%
  • Deep menu hierarchy (4+ levels)
  • Missing breadcrumb on settings pages
Refs: @e4d, @e5e
Terminology 88
88%
  • Some pages have inconsistent heading hierarchy
Refs: @e6f
responsive_behavior 58
58%
  • Tables overflow on mobile
  • Modal dialogs cut off at 320px
  • Navigation collapses poorly
Refs: @e7g, @e8h, @e9i
Accessibility Baseline 71
71%
  • Missing alt text on 12 images
  • Focus indicators inconsistent
Refs: @e10j, @e11k
Loading States 82
82%
  • Large bundle on initial load
Refs: @e12l
Error Handling 65
65%
  • Generic error messages
  • No retry mechanism for failed requests
  • Form validation feedback delayed
Refs: @e13m, @e14n, @e15o

FAQ

Common questions and answers about the product.

How do I reset my password?
Navigate to the login page and click "Forgot Password". Enter your email address and follow the instructions sent to your inbox. The reset link expires after 24 hours.
What browsers are supported?
The application supports Chrome 90+, Firefox 88+, Safari 14+, and Edge 90+. Internet Explorer is not supported.
How do I export my data?
Go to Settings → Data Management → Export. You can choose between JSON, CSV, or PDF formats. Large exports may take several minutes to process.

Automated Audit

Machine-verified quality checks from spel audit.

{AUDIT_STRUCTURE_SECTIONS}
Structure
{AUDIT_CONTRAST_FAILING}
Contrast Fails
{AUDIT_COLORS_COUNT}
Colors
{AUDIT_LAYOUT_COUNT}
Layout Issues
{AUDIT_FONTS_COUNT}
Fonts
{AUDIT_LINKS_BROKEN}
Broken Links
{AUDIT_HEADINGS_VALID}
Headings
Text Contrast ({AUDIT_CONTRAST_FAILING} failing)
{AUDIT_CONTRAST_DETAILS}
Layout Issues ({AUDIT_LAYOUT_COUNT} issues)
{AUDIT_LAYOUT_DETAILS}
Font Audit ({AUDIT_FONTS_COUNT} fonts)
{AUDIT_FONTS_DETAILS}
Link Health ({AUDIT_LINKS_BROKEN} broken)
{AUDIT_LINKS_DETAILS}
Heading Structure ({AUDIT_HEADINGS_VALID})
{AUDIT_HEADINGS_DETAILS}
Color Palette ({AUDIT_COLORS_COUNT} unique colors)
{AUDIT_COLORS_DETAILS}
Page Structure ({AUDIT_STRUCTURE_SECTIONS} sections)
{AUDIT_STRUCTURE_DETAILS}

Visual Checks

✓
Duplicate Elements
No duplicate logos, headings, or nav blocks found
✗
Visual Coherence
Badge placement in task list rows is inconsistent — badges shift horizontally based on title length
Refs: @e4kqmn, @e7xrtw, @e9bnnq
Annotated screenshot showing inconsistent badge placement

Viewport Audit

/homepage
Desktop 1280×720
Homepage at desktop viewport
✓ No overflow 0 bugs
Tablet 768×1024
Homepage at tablet viewport
✓ No overflow 1 bug
Mobile 375×667
Homepage at mobile viewport
✗ Overflow 2 bugs

Severity Heatmap

Verified Findings
{VERIFIED_COUNT}
Reported Findings
{REPORTED_COUNT}
Disputed Findings
{DISPUTED_COUNT}
Page / Feature Functional Visual A11y UX Perf API
/login 1 0 1 1 0 0

Activity Timeline

00:00:01 [Hunter] Navigating to {APP_URL}
00:00:04 [Hunter] Taking snapshot — found 24 interactive elements
00:00:12 ISSUE-001 Submit button not keyboard-accessible

Findings

ISSUE-001 Critical accessibility /login
DEV QA Verified
Found by: Hunter · Challenged by: Skeptic · Verdict: Referee CONFIRMED

Submit button not keyboard-accessible

The login form's submit button cannot be reached via Tab key navigation. Users relying on keyboard-only input cannot submit the form.

Steps to Reproduce

  1. Navigate to /login
  2. Click the email input field
  3. Press Tab to move through form elements
  4. Observe: focus skips the Submit button entirely
Screenshot showing focus order skipping Submit button
Focus indicator jumps from password field to footer link, skipping Submit
Analysis

The submit button uses a <div> with an onclick handler instead of a native <button> element. It has no tabindex attribute and no role="button" ARIA role, making it invisible to keyboard navigation and screen readers.

[a11y] Element div.submit-btn is not focusable — missing tabindex or native interactive element
Confidence: High Impact: Blocks keyboard-only and screen reader users from logging in

Disputed Bugs

ISSUE-002 Medium visual

Button text truncated on mobile viewport

Hunter: Button text clips at 375px width → Skeptic: Text wraps correctly — tested on iPhone 14 emulation → ✗ DISMISSED
Referee note: Skeptic provided counter-evidence at exact viewport. Hunter's screenshot was at 320px, not 375px. Bug is device-specific edge case, downgraded from Medium to Low risk.

Coverage Report

URL Pages Visited Elements Tested Console Errors Screenshots
/login 1 24 0 3
Total {TOTAL_PAGES_VISITED} {TOTAL_ELEMENTS_TESTED} {TOTAL_CONSOLE_ERRORS} {TOTAL_SCREENSHOTS}

Recommendations

Actionable items to improve the product.

1
Fix Mobile Responsiveness Issues
Address table overflow, modal cutoff, and navigation collapse problems identified in the responsiveness audit. Consider implementing a mobile-first approach for critical user flows.
2
Improve Error Handling UX
Replace generic error messages with specific, actionable guidance. Add retry mechanisms for failed requests and improve form validation timing.
3
Enhance Navigation Structure
Add breadcrumb navigation to settings pages and consider flattening the menu hierarchy to reduce cognitive load.
4
Address Accessibility Gaps
Add descriptive alt text to all images and standardize focus indicator styling across all interactive elements.
5
Optimize Bundle Size
Implement code splitting and lazy loading to reduce initial bundle size and improve time-to-interactive metrics.

Appendix

Raw data and methodology notes.

Discovery Methodology

This product discovery was performed using automated browser exploration with the following approach: 1. Initial page load and snapshot at {APP_URL} 2. Recursive link discovery within same origin 3. Interactive element enumeration per page 4. Feature identification through DOM analysis 5. Role inference from navigation patterns 6. Coherence scoring via heuristics Checks used: discovery, analysis, cataloging Session duration: {SESSION_DURATION} Pages crawled: {PAGES_CRAWLED} Elements analyzed: {ELEMENTS_ANALYZED}

Coherence Scoring Criteria

Visual Consistency (85): Color palette, typography, spacing uniformity Interaction Patterns (92): Consistent hover/focus states, button styles Navigation Flow (74): Menu depth, breadcrumb presence, URL structure Terminology (88): Heading hierarchy, list formatting, whitespace responsive_behavior (58): Mobile layout, touch targets, overflow handling Accessibility Baseline (71): Alt text, focus indicators, ARIA labels Loading States (82): Load time, bundle size, lazy loading Error Handling (65): Error message clarity, recovery options, validation Overall coherence: {OVERALL_COHERENCE_SCORE}

Session Metadata

Session ID: {SESSION_ID} Started: {SESSION_START} Ended: {SESSION_END} Duration: {SESSION_DURATION} User Agent: {USER_AGENT} Viewport: {VIEWPORT_SIZE} Screenshots: {TOTAL_SCREENSHOTS} Network requests: {NETWORK_REQUESTS}