Skill UI

A specialist skill for writing robust, maintainable, and scalable End-to-End (E2E) tests using Playwright. This guide covers setting up test infrastructure, implementing Page Object Model (POM), using role-based selectors, handling API mocking, and debugging flaky tests. Ideal for integrating quality checks into CI/CD pipelines and performing complex browser automation.

Provides Playwright-powered browser automation that detects dev servers, writes tests to /tmp, launches a visible Chromium, and exercises login flows, responsive layouts, form submissions, link checks, or any browser task to validate web functionality.

This comprehensive workflow guides the development of modern, scalable full-stack applications using Next.js 14+, React, and TypeScript. It covers all phases, from project setup and component architecture to advanced data fetching (Server Components, React Query), styling with Tailwind CSS, robust testing (E2E via Playwright), and deployment optimization. Ideal for building complex, production-grade web interfaces.

Provides a comprehensive guide and framework for executing end-to-end (E2E) tests. It simulates real user interactions across the entire application stack, covering browser UI, API calls, and database operations. The guide details best practices like implementing the Page Object Model (POM), configuring multi-browser environments (Playwright, Cypress, Selenium), and establishing robust error handling mechanisms to ensure high application stability and quality.

Automates the generation of professional, high-resolution marketing screenshots for your web application using Playwright. This skill guides you through the entire process, from gathering user requirements (product hunt, social media, documentation) to deep code analysis (routes, components). It ensures comprehensive coverage of key features, providing marketing-ready assets for your product launch or documentation.

Generates Jest/RTL unit tests, analyzes Istanbul coverage, scaffolds Playwright E2E suites, and configures fixtures and mocks to boost React/Next.js QA workflows.

Enforces an 80%+ coverage TDD workflow for feature builds, bug fixes, refactors, and API/component work by writing unit, integration, and Playwright E2E tests first, then implementing code, verifying coverage, and mocking downstream services.

This skill validates web applications across diverse browsers (Chromium, Gecko, WebKit) and real mobile devices. It supports both local testing using Playwright and scalable cloud testing via major platforms like BrowserStack, Sauce Labs, and Kobiton. Use it when ensuring consistent UI/UX, correct CSS rendering, and functional JavaScript behavior regardless of the target environment or device type.

This skill guides the detection of unintended visual changes in user interface (UI) components. It works by capturing screenshots and performing pixel-by-pixel comparisons against approved baselines. It is essential for ensuring UI consistency across code changes, responsive breakpoints, and differing environments. Supports modern tools like Playwright, Percy, and BackstopJS.

A comprehensive toolkit for automating and testing local web applications using Python and Playwright. It supports complex dynamic interactions, managing server lifecycles, identifying stable selectors, capturing visual evidence (screenshots), and debugging UI behavior. The guides follow a robust 'Reconnaissance-Then-Action' pattern for reliable end-to-end testing.

Configure Playwright projects to run on BrowserStack’s cloud grid, add dedicated scripts, fetch builds and sessions, and report per-browser results so you can automate cross-browser/device testing with tunnel support.

Diagnose and fix failing or flaky Playwright tests via a systematic reproduce-trace-categorize-fix workflow, validate stability by repeated runs, and recommend CI safeguards to prevent regressions.