React Review Audit

**Score: 93/100** · 2 errors · 6 warnings

Copy as prompt

```text
Fix the following React Review diagnostics in my codebase.

## Errors (2)

1. [error] jsx-key — src/App.jsx:34
Missing "key" prop for element in iterator.

2. [error] alt-text — src/App.jsx:112
Missing `alt` attribute.

## Warnings (6)

3. [warning] click-events-have-key-events — src/App.jsx:13
Enforce a clickable non-interactive element has at least one keyboard event listener.

4. [warning] no-static-element-interactions — src/App.jsx:13
Static HTML elements with event handlers require a role.

5. [warning] no-inline-exhaustive-style — src/App.jsx:39
13 inline style properties — extract to a CSS class, CSS module, or styled component for maintainability and reuse

6. [warning] no-permanent-will-change — src/App.jsx:120
Permanent will-change wastes GPU memory — apply only during active animation and remove after

7. [warning] no-tiny-text — src/App.jsx:125
Font size 8px is too small — body text should be at least 12px for readability, 16px is ideal

8. [warning] exports — src/App.jsx:0
Unused export: Capybara
```

---

### ❌ Errors (2)

**`jsx-key`**

Missing "key" prop for element in iterator.

> Add a "key" prop to the element in the iterator (https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key).

[`src/App.jsx:34`](https://github.com/aidenybai/capybara-army/blob/9ee63b3d93c41f23dd14d83d2d3232c0d5f40eab/src/App.jsx#L34)

**`alt-text`**

Missing `alt` attribute.

> Must have `alt` prop, either with meaningful text, or an empty string for decorative images.

[`src/App.jsx:112`](https://github.com/aidenybai/capybara-army/blob/9ee63b3d93c41f23dd14d83d2d3232c0d5f40eab/src/App.jsx#L112)

---

### ⚠️ Warnings (6)

**`click-events-have-key-events`**

Enforce a clickable non-interactive element has at least one keyboard event listener.

> Visible, non-interactive elements with click handlers must have one of `keyup`, `keydown`, or `keypress` listener.

[`src/App.jsx:13`](https://github.com/aidenybai/capybara-army/blob/9ee63b3d93c41f23dd14d83d2d3232c0d5f40eab/src/App.jsx#L13)

**`no-static-element-interactions`**

Static HTML elements with event handlers require a role.

> Add a role attribute to this element, or use a semantic HTML element instead.

[`src/App.jsx:13`](https://github.com/aidenybai/capybara-army/blob/9ee63b3d93c41f23dd14d83d2d3232c0d5f40eab/src/App.jsx#L13)

**`no-inline-exhaustive-style`**

13 inline style properties — extract to a CSS class, CSS module, or styled component for maintainability and reuse

> Move styles to a CSS class, CSS module, Tailwind utilities, or a styled component — inline objects with many properties hurt readability and create new references every render

[`src/App.jsx:39`](https://github.com/aidenybai/capybara-army/blob/9ee63b3d93c41f23dd14d83d2d3232c0d5f40eab/src/App.jsx#L39)

**`no-permanent-will-change`**

Permanent will-change wastes GPU memory — apply only during active animation and remove after

> Add will-change on animation start (`onMouseEnter`) and remove on end (`onAnimationEnd`). Permanent promotion wastes GPU memory and can degrade performance

[`src/App.jsx:120`](https://github.com/aidenybai/capybara-army/blob/9ee63b3d93c41f23dd14d83d2d3232c0d5f40eab/src/App.jsx#L120)

**`no-tiny-text`**

Font size 8px is too small — body text should be at least 12px for readability, 16px is ideal

> Use at least 12px for body content, 16px is ideal. Small text is hard to read, especially on high-DPI mobile screens

[`src/App.jsx:125`](https://github.com/aidenybai/capybara-army/blob/9ee63b3d93c41f23dd14d83d2d3232c0d5f40eab/src/App.jsx#L125)

**`exports`**

Unused export: Capybara

[`src/App.jsx:0`](https://github.com/aidenybai/capybara-army/blob/9ee63b3d93c41f23dd14d83d2d3232c0d5f40eab/src/App.jsx#L0)

---

_{Last scored May 18, 2026 at 10:18 AM UTC. Maintained by [React Review](https://github.com/millionco/react-review).}