Compare Playwright screenshots and analyze Pencil layouts for UI changes.
npx skills add https://github.com/matteobortolazzo/cenci --skill verify-ui-matteobortolazzo
Please help me install this Agent Skill. Skill: verify-ui Source: https://github.com/matteobortolazzo/cenci/tree/main/flow/skills/verify-ui Command: npx skills add https://github.com/matteobortolazzo/cenci --skill verify-ui-matteobortolazzo
This Skill solves the challenge of ensuring that frontend changes do not introduce visual regressions, layout breaks, or clipping issues that standard unit tests often miss.
Run the verify-ui skill to perform a visual layout check and screenshot comparison on the current frontend changes.
High-intent search queries and answers about installing and using this skill.
Automated visual regression testing captures and compares Playwright screenshots of UI components to detect visual changes. This skill applies Pencil layout analysis to identify clipping, overflow, or misalignment issues that standard unit tests often miss before PR approval.
Visual layout inspection is the process of detecting clipping, overflow, and misalignment in design layouts. You need it when implementing new UI components, such as a navigation bar, to ensure they render correctly across different states and do not overlap existing content.
Yes, you can use Playwright and Pencil together to detect UI clipping and overflow issues. Playwright handles browser-based rendering to capture screenshots, while Pencil validates the design-to-code layout to ensure visual consistency and layout integrity.
To run a visual layout check, execute the visual verification process on your current frontend changes. The skill performs automated screenshot comparison and Pencil layout validation to verify that your components render correctly without introducing visual regressions.
Visual regression testing catches layout breaks, clipping issues, and visual regressions that standard unit tests miss. By leveraging Playwright screenshots and Pencil layout analysis, it ensures visual consistency and layout integrity are maintained throughout frontend development workflows.
The best way to verify UI integrity before a pull request is combining Playwright screenshot comparison with Pencil layout validation. This automated visual verification ensures no visual regressions or misalignment issues are introduced, maintaining visual consistency for PR approval.
hffmnnjCompare screenshots pixel-by-pixel to detect unintended UI changes.
patrykk21Automate visual and functional web page verification with Playwright.
PrasadTelasulaTest React components with React Testing Library and Playwright for frontend correctness.
MolcajeteAIAutomate visual regression testing with Playwright and Percy across browsers and viewports.
