validate-implementation

name	validate-implementation
description	Validate an implementation for runtime errors, accessibility, and API compliance before committing. Use as a final quality gate after implementing a feature or component.

Skill: Validate Implementation

A quality gate that checks for runtime errors, accessibility issues, and API compliance.

When to Use

After implementing a feature or component, before committing.

Validation Steps

Step 1: TypeScript Type Checking

npm run typecheck
# or: npx tsc --noEmit

Fix any type errors before proceeding.

Step 2: ESLint

npm run lint
# or: npx eslint src/

Fix any lint errors.

Step 3: Unit Tests

npm run test
# or: npx vitest run

All tests must pass.

Step 4: Browser Validation (via Playwright MCP)

If Playwright MCP is available:

1. Navigate to the page with the new feature
2. Walk through the user flow
3. Check for console errors:

// In Playwright evaluate
() => {
  const errors = [];
  const originalError = console.error;
  console.error = (...args) => { errors.push(args.join(' ')); originalError(...args); };
  return errors;
}

4. Verify the UI renders correctly

Step 5: Console Error Check

Monitor the browser console during interaction:

• No TypeError or ReferenceError
• No React warnings (missing keys, prop type mismatches)
• No network errors (404s, 500s)
• No unhandled promise rejections

Quick Checklist

• npm run typecheck passes
• npm run lint passes
• npm run test passes
• Browser loads without console errors
• User flow works as expected
• No React warnings in console