ring/dev-team/skills/dev-frontend-visual/SKILL.md

name	description	trigger	skip_when	NOT_skip_when	sequence	related	input_schema	output_schema	verification
ring:dev-frontend-visual	Gate 4 of frontend development cycle - ensures all components have snapshot tests covering all states, viewports, and edge cases.	- After unit testing complete (Gate 3) - MANDATORY for all frontend development tasks - Catches visual regressions before review	- Not inside a frontend development cycle (ring:dev-cycle-frontend) - Backend-only project with no UI components - Task is documentation-only, configuration-only, or non-code - No new UI components were added or visual changes made in this cycle	- "Snapshots are brittle" - Brittle snapshots catch unintended changes. - "We test visually in the browser" - Manual testing doesn't catch regressions. - "Only default state matters" - Users see error, loading, and empty states too.	after before ring:dev-unit-testing ring:dev-frontend-e2e	complementary ring:dev-cycle-frontend ring:dev-unit-testing ring:qa-analyst-frontend	required optional name type description unit_id string Task or subtask identifier name type items description implementation_files array string Files from Gate 0 implementation name type description ux_criteria_path string Path to ux-criteria.md from product-designer name type description gate3_handoff object Full handoff from Gate 3 (unit testing)	format required_sections metrics markdown name pattern required Visual Testing Summary ^## Visual Testing Summary true name pattern required Snapshot Coverage ^## Snapshot Coverage true name pattern required Component Duplication Check ^## Component Duplication Check true name pattern required Handoff to Next Gate ^## Handoff to Next Gate true name type values result enum PASS FAIL name type components_with_snapshots integer name type total_snapshots integer name type snapshot_failures integer name type iterations integer	automated manual command description success_pattern grep -rn 'toMatchSnapshot' --include='*.test.tsx' --include='*.snapshot.test.tsx' . Snapshot tests exist toMatchSnapshot command description success_pattern find . -name '*.snap' -type f | head -5 Snapshot files generated .snap All component states have snapshots Responsive viewports covered (375px, 768px, 1280px) No sindarian-ui component duplication in components/ui/

Dev Frontend Visual Testing (Gate 4)

Overview

Ensure all frontend components have snapshot tests covering all states, responsive viewports, and edge cases. Detect visual regressions before code review.

Core principle: If a user can see it, it must have a snapshot. All states, all viewports.

<block_condition>

• Missing state snapshots = FAIL
• Snapshot test failures = FAIL
• sindarian-ui component duplicated in shadcn = FAIL </block_condition>

CRITICAL: Role Clarification

This skill ORCHESTRATES. Frontend QA Analyst Agent (visual mode) EXECUTES.

Who	Responsibility
This Skill	Gather requirements, dispatch agent, track iterations
QA Analyst Frontend Agent	Write snapshot tests, verify states, check duplication

---

Standards Reference

MANDATORY: Load testing-visual.md standards via WebFetch.

<fetch_required> https://raw.githubusercontent.com/LerianStudio/ring/main/dev-team/docs/standards/frontend/testing-visual.md </fetch_required>

---

Step 1: Validate Input

REQUIRED INPUT:
- unit_id: [task/subtask being tested]
- implementation_files: [files from Gate 0]

OPTIONAL INPUT:
- ux_criteria_path: [path to ux-criteria.md]
- gate3_handoff: [full Gate 3 output]

if any REQUIRED input is missing:
  → STOP and report: "Missing required input: [field]"

Step 2: Dispatch Frontend QA Analyst Agent (Visual Mode)

Task tool:
  subagent_type: "ring:qa-analyst-frontend"
  prompt: |
    **MODE:** VISUAL TESTING (Gate 4)

    **Standards:** Load testing-visual.md

    **Input:**
    - Unit ID: {unit_id}
    - Implementation Files: {implementation_files}
    - UX Criteria: {ux_criteria_path or "N/A"}

    **Requirements:**
    1. Create snapshot tests for all components
    2. Cover all states (Default, Empty, Loading, Error, Success, Disabled)
    3. Add responsive snapshots (375px, 768px, 1280px) for layout components
    4. Test edge cases (long text, 0 items, special characters)
    5. Verify no sindarian-ui component duplication in components/ui/

    **Output Sections Required:**
    - ## Visual Testing Summary
    - ## Snapshot Coverage
    - ## Component Duplication Check
    - ## Handoff to Next Gate

Step 3: Evaluate Results

Parse agent output:

if "Status: PASS" in output:
  → Gate 4 PASSED
  → Return success with metrics

if "Status: FAIL" in output:
  → If missing snapshots: re-dispatch agent to add missing
  → If duplication found: re-dispatch implementation agent to fix
  → Re-run visual tests (max 3 iterations)
  → If still failing: ESCALATE to user

Step 4: Generate Output

## Visual Testing Summary
**Status:** {PASS|FAIL}
**Components with Snapshots:** {count}
**Total Snapshots:** {count}
**Snapshot Failures:** {count}

## Snapshot Coverage
| Component | States | Viewports | Edge Cases | Status |
|-----------|--------|-----------|------------|--------|
| {component} | {X/Y} | {X/Y or N/A} | {description} | {PASS|FAIL} |

## Component Duplication Check
| Component in components/ui/ | In sindarian-ui? | Status |
|-----------------------------|------------------|--------|
| {component} | {Yes|No} | {PASS|FAIL} |

## Handoff to Next Gate
- Ready for Gate 5 (E2E Testing): {YES|NO}
- Iterations: {count}

---

Severity Calibration

Severity	Criteria	Examples
CRITICAL	Component duplication, major visual regression	sindarian-ui duplicated in shadcn, layout completely broken
HIGH	Missing state snapshots, snapshot failures	No loading/error state snapshot, unexpected diff
MEDIUM	Incomplete coverage, minor visual issues	Missing viewport size, edge case not tested
LOW	Documentation, test organization	Missing snapshot descriptions, file naming

Report all severities. CRITICAL = immediate fix. HIGH = fix before gate pass. MEDIUM = fix in iteration. LOW = document.

---

Anti-Rationalization Table

See shared-patterns/shared-anti-rationalization.md for universal anti-rationalizations. Gate-specific:

Rationalization	Why It's WRONG	Required Action
"Snapshots are brittle"	Brittle = catches unintended changes. That's the point.	Write snapshot tests
"We test visually in browser"	Manual testing misses regressions. Automated is repeatable.	Add snapshot tests
"Only default state matters"	Error and loading states are user-facing.	Test all states
"Mobile is just smaller"	Layout changes at breakpoints. Test all viewports.	Add responsive snapshots
"This shadcn component is better"	sindarian-ui is PRIMARY. Don't duplicate.	Check sindarian-ui first

---