skills.rest
luanrodrigues
luanrodriguesCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

bee:dev-frontend-visual

Generate and verify visual snapshots for frontend component states.

2|1|Updated Mar 3, 2026
Search Tags:#frontend#regression testing#visual testing#component testing#snapshot testing#gate 4
One-click install
npx skills add https://github.com/luanrodrigues/ia-frmwrk --skill bee-dev-frontend-visual
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: bee:dev-frontend-visual
Source: https://github.com/luanrodrigues/ia-frmwrk/tree/main/dev-team/skills/dev-frontend-visual
Command: npx skills add https://github.com/luanrodrigues/ia-frmwrk --skill bee-dev-frontend-visual

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill prevents visual regressions and ensures all frontend components maintain their intended appearance across different states and viewports, catching errors before they reach users.

Core Features & Use Cases

  • Snapshot Testing: Automatically generates and verifies visual snapshots for all component states.
  • Regression Detection: Identifies unintended visual changes introduced during development.
  • Component Duplication Check: Ensures adherence to design system standards by preventing the duplication of UI components.
  • Use Case: After implementing a new button component, this Skill will generate snapshots for its default, hover, and disabled states, and across different screen sizes, ensuring it looks correct and hasn't inadvertently replaced an existing component.

Quick Start

Use the bee:dev-frontend-visual skill to run visual regression tests on the provided implementation files.

Frequently Asked Questions about bee:dev-frontend-visual

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I automate visual regression testing for frontend components?▼

Automate frontend visual regression testing by generating and verifying visual snapshots for all component states across different viewports. This process catches unintended visual changes introduced during development before code review.

What is snapshot testing and when do I need it for frontend development?▼

Snapshot testing captures the visual output of frontend components across various states and screen sizes. You need it to prevent visual regressions and ensure UI components maintain their intended appearance before reaching users.

How do I check for component duplication in a frontend design system?▼

Check for component duplication by running automated checks against your design system standards. This prevents the unintended creation or replacement of existing UI components, ensuring adherence to consistent design patterns.

Can I run visual testing across different screen sizes and edge cases?▼

Yes, visual testing covers all component states, viewports, and edge cases. It generates snapshots for default, hover, and disabled states across different screen sizes to ensure components render correctly everywhere.

What is the best way to catch visual regressions before code review?▼

The best way to catch visual regressions before review is implementing a mandatory testing gate that automatically verifies component snapshots and checks for duplication across all frontend development tasks.

Related Skills

Explore More Software Engineering Skills→
V4-CompanyV4-Company
2

marsai:dev-frontend-visual

Generates and validates UI component snapshots across multiple viewports and states.

Official
Advanced
luanrodriguesluanrodrigues
2

bee:dev-frontend-visual-react-native

Generate Jest snapshot tests for React Native components across iOS and Android.

Community
Advanced
luanrodriguesluanrodrigues
2

bee:dev-frontend-visual-vuejs

Generate and verify visual snapshots for Vue.js components across states and viewports.

Community
Advanced
act70255act70255

ui-visual-validator

Validate UI components for visual consistency, design system compliance, and accessibility.

Community
Advanced