Frontend with Playwright — SKILL 入口

What problem does it solve?

This skill provides a framework for front-end development verification using Playwright to prevent reliance on assumptions about DOM/CSS/JS structures and rendering. It promotes a read-before-write discipline, modular references, and deterministic checks that apply across vanilla HTML/CSS/JS as well as modern frameworks.

Core Features & Use Cases

• Read Before Write: verify the actual DOM topology before writing CSS or JS, ensuring rules are grounded in real structure.
• CSS First, JS Augment: separate concerns by keeping styling in CSS and using JS to toggle state, not inline styles.
• Measure, Don't Assume: use live measurements and Playwright evaluations to validate layout and interactions, reducing guesswork.
• Framework-Coexistence & References: guidelines for integrating with framework-managed DOM and a set of reference scenarios to cover common front-end tasks.

Quick Start

Run a read-before-write workflow on a frontend project to begin validating live DOM/CSS/JS interactions with Playwright.