comprehensive-testing-verification

1
0
Source

MASTER Vue.js application testing with strict enforcement of verification protocols. Systematically test functionality with Playwright, validate bug fixes, verify features work, and enforce zero-tolerance policies for false success claims. MANDATORY testing with visual evidence before any deployment or functionality claims.

Install

mkdir -p .claude/skills/comprehensive-testing-verification && curl -L -o skill.zip "https://mcp.directory/api/skills/download/7162" && unzip -o skill.zip -d .claude/skills/comprehensive-testing-verification && rm skill.zip

Installs to .claude/skills/comprehensive-testing-verification

About this skill

Comprehensive Testing

Instructions

Mandatory Testing Protocol

ALWAYS follow this sequence before claiming any feature works:

  1. Environment Setup

    • Navigate to http://localhost:5546
    • Wait for app container to load
    • Verify stores are loaded
    • Check for initial console errors
  2. Real Data Verification

    • Confirm tasks are loaded (not demo content)
    • Verify tasks have real properties (ids, titles, dates)
    • Check no placeholder/demo data exists
  3. Playwright MCP Testing

    • Test functionality in browser
    • Verify visual feedback works correctly
    • Monitor for console errors
    • Confirm state synchronization across views
  4. Cross-View Validation

    • Test sidebar ↔ calendar ↔ kanban sync
    • Verify state changes reflect everywhere
    • Test data persistence after refresh

Zero Tolerance Rules

  • NO console errors allowed (zero tolerance)
  • NO demo content - must use real data
  • NO assumptions - must verify visually
  • NO shortcuts - complete testing required

Critical Validation Checklist

  • Real tasks loaded (not demo content)
  • Zero console errors
  • Visual confirmation in Playwright MCP
  • State synchronized across all views
  • Data persists after page refresh
  • All interactions work as expected

Test Examples

// Test task creation
await page.click('[data-testid="quick-add-task"]')
await page.fill('[data-testid="task-title-input"]', 'Test Task')
await page.click('[data-testid="save-task"]')
await expect(page.locator('[data-testid="sidebar-task"]:has-text("Test Task")')).toBeVisible()

// Test calendar drag-drop
const sidebarTask = page.locator('[data-testid="sidebar-task"]').first()
const timeSlot = page.locator('[data-testid="time-slot"]').first()
await sidebarTask.dragTo(timeSlot)
await expect(page.locator('[data-testid="calendar-event"]')).toBeVisible()

Strict Verification Protocols (Integrated from qa-verify & testing-enforcer)

🚫 ZERO TOLERANCE POLICY

NEVER claim functionality works without mandatory testing evidence. Every success declaration requires:

MANDATORY Verification Sequence

Phase 1: Baseline Verification

  1. Start Application: Run npm run dev
  2. Verify Server Running: Check dev server starts successfully
  3. Verify Build Works: Run npm run build - must pass without errors
  4. Take Baseline Screenshot: Use Playwright MCP to capture initial state

Phase 2: Change Implementation

  1. Make ONE Change: Only one small change at a time
  2. Immediate Build Test: Run npm run build after every single change
  3. Fix Build Errors: If build fails, fix before proceeding
  4. Check Console: Monitor for any console errors

Phase 3: Functional Testing

  1. Navigate to Application: Use Playwright MCP to go to the running app
  2. Take Screenshot: Capture state before testing
  3. Test the Specific Feature: Only test what was changed
  4. Take After Screenshot: Capture state after testing
  5. Check Console: Ensure no errors during testing

Phase 4: Cross-View Verification

  1. Test in Multiple Views: Verify changes work across different app views
  2. Test Data Persistence: Refresh page and verify changes persist
  3. Test Related Features: Ensure no regression in related functionality

🎯 ENFORCEMENT TRIGGERS

Monitored Claim Patterns

The system automatically detects when you claim:

  • "works", "working", "functional"
  • "done", "complete", "finished"
  • "ready", "production-ready", "deployable"
  • "success", "successful", "achieved"
  • "fixed", "resolved", "implemented"
  • "verified", "confirmed", "validated"

Required Evidence for Claims

For UI Changes:

  • ✅ Playwright MCP test results (pass/fail)
  • ✅ Visual screenshots (before/after)
  • ✅ Console error monitoring (clean)
  • ✅ Cross-view compatibility (verified)
  • ✅ Data persistence (confirmed)

For Performance Claims:

  • ✅ Benchmark measurements (before/after)
  • ✅ Memory usage analysis
  • ✅ Load time measurements
  • ✅ Resource utilization data

For Bug Fixes:

  • ✅ Reproduction case (before fix)
  • ✅ Test scenario (after fix)
  • ✅ Regression testing (related features)
  • ✅ Edge case validation

📋 TESTING CHECKLIST

Before Claiming ANY Feature Works:

  • Application starts: npm run dev succeeds
  • Build passes: npm run build no errors
  • Real data present: No demo/placeholder data
  • Visual test passed: Playwright MCP confirms
  • Console clean: No JavaScript errors
  • Cross-view tested: Works in all relevant views
  • Data persists: Survives page refresh
  • Regressions checked: Related features still work
  • Screenshots captured: Before/after evidence
  • Test results documented: Pass/fail evidence recorded

Automatic Claim Detection:

When the system detects a success claim without evidence:

  1. HALT: Stop the workflow
  2. REQUEST: Demand specific testing evidence
  3. GUIDE: Provide exact testing steps required
  4. VERIFY: Confirm evidence meets standards
  5. APPROVE: Only then allow claim to stand

🔍 Evidence Collection Templates

UI Feature Testing Template

// Evidence Collection Template
const evidenceCollection = {
  featureName: "Feature Name",
  claimDate: new Date().toISOString(),
  testingEnvironment: {
    url: "http://localhost:5546",
    browser: "chromium",
    viewport: "1280x720"
  },
  tests: [
    {
      description: "Test specific functionality",
      expectedResult: "Expected outcome",
      actualResult: "Actual outcome",
      status: "PASS/FAIL",
      screenshot: "path/to/screenshot.png",
      evidence: "Detailed test results"
    }
  ],
  verification: {
    buildPassed: true,
    consoleClean: true,
    crossViewTested: true,
    dataPersists: true,
    noRegressions: true
  }
}

This comprehensive testing skill ensures rigorous validation that features actually work with real data, verifiable evidence, and zero tolerance for false success claims. All claims must be backed by mandatory testing evidence before being accepted.


MANDATORY USER VERIFICATION REQUIREMENT

Policy: No Fix Claims Without User Confirmation

CRITICAL: Before claiming ANY issue, bug, or problem is "fixed", "resolved", "working", or "complete", the following verification protocol is MANDATORY:

Step 1: Technical Verification

  • Run all relevant tests (build, type-check, unit tests)
  • Verify no console errors
  • Take screenshots/evidence of the fix

Step 2: User Verification Request

REQUIRED: Use the AskUserQuestion tool to explicitly ask the user to verify the fix:

"I've implemented [description of fix]. Before I mark this as complete, please verify:
1. [Specific thing to check #1]
2. [Specific thing to check #2]
3. Does this fix the issue you were experiencing?

Please confirm the fix works as expected, or let me know what's still not working."

Step 3: Wait for User Confirmation

  • DO NOT proceed with claims of success until user responds
  • DO NOT mark tasks as "completed" without user confirmation
  • DO NOT use phrases like "fixed", "resolved", "working" without user verification

Step 4: Handle User Feedback

  • If user confirms: Document the fix and mark as complete
  • If user reports issues: Continue debugging, repeat verification cycle

Prohibited Actions (Without User Verification)

  • Claiming a bug is "fixed"
  • Stating functionality is "working"
  • Marking issues as "resolved"
  • Declaring features as "complete"
  • Any success claims about fixes

Required Evidence Before User Verification Request

  1. Technical tests passing
  2. Visual confirmation via Playwright/screenshots
  3. Specific test scenarios executed
  4. Clear description of what was changed

Remember: The user is the final authority on whether something is fixed. No exceptions.

math-tools

ananddtyagi

Deterministic mathematical computation using SymPy. Use for ANY math operation requiring exact/verified results - basic arithmetic, algebra (simplify, expand, factor, solve equations), calculus (derivatives, integrals, limits, series), linear algebra (matrices, determinants, eigenvalues), trigonometry, number theory (primes, GCD/LCM, factorization), and statistics. Ensures mathematical accuracy by using symbolic computation rather than LLM estimation.

10611

document-sync

ananddtyagi

A robust skill that analyzes your app's actual codebase, tech stack, configuration, and architecture to ensure ALL documentation is current and accurate. It never assumes—always verifies and compares the live system with every documentation file to detect code-doc drift and generate actionable updates.

161

api-contract-sync-manager

ananddtyagi

Validate OpenAPI, Swagger, and GraphQL schemas match backend implementation. Detect breaking changes, generate TypeScript clients, and ensure API documentation stays synchronized. Use when working with API spec files (.yaml, .json, .graphql), reviewing API changes, generating frontend types, or validating endpoint implementations.

70

safe-project-organizer

ananddtyagi

Safely analyze and reorganize project structure with multi-stage validation, dry-run previews, and explicit user confirmation. Use when projects need cleanup, standardization, or better organization.

50

chief-architect

ananddtyagi

PERSONAL APP ARCHITECT - Strategic development orchestrator for personal productivity applications. Analyzes project context, makes architectural decisions for single-developer projects, delegates to specialized skills, and ensures alignment between user experience goals and technical implementation. Optimized for personal apps targeting 10-100 users.

90

master-plan-manager

ananddtyagi

Safe MASTER_PLAN.md management with backup, validation, and intelligent updates. Use when updating task tracking, adding features to roadmap, or modifying project documentation.

00

You might also like

flutter-development

aj-geddes

Build beautiful cross-platform mobile apps with Flutter and Dart. Covers widgets, state management with Provider/BLoC, navigation, API integration, and material design.

9521,094

drawio-diagrams-enhanced

jgtolentino

Create professional draw.io (diagrams.net) diagrams in XML format (.drawio files) with integrated PMP/PMBOK methodologies, extensive visual asset libraries, and industry-standard professional templates. Use this skill when users ask to create flowcharts, swimlane diagrams, cross-functional flowcharts, org charts, network diagrams, UML diagrams, BPMN, project management diagrams (WBS, Gantt, PERT, RACI), risk matrices, stakeholder maps, or any other visual diagram in draw.io format. This skill includes access to custom shape libraries for icons, clipart, and professional symbols.

843845

ui-ux-pro-max

nextlevelbuilder

"UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient."

570697

godot

bfollington

This skill should be used when working on Godot Engine projects. It provides specialized knowledge of Godot's file formats (.gd, .tscn, .tres), architecture patterns (component-based, signal-driven, resource-based), common pitfalls, validation tools, code templates, and CLI workflows. The `godot` command is available for running the game, validating scripts, importing resources, and exporting builds. Use this skill for tasks involving Godot game development, debugging scene/resource files, implementing game systems, or creating new Godot components.

548492

nano-banana-pro

garg-aayush

Generate and edit images using Google's Nano Banana Pro (Gemini 3 Pro Image) API. Use when the user asks to generate, create, edit, modify, change, alter, or update images. Also use when user references an existing image file and asks to modify it in any way (e.g., "modify this image", "change the background", "replace X with Y"). Supports both text-to-image generation and image-to-image editing with configurable resolution (1K default, 2K, or 4K for high resolution). DO NOT read the image file first - use this skill directly with the --input-image parameter.

670461

fastapi-templates

wshobson

Create production-ready FastAPI projects with async patterns, dependency injection, and comprehensive error handling. Use when building new FastAPI applications or setting up backend API projects.

512280

Stay ahead of the MCP ecosystem

Get weekly updates on new skills and servers.