What is the primary purpose of this skill?

It automates the creation and verification of visual snapshot tests to ensure frontend components look correct in every state and on every device.

What viewports are covered by default?

It tests for mobile (375px), tablet (768px), and desktop (1280px) viewports to ensure responsive layout integrity.

Does this skill require manual test writing?

No, it orchestrates a QA subagent that analyzes your implementation files and automatically generates the necessary snapshot test code.

How does it handle component duplication?

It specifically checks if a component in your local UI directory is already available in the 'sindarian-ui' library to prevent code bloat.

When should I run Gate 4?

This skill should be used immediately after unit testing (Gate 3) is complete and before moving to E2E testing (Gate 5).

Frontend Visual Snapshot Testing

Name: Frontend Visual Snapshot Testing
Author: LerianStudio

byLerianStudio

•

135

•

デザインツール

Automates visual snapshot testing for frontend components across multiple states and responsive viewports to prevent UI regressions.

This skill orchestrates the fourth gate of the frontend development cycle, ensuring comprehensive visual coverage for every component. It dispatches a specialized QA subagent to generate and verify snapshot tests for various UI states—including loading, error, and empty states—as well as specific responsive breakpoints (375px, 768px, 1280px). By enforcing strict quality gates and checking for component library duplication, it maintains design system integrity and catches visual regressions automatically before the code reaches the review stage.

主な機能

01Integration with the Ring workflow system for mandatory quality gates

02Comprehensive state coverage including Loading, Error, Success, and Disabled

03Multi-viewport snapshot testing for mobile, tablet, and desktop layouts

04Automated detection of UI component duplication against core libraries

05Detailed reporting of snapshot coverage and visual testing metrics

06135 GitHub stars

ユースケース

01Ensuring UI consistency across responsive breakpoints during component development

02Enforcing design system standards by preventing redundant local component creation

03Preventing visual regressions in complex UI components with multiple logical states

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add lerianstudio/ring dev-frontend-visual

For use in Claude.ai and ChatGPT

Download Skill