How does the visual regression testing work?

It utilizes Playwright to capture screenshots of your application and compares them against baseline images, automatically masking dynamic content like dates to prevent false positives.

Can I run these tests in my CI/CD pipeline?

Yes, the skill provides standardized scripts and GitHub Actions examples to seamlessly integrate component, visual, and performance tests into your automated workflows.

Which frameworks does this skill support?

The skill is optimized for React and Next.js applications, supporting both Jest and Vitest for component testing and Playwright for browser-based testing.

Does this skill help with web accessibility compliance?

Yes, it integrates axe-core to scan for WCAG 2.1 AA violations, validating ARIA attributes, color contrast, and keyboard navigation.

What performance metrics are audited?

It runs Lighthouse audits to track Core Web Vitals, including Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), and First Input Delay (FID).

Frontend Testing & Quality Suite

Name: Frontend Testing & Quality Suite
Author: vanman2024

byvanman2024

安全与测试

Implement comprehensive frontend testing patterns for React and Next.js applications, covering component, visual regression, accessibility, and performance audits.

关于

The Frontend Testing skill provides Claude with a robust framework for maintaining high-quality React and Next.js codebases. It automates the setup and execution of a multi-layered testing strategy, including unit and component tests with Jest/Vitest and React Testing Library, visual regression testing via Playwright, and accessibility audits using axe-core. Additionally, it integrates Lighthouse for performance monitoring of Core Web Vitals, ensuring that applications are not only functional but also accessible, visually consistent, and high-performing.

主要功能

Automated initialization of Jest, Vitest, Playwright, and Lighthouse testing environments.
Automated WCAG 2.1 accessibility audits integrated directly into the test workflow.
Component testing patterns using React Testing Library for behavior-driven verification.
Performance benchmarking for Core Web Vitals (LCP, FID, CLS) using Lighthouse.
0 GitHub stars
Visual regression testing with Playwright to detect unintended UI changes and layout shifts.

使用场景

Automating visual and accessibility checks within CI/CD pipelines to prevent regressions.
Generating comprehensive coverage reports that aggregate unit, integration, and performance metrics.
Initializing a standardized testing infrastructure for new or existing React/Next.js projects.

关于

主要功能

Automated initialization of Jest, Vitest, Playwright, and Lighthouse testing environments.
Automated WCAG 2.1 accessibility audits integrated directly into the test workflow.
Component testing patterns using React Testing Library for behavior-driven verification.
Performance benchmarking for Core Web Vitals (LCP, FID, CLS) using Lighthouse.
0 GitHub stars
Visual regression testing with Playwright to detect unintended UI changes and layout shifts.

使用场景

Automating visual and accessibility checks within CI/CD pipelines to prevent regressions.
Generating comprehensive coverage reports that aggregate unit, integration, and performance metrics.
Initializing a standardized testing infrastructure for new or existing React/Next.js projects.