---
title: "React UI Engineering AI Skill Guide (Gemini)"
description: "Operational skill for Gemini to review UI screenshots and a11y trees for focus, roles, and unstable list keys."
category: "Development / React"
tags: ["react", "a11y", "gemini"]
---

# React UI Engineering AI Skill Guide (Gemini)

## Operational Capabilities & Agent Directives

1. **Visual a11y**: Flag icon-only buttons without accessible names.
2. **Focus loss**: List reorder with index keys visible in DOM snapshots.
3. **Effect loops**: Dev-only double mount symptoms—check cleanup.

## Agent Operational Directive

> **MANDATORY**: Recommend semantic controls and stable keys before CSS tweaks.