**Score: 86/100** · 1 error · 95 warnings

Copy as prompt

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

## Errors (1)

1. [error] require-reduced-motion — kitchen-sink/package.json:0
Project uses a motion library but has no prefers-reduced-motion handling — required for accessibility (WCAG 2.3.3)

## Warnings (95)

2. [warning] label-has-associated-control — kitchen-sink/src/demos/demo-infinite-scroll.tsx:53
A form label must be associated with a control.

3. [warning] no-derived-state-effect — kitchen-sink/src/demos/demo-infinite-scroll.tsx:23
Derived state in useEffect — wrap the calculation in useMemo([deps]) (or compute it directly during render if it isn't expensive)

4. [warning] no-pure-black-background — kitchen-sink/src/demos/demo-infinite-scroll.tsx:52
Pure black background (bg-black) looks harsh — use a near-black tinted toward your brand hue (e.g. bg-gray-950)

5. [warning] no-pure-black-background — kitchen-sink/src/demos/demo-infinite-scroll.tsx:79
Pure black background (bg-black) looks harsh — use a near-black tinted toward your brand hue (e.g. bg-gray-950)

6. [warning] no-inline-exhaustive-style — kitchen-sink/src/demos/demo-infinite-scroll.tsx:96
14 inline style properties — extract to a CSS class, CSS module, or styled component for maintainability and reuse

7. [warning] label-has-associated-control — kitchen-sink/src/demos/demo-flexbox-masonry.tsx:80
A form label must be associated with a control.

8. [warning] label-has-associated-control — kitchen-sink/src/demos/demo-flexbox-masonry.tsx:89
A form label must be associated with a control.

9. [warning] label-has-associated-control — kitchen-sink/src/demos/demo-flexbox-masonry.tsx:99
A form label must be associated with a control.

10. [warning] no-pure-black-background — kitchen-sink/src/demos/demo-flexbox-masonry.tsx:79
Pure black background (bg-black) looks harsh — use a near-black tinted toward your brand hue (e.g. bg-gray-950)

11. [warning] no-inline-exhaustive-style — kitchen-sink/src/demos/demo-flexbox-masonry.tsx:144
10 inline style properties — extract to a CSS class, CSS module, or styled component for maintainability and reuse

12. [warning] no-layout-transition-inline — kitchen-sink/src/demos/demo-flexbox-masonry.tsx:154
Transitioning layout property "height" causes layout thrash every frame — use transform and opacity instead

13. [warning] label-has-associated-control — kitchen-sink/src/demos/demo-grid-shuffle.tsx:150
A form label must be associated with a control.

14. [warning] label-has-associated-control — kitchen-sink/src/demos/demo-grid-shuffle.tsx:159
A form label must be associated with a control.

15. [warning] label-has-associated-control — kitchen-sink/src/demos/demo-grid-shuffle.tsx:169
A form label must be associated with a control.

16. [warning] prefer-useReducer — kitchen-sink/src/demos/demo-grid-shuffle.tsx:117
Component "DemoGridShuffle" has 5 useState calls — consider useReducer for related state

17. [warning] no-pure-black-background — kitchen-sink/src/demos/demo-grid-shuffle.tsx:149
Pure black background (bg-black) looks harsh — use a near-black tinted toward your brand hue (e.g. bg-gray-950)

18. [warning] label-has-associated-control — kitchen-sink/src/demos/demo-horizontal-carousel.tsx:35
A form label must be associated with a control.

19. [warning] label-has-associated-control — kitchen-sink/src/demos/demo-horizontal-carousel.tsx:44
A form label must be associated with a control.

20. [warning] no-pure-black-background — kitchen-sink/src/demos/demo-horizontal-carousel.tsx:34
Pure black background (bg-black) looks harsh — use a near-black tinted toward your brand hue (e.g. bg-gray-950)

21. [warning] no-inline-exhaustive-style — kitchen-sink/src/demos/demo-horizontal-carousel.tsx:90
11 inline style properties — extract to a CSS class, CSS module, or styled component for maintainability and reuse

22. [warning] label-has-associated-control — kitchen-sink/src/demos/demo-fade-gallery.tsx:43
A form label must be associated with a control.

23. [warning] label-has-associated-control — kitchen-sink/src/demos/demo-fade-gallery.tsx:52
A form label must be associated with a control.

24. [warning] no-pure-black-background — kitchen-sink/src/demos/demo-fade-gallery.tsx:42
Pure black background (bg-black) looks harsh — use a near-black tinted toward your brand hue (e.g. bg-gray-950)

25. [warning] no-inline-exhaustive-style — kitchen-sink/src/demos/demo-fade-gallery.tsx:97
13 inline style properties — extract to a CSS class, CSS module, or styled component for maintainability and reuse

26. [warning] label-has-associated-control — kitchen-sink/src/demos/demo-framer-cards.tsx:27
A form label must be associated with a control.

27. [warning] label-has-associated-control — kitchen-sink/src/demos/demo-framer-cards.tsx:36
A form label must be associated with a control.

28. [warning] use-lazy-motion — kitchen-sink/src/demos/demo-framer-cards.tsx:2
Import "m" with LazyMotion instead of "motion" — saves ~30kb in bundle size

29. [warning] no-pure-black-background — kitchen-sink/src/demos/demo-framer-cards.tsx:26
Pure black background (bg-black) looks harsh — use a near-black tinted toward your brand hue (e.g. bg-gray-950)

30. [warning] no-inline-exhaustive-style — kitchen-sink/src/demos/demo-framer-cards.tsx:82
11 inline style properties — extract to a CSS class, CSS module, or styled component for maintainability and reuse

31. [warning] no-pure-black-background — kitchen-sink/src/index.tsx:169
Pure black background (bg-black) looks harsh — use a near-black tinted toward your brand hue (e.g. bg-gray-950)

32. [warning] no-pure-black-background — kitchen-sink/src/index.tsx:170
Pure black background (bg-black) looks harsh — use a near-black tinted toward your brand hue (e.g. bg-gray-950)

33. [warning] design-no-bold-heading — kitchen-sink/src/index.tsx:171
font-bold on

crushes counter shapes at display sizes — use font-semibold (600) or font-medium (500)

34. [warning] js-combine-iterations — kitchen-sink/src/index.tsx:180
.filter().map() iterates the array twice — combine into a single loop with .reduce() or for...of

35. [warning] no-pure-black-background — kitchen-sink/src/index.tsx:356
Pure black background (bg-black) looks harsh — use a near-black tinted toward your brand hue (e.g. bg-gray-950)

36. [warning] no-pure-black-background — kitchen-sink/src/index.tsx:363
Pure black background (bg-black) looks harsh — use a near-black tinted toward your brand hue (e.g. bg-gray-950)

37. [warning] design-no-redundant-padding-axes — kitchen-sink/src/index.tsx:363
px-6 py-6 → use the shorthand p-6

38. [warning] design-no-bold-heading — kitchen-sink/src/index.tsx:364
font-bold on

crushes counter shapes at display sizes — use font-semibold (600) or font-medium (500)

39. [warning] design-no-three-period-ellipsis — kitchen-sink/src/index.tsx:367
Three-period ellipsis ("...") in JSX text — use the actual ellipsis character "…" (or `…`)

40. [warning] no-cascading-set-state — kitchen-sink/src/demos/demo-floating-selection.tsx:18
4 setState calls in a single useEffect — consider using useReducer or deriving state

41. [warning] no-pure-black-background — kitchen-sink/src/demos/demo-floating-selection.tsx:58
Pure black background (bg-black) looks harsh — use a near-black tinted toward your brand hue (e.g. bg-gray-950)

42. [warning] no-z-index-9999 — kitchen-sink/src/demos/demo-floating-selection.tsx:104
z-index: 1000 is arbitrarily high — use a deliberate z-index scale (1–50). Extreme values signal a stacking context problem, not a fix

43. [warning] no-inline-exhaustive-style — kitchen-sink/src/demos/demo-floating-selection.tsx:92
12 inline style properties — extract to a CSS class, CSS module, or styled component for maintainability and reuse

44. [warning] label-has-associated-control — kitchen-sink/src/demos/demo-drag-snap-grid.tsx:82
A form label must be associated with a control.

45. [warning] label-has-associated-control — kitchen-sink/src/demos/demo-drag-snap-grid.tsx:91
A form label must be associated with a control.

46. [warning] no-static-element-interactions — kitchen-sink/src/demos/demo-drag-snap-grid.tsx:111
Static HTML elements with event handlers require a role.

47. [warning] no-static-element-interactions — kitchen-sink/src/demos/demo-drag-snap-grid.tsx:130
Static HTML elements with event handlers require a role.

48. [warning] prefer-useReducer — kitchen-sink/src/demos/demo-drag-snap-grid.tsx:20
Component "DemoDragSnapGrid" has 5 useState calls — consider useReducer for related state

49. [warning] no-pure-black-background — kitchen-sink/src/demos/demo-drag-snap-grid.tsx:81
Pure black background (bg-black) looks harsh — use a near-black tinted toward your brand hue (e.g. bg-gray-950)

50. [warning] no-inline-exhaustive-style — kitchen-sink/src/demos/demo-drag-snap-grid.tsx:134
17 inline style properties — extract to a CSS class, CSS module, or styled component for maintainability and reuse

51. [warning] label-has-associated-control — kitchen-sink/src/demos/demo-container-query.tsx:62
A form label must be associated with a control.

52. [warning] label-has-associated-control — kitchen-sink/src/demos/demo-container-query.tsx:71
A form label must be associated with a control.

53. [warning] no-pure-black-background — kitchen-sink/src/demos/demo-container-query.tsx:61
Pure black background (bg-black) looks harsh — use a near-black tinted toward your brand hue (e.g. bg-gray-950)

54. [warning] label-has-associated-control — kitchen-sink/src/demos/demo-stacked-layers.tsx:49
A form label must be associated with a control.

55. [warning] label-has-associated-control — kitchen-sink/src/demos/demo-stacked-layers.tsx:58
A form label must be associated with a control.

56. [warning] label-has-associated-control — kitchen-sink/src/demos/demo-stacked-layers.tsx:68
A form label must be associated with a control.

57. [warning] no-pure-black-background — kitchen-sink/src/demos/demo-stacked-layers.tsx:48
Pure black background (bg-black) looks harsh — use a near-black tinted toward your brand hue (e.g. bg-gray-950)

58. [warning] no-inline-exhaustive-style — kitchen-sink/src/demos/demo-stacked-layers.tsx:98
16 inline style properties — extract to a CSS class, CSS module, or styled component for maintainability and reuse

59. [warning] click-events-have-key-events — kitchen-sink/src/demos/demo-3d-flip-cards.tsx:106
Enforce a clickable non-interactive element has at least one keyboard event listener.

60. [warning] label-has-associated-control — kitchen-sink/src/demos/demo-3d-flip-cards.tsx:60
A form label must be associated with a control.

61. [warning] label-has-associated-control — kitchen-sink/src/demos/demo-3d-flip-cards.tsx:69
A form label must be associated with a control.

62. [warning] label-has-associated-control — kitchen-sink/src/demos/demo-3d-flip-cards.tsx:79
A form label must be associated with a control.

63. [warning] no-static-element-interactions — kitchen-sink/src/demos/demo-3d-flip-cards.tsx:106
Static HTML elements with event handlers require a role.

64. [warning] no-pure-black-background — kitchen-sink/src/demos/demo-3d-flip-cards.tsx:59
Pure black background (bg-black) looks harsh — use a near-black tinted toward your brand hue (e.g. bg-gray-950)

65. [warning] no-inline-exhaustive-style — kitchen-sink/src/demos/demo-3d-flip-cards.tsx:128
12 inline style properties — extract to a CSS class, CSS module, or styled component for maintainability and reuse

66. [warning] no-inline-exhaustive-style — kitchen-sink/src/demos/demo-3d-flip-cards.tsx:146
13 inline style properties — extract to a CSS class, CSS module, or styled component for maintainability and reuse

67. [warning] label-has-associated-control — kitchen-sink/src/demos/demo-scale-rotate-spiral.tsx:48
A form label must be associated with a control.

68. [warning] label-has-associated-control — kitchen-sink/src/demos/demo-scale-rotate-spiral.tsx:57
A form label must be associated with a control.

69. [warning] label-has-associated-control — kitchen-sink/src/demos/demo-scale-rotate-spiral.tsx:67
A form label must be associated with a control.

70. [warning] no-pure-black-background — kitchen-sink/src/demos/demo-scale-rotate-spiral.tsx:47
Pure black background (bg-black) looks harsh — use a near-black tinted toward your brand hue (e.g. bg-gray-950)

71. [warning] no-inline-exhaustive-style — kitchen-sink/src/demos/demo-scale-rotate-spiral.tsx:99
12 inline style properties — extract to a CSS class, CSS module, or styled component for maintainability and reuse

72. [warning] label-has-associated-control — kitchen-sink/src/demos/demo-scroll-snap-pager.tsx:50
A form label must be associated with a control.

73. [warning] client-passive-event-listeners — kitchen-sink/src/demos/demo-scroll-snap-pager.tsx:34
"scroll" listener without { passive: true } — blocks scrolling performance. Only add { passive: true } if the handler does NOT call event.preventDefault() (passive listeners silently ignore preventDefault())

74. [warning] no-pure-black-background — kitchen-sink/src/demos/demo-scroll-snap-pager.tsx:49
Pure black background (bg-black) looks harsh — use a near-black tinted toward your brand hue (e.g. bg-gray-950)

75. [warning] no-pure-black-background — kitchen-sink/src/demos/demo-scroll-snap-pager.tsx:77
Pure black background (bg-black) looks harsh — use a near-black tinted toward your brand hue (e.g. bg-gray-950)

76. [warning] no-inline-exhaustive-style — kitchen-sink/src/demos/demo-scroll-snap-pager.tsx:89
12 inline style properties — extract to a CSS class, CSS module, or styled component for maintainability and reuse

77. [warning] label-has-associated-control — kitchen-sink/src/demos/demo-picture-in-picture.tsx:52
A form label must be associated with a control.

78. [warning] no-pure-black-background — kitchen-sink/src/demos/demo-picture-in-picture.tsx:51
Pure black background (bg-black) looks harsh — use a near-black tinted toward your brand hue (e.g. bg-gray-950)

79. [warning] no-inline-exhaustive-style — kitchen-sink/src/demos/demo-picture-in-picture.tsx:79
11 inline style properties — extract to a CSS class, CSS module, or styled component for maintainability and reuse

80. [warning] no-inline-exhaustive-style — kitchen-sink/src/demos/demo-picture-in-picture.tsx:108
17 inline style properties — extract to a CSS class, CSS module, or styled component for maintainability and reuse

81. [warning] click-events-have-key-events — kitchen-sink/src/demos/demo-portal-modals.tsx:17
Enforce a clickable non-interactive element has at least one keyboard event listener.

82. [warning] click-events-have-key-events — kitchen-sink/src/demos/demo-portal-modals.tsx:24
Enforce a clickable non-interactive element has at least one keyboard event listener.

83. [warning] no-static-element-interactions — kitchen-sink/src/demos/demo-portal-modals.tsx:17
Static HTML elements with event handlers require a role.

84. [warning] no-static-element-interactions — kitchen-sink/src/demos/demo-portal-modals.tsx:24
Static HTML elements with event handlers require a role.

85. [warning] no-pure-black-background — kitchen-sink/src/demos/demo-portal-modals.tsx:83
Pure black background (bg-black) looks harsh — use a near-black tinted toward your brand hue (e.g. bg-gray-950)

86. [warning] label-has-associated-control — kitchen-sink/src/demos/demo-nested-scrollers.tsx:32
A form label must be associated with a control.

87. [warning] label-has-associated-control — kitchen-sink/src/demos/demo-nested-scrollers.tsx:41
A form label must be associated with a control.

88. [warning] label-has-associated-control — kitchen-sink/src/demos/demo-nested-scrollers.tsx:50
A form label must be associated with a control.

89. [warning] no-pure-black-background — kitchen-sink/src/demos/demo-nested-scrollers.tsx:31
Pure black background (bg-black) looks harsh — use a near-black tinted toward your brand hue (e.g. bg-gray-950)

90. [warning] no-pure-black-background — kitchen-sink/src/demos/demo-nested-scrollers.tsx:77
Pure black background (bg-black) looks harsh — use a near-black tinted toward your brand hue (e.g. bg-gray-950)

91. [warning] no-array-index-as-key — kitchen-sink/src/demos/demo-nested-scrollers.tsx:86
Array index "index" used as key — causes bugs when list is reordered or filtered

92. [warning] label-has-associated-control — kitchen-sink/src/demos/demo-masked-carousel.tsx:44
A form label must be associated with a control.

93. [warning] label-has-associated-control — kitchen-sink/src/demos/demo-masked-carousel.tsx:53
A form label must be associated with a control.

94. [warning] no-pure-black-background — kitchen-sink/src/demos/demo-masked-carousel.tsx:43
Pure black background (bg-black) looks harsh — use a near-black tinted toward your brand hue (e.g. bg-gray-950)

95. [warning] no-pure-black-background — kitchen-sink/src/demos/demo-masked-carousel.tsx:79
Pure black background (bg-black) looks harsh — use a near-black tinted toward your brand hue (e.g. bg-gray-950)

96. [warning] no-inline-exhaustive-style — kitchen-sink/src/demos/demo-masked-carousel.tsx:97
9 inline style properties — extract to a CSS class, CSS module, or styled component for maintainability and reuse
```

---

### ❌ Errors (1)

**`require-reduced-motion`**

Project uses a motion library but has no prefers-reduced-motion handling — required for accessibility (WCAG 2.3.3)

> Add `useReducedMotion()` from your animation library, or a `@media (prefers-reduced-motion: reduce)` CSS query

[`kitchen-sink/package.json:0`](https://github.com/aidenybai/stickies/blob/b883abe43aa6573b4f964c207c8c5968a17ac42d/kitchen-sink/package.json#L0)

---

### ⚠️ Warnings (95)

**`label-has-associated-control`**

A form label must be associated with a control.

> Either give the label a `htmlFor` attribute with the id of the associated control, or wrap the label around the control.

[`kitchen-sink/src/demos/demo-infinite-scroll.tsx:53`](https://github.com/aidenybai/stickies/blob/b883abe43aa6573b4f964c207c8c5968a17ac42d/kitchen-sink/src/demos/demo-infinite-scroll.tsx#L53)
[`kitchen-sink/src/demos/demo-flexbox-masonry.tsx:80`](https://github.com/aidenybai/stickies/blob/b883abe43aa6573b4f964c207c8c5968a17ac42d/kitchen-sink/src/demos/demo-flexbox-masonry.tsx#L80)
[`kitchen-sink/src/demos/demo-flexbox-masonry.tsx:89`](https://github.com/aidenybai/stickies/blob/b883abe43aa6573b4f964c207c8c5968a17ac42d/kitchen-sink/src/demos/demo-flexbox-masonry.tsx#L89)
[`kitchen-sink/src/demos/demo-flexbox-masonry.tsx:99`](https://github.com/aidenybai/stickies/blob/b883abe43aa6573b4f964c207c8c5968a17ac42d/kitchen-sink/src/demos/demo-flexbox-masonry.tsx#L99)
[`kitchen-sink/src/demos/demo-grid-shuffle.tsx:150`](https://github.com/aidenybai/stickies/blob/b883abe43aa6573b4f964c207c8c5968a17ac42d/kitchen-sink/src/demos/demo-grid-shuffle.tsx#L150)
[`kitchen-sink/src/demos/demo-grid-shuffle.tsx:159`](https://github.com/aidenybai/stickies/blob/b883abe43aa6573b4f964c207c8c5968a17ac42d/kitchen-sink/src/demos/demo-grid-shuffle.tsx#L159)
[`kitchen-sink/src/demos/demo-grid-shuffle.tsx:169`](https://github.com/aidenybai/stickies/blob/b883abe43aa6573b4f964c207c8c5968a17ac42d/kitchen-sink/src/demos/demo-grid-shuffle.tsx#L169)
[`kitchen-sink/src/demos/demo-horizontal-carousel.tsx:35`](https://github.com/aidenybai/stickies/blob/b883abe43aa6573b4f964c207c8c5968a17ac42d/kitchen-sink/src/demos/demo-horizontal-carousel.tsx#L35)
[`kitchen-sink/src/demos/demo-horizontal-carousel.tsx:44`](https://github.com/aidenybai/stickies/blob/b883abe43aa6573b4f964c207c8c5968a17ac42d/kitchen-sink/src/demos/demo-horizontal-carousel.tsx#L44)
[`kitchen-sink/src/demos/demo-fade-gallery.tsx:43`](https://github.com/aidenybai/stickies/blob/b883abe43aa6573b4f964c207c8c5968a17ac42d/kitchen-sink/src/demos/demo-fade-gallery.tsx#L43)
[`kitchen-sink/src/demos/demo-fade-gallery.tsx:52`](https://github.com/aidenybai/stickies/blob/b883abe43aa6573b4f964c207c8c5968a17ac42d/kitchen-sink/src/demos/demo-fade-gallery.tsx#L52)
[`kitchen-sink/src/demos/demo-framer-cards.tsx:27`](https://github.com/aidenybai/stickies/blob/b883abe43aa6573b4f964c207c8c5968a17ac42d/kitchen-sink/src/demos/demo-framer-cards.tsx#L27)
[`kitchen-sink/src/demos/demo-framer-cards.tsx:36`](https://github.com/aidenybai/stickies/blob/b883abe43aa6573b4f964c207c8c5968a17ac42d/kitchen-sink/src/demos/demo-framer-cards.tsx#L36)
[`kitchen-sink/src/demos/demo-drag-snap-grid.tsx:82`](https://github.com/aidenybai/stickies/blob/b883abe43aa6573b4f964c207c8c5968a17ac42d/kitchen-sink/src/demos/demo-drag-snap-grid.tsx#L82)
[`kitchen-sink/src/demos/demo-drag-snap-grid.tsx:91`](https://github.com/aidenybai/stickies/blob/b883abe43aa6573b4f964c207c8c5968a17ac42d/kitchen-sink/src/demos/demo-drag-snap-grid.tsx#L91)
[`kitchen-sink/src/demos/demo-container-query.tsx:62`](https://github.com/aidenybai/stickies/blob/b883abe43aa6573b4f964c207c8c5968a17ac42d/kitchen-sink/src/demos/demo-container-query.tsx#L62)
[`kitchen-sink/src/demos/demo-container-query.tsx:71`](https://github.com/aidenybai/stickies/blob/b883abe43aa6573b4f964c207c8c5968a17ac42d/kitchen-sink/src/demos/demo-container-query.tsx#L71)
[`kitchen-sink/src/demos/demo-stacked-layers.tsx:49`](https://github.com/aidenybai/stickies/blob/b883abe43aa6573b4f964c207c8c5968a17ac42d/kitchen-sink/src/demos/demo-stacked-layers.tsx#L49)
[`kitchen-sink/src/demos/demo-stacked-layers.tsx:58`](https://github.com/aidenybai/stickies/blob/b883abe43aa6573b4f964c207c8c5968a17ac42d/kitchen-sink/src/demos/demo-stacked-layers.tsx#L58)
[`kitchen-sink/src/demos/demo-stacked-layers.tsx:68`](https://github.com/aidenybai/stickies/blob/b883abe43aa6573b4f964c207c8c5968a17ac42d/kitchen-sink/src/demos/demo-stacked-layers.tsx#L68)
[`kitchen-sink/src/demos/demo-3d-flip-cards.tsx:60`](https://github.com/aidenybai/stickies/blob/b883abe43aa6573b4f964c207c8c5968a17ac42d/kitchen-sink/src/demos/demo-3d-flip-cards.tsx#L60)
[`kitchen-sink/src/demos/demo-3d-flip-cards.tsx:69`](https://github.com/aidenybai/stickies/blob/b883abe43aa6573b4f964c207c8c5968a17ac42d/kitchen-sink/src/demos/demo-3d-flip-cards.tsx#L69)
[`kitchen-sink/src/demos/demo-3d-flip-cards.tsx:79`](https://github.com/aidenybai/stickies/blob/b883abe43aa6573b4f964c207c8c5968a17ac42d/kitchen-sink/src/demos/demo-3d-flip-cards.tsx#L79)
[`kitchen-sink/src/demos/demo-scale-rotate-spiral.tsx:48`](https://github.com/aidenybai/stickies/blob/b883abe43aa6573b4f964c207c8c5968a17ac42d/kitchen-sink/src/demos/demo-scale-rotate-spiral.tsx#L48)
[`kitchen-sink/src/demos/demo-scale-rotate-spiral.tsx:57`](https://github.com/aidenybai/stickies/blob/b883abe43aa6573b4f964c207c8c5968a17ac42d/kitchen-sink/src/demos/demo-scale-rotate-spiral.tsx#L57)
[`kitchen-sink/src/demos/demo-scale-rotate-spiral.tsx:67`](https://github.com/aidenybai/stickies/blob/b883abe43aa6573b4f964c207c8c5968a17ac42d/kitchen-sink/src/demos/demo-scale-rotate-spiral.tsx#L67)
[`kitchen-sink/src/demos/demo-scroll-snap-pager.tsx:50`](https://github.com/aidenybai/stickies/blob/b883abe43aa6573b4f964c207c8c5968a17ac42d/kitchen-sink/src/demos/demo-scroll-snap-pager.tsx#L50)
[`kitchen-sink/src/demos/demo-picture-in-picture.tsx:52`](https://github.com/aidenybai/stickies/blob/b883abe43aa6573b4f964c207c8c5968a17ac42d/kitchen-sink/src/demos/demo-picture-in-picture.tsx#L52)
[`kitchen-sink/src/demos/demo-nested-scrollers.tsx:32`](https://github.com/aidenybai/stickies/blob/b883abe43aa6573b4f964c207c8c5968a17ac42d/kitchen-sink/src/demos/demo-nested-scrollers.tsx#L32)
[`kitchen-sink/src/demos/demo-nested-scrollers.tsx:41`](https://github.com/aidenybai/stickies/blob/b883abe43aa6573b4f964c207c8c5968a17ac42d/kitchen-sink/src/demos/demo-nested-scrollers.tsx#L41)
[`kitchen-sink/src/demos/demo-nested-scrollers.tsx:50`](https://github.com/aidenybai/stickies/blob/b883abe43aa6573b4f964c207c8c5968a17ac42d/kitchen-sink/src/demos/demo-nested-scrollers.tsx#L50)
[`kitchen-sink/src/demos/demo-masked-carousel.tsx:44`](https://github.com/aidenybai/stickies/blob/b883abe43aa6573b4f964c207c8c5968a17ac42d/kitchen-sink/src/demos/demo-masked-carousel.tsx#L44)
[`kitchen-sink/src/demos/demo-masked-carousel.tsx:53`](https://github.com/aidenybai/stickies/blob/b883abe43aa6573b4f964c207c8c5968a17ac42d/kitchen-sink/src/demos/demo-masked-carousel.tsx#L53)

**`no-pure-black-background`**

Pure black background (bg-black) looks harsh — use a near-black tinted toward your brand hue (e.g. bg-gray-950)

> Tint the background slightly toward your brand hue — e.g. `#0a0a0f` or Tailwind's `bg-gray-950`. Pure black looks harsh on modern displays

[`kitchen-sink/src/demos/demo-infinite-scroll.tsx:52`](https://github.com/aidenybai/stickies/blob/b883abe43aa6573b4f964c207c8c5968a17ac42d/kitchen-sink/src/demos/demo-infinite-scroll.tsx#L52)
[`kitchen-sink/src/demos/demo-infinite-scroll.tsx:79`](https://github.com/aidenybai/stickies/blob/b883abe43aa6573b4f964c207c8c5968a17ac42d/kitchen-sink/src/demos/demo-infinite-scroll.tsx#L79)
[`kitchen-sink/src/demos/demo-flexbox-masonry.tsx:79`](https://github.com/aidenybai/stickies/blob/b883abe43aa6573b4f964c207c8c5968a17ac42d/kitchen-sink/src/demos/demo-flexbox-masonry.tsx#L79)
[`kitchen-sink/src/demos/demo-grid-shuffle.tsx:149`](https://github.com/aidenybai/stickies/blob/b883abe43aa6573b4f964c207c8c5968a17ac42d/kitchen-sink/src/demos/demo-grid-shuffle.tsx#L149)
[`kitchen-sink/src/demos/demo-horizontal-carousel.tsx:34`](https://github.com/aidenybai/stickies/blob/b883abe43aa6573b4f964c207c8c5968a17ac42d/kitchen-sink/src/demos/demo-horizontal-carousel.tsx#L34)
[`kitchen-sink/src/demos/demo-fade-gallery.tsx:42`](https://github.com/aidenybai/stickies/blob/b883abe43aa6573b4f964c207c8c5968a17ac42d/kitchen-sink/src/demos/demo-fade-gallery.tsx#L42)
[`kitchen-sink/src/demos/demo-framer-cards.tsx:26`](https://github.com/aidenybai/stickies/blob/b883abe43aa6573b4f964c207c8c5968a17ac42d/kitchen-sink/src/demos/demo-framer-cards.tsx#L26)
[`kitchen-sink/src/index.tsx:169`](https://github.com/aidenybai/stickies/blob/b883abe43aa6573b4f964c207c8c5968a17ac42d/kitchen-sink/src/index.tsx#L169)
[`kitchen-sink/src/index.tsx:170`](https://github.com/aidenybai/stickies/blob/b883abe43aa6573b4f964c207c8c5968a17ac42d/kitchen-sink/src/index.tsx#L170)
[`kitchen-sink/src/index.tsx:356`](https://github.com/aidenybai/stickies/blob/b883abe43aa6573b4f964c207c8c5968a17ac42d/kitchen-sink/src/index.tsx#L356)
[`kitchen-sink/src/index.tsx:363`](https://github.com/aidenybai/stickies/blob/b883abe43aa6573b4f964c207c8c5968a17ac42d/kitchen-sink/src/index.tsx#L363)
[`kitchen-sink/src/demos/demo-floating-selection.tsx:58`](https://github.com/aidenybai/stickies/blob/b883abe43aa6573b4f964c207c8c5968a17ac42d/kitchen-sink/src/demos/demo-floating-selection.tsx#L58)
[`kitchen-sink/src/demos/demo-drag-snap-grid.tsx:81`](https://github.com/aidenybai/stickies/blob/b883abe43aa6573b4f964c207c8c5968a17ac42d/kitchen-sink/src/demos/demo-drag-snap-grid.tsx#L81)
[`kitchen-sink/src/demos/demo-container-query.tsx:61`](https://github.com/aidenybai/stickies/blob/b883abe43aa6573b4f964c207c8c5968a17ac42d/kitchen-sink/src/demos/demo-container-query.tsx#L61)
[`kitchen-sink/src/demos/demo-stacked-layers.tsx:48`](https://github.com/aidenybai/stickies/blob/b883abe43aa6573b4f964c207c8c5968a17ac42d/kitchen-sink/src/demos/demo-stacked-layers.tsx#L48)
[`kitchen-sink/src/demos/demo-3d-flip-cards.tsx:59`](https://github.com/aidenybai/stickies/blob/b883abe43aa6573b4f964c207c8c5968a17ac42d/kitchen-sink/src/demos/demo-3d-flip-cards.tsx#L59)
[`kitchen-sink/src/demos/demo-scale-rotate-spiral.tsx:47`](https://github.com/aidenybai/stickies/blob/b883abe43aa6573b4f964c207c8c5968a17ac42d/kitchen-sink/src/demos/demo-scale-rotate-spiral.tsx#L47)
[`kitchen-sink/src/demos/demo-scroll-snap-pager.tsx:49`](https://github.com/aidenybai/stickies/blob/b883abe43aa6573b4f964c207c8c5968a17ac42d/kitchen-sink/src/demos/demo-scroll-snap-pager.tsx#L49)
[`kitchen-sink/src/demos/demo-scroll-snap-pager.tsx:77`](https://github.com/aidenybai/stickies/blob/b883abe43aa6573b4f964c207c8c5968a17ac42d/kitchen-sink/src/demos/demo-scroll-snap-pager.tsx#L77)
[`kitchen-sink/src/demos/demo-picture-in-picture.tsx:51`](https://github.com/aidenybai/stickies/blob/b883abe43aa6573b4f964c207c8c5968a17ac42d/kitchen-sink/src/demos/demo-picture-in-picture.tsx#L51)
[`kitchen-sink/src/demos/demo-portal-modals.tsx:83`](https://github.com/aidenybai/stickies/blob/b883abe43aa6573b4f964c207c8c5968a17ac42d/kitchen-sink/src/demos/demo-portal-modals.tsx#L83)
[`kitchen-sink/src/demos/demo-nested-scrollers.tsx:31`](https://github.com/aidenybai/stickies/blob/b883abe43aa6573b4f964c207c8c5968a17ac42d/kitchen-sink/src/demos/demo-nested-scrollers.tsx#L31)
[`kitchen-sink/src/demos/demo-nested-scrollers.tsx:77`](https://github.com/aidenybai/stickies/blob/b883abe43aa6573b4f964c207c8c5968a17ac42d/kitchen-sink/src/demos/demo-nested-scrollers.tsx#L77)
[`kitchen-sink/src/demos/demo-masked-carousel.tsx:43`](https://github.com/aidenybai/stickies/blob/b883abe43aa6573b4f964c207c8c5968a17ac42d/kitchen-sink/src/demos/demo-masked-carousel.tsx#L43)
[`kitchen-sink/src/demos/demo-masked-carousel.tsx:79`](https://github.com/aidenybai/stickies/blob/b883abe43aa6573b4f964c207c8c5968a17ac42d/kitchen-sink/src/demos/demo-masked-carousel.tsx#L79)

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

14 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

[`kitchen-sink/src/demos/demo-infinite-scroll.tsx:96`](https://github.com/aidenybai/stickies/blob/b883abe43aa6573b4f964c207c8c5968a17ac42d/kitchen-sink/src/demos/demo-infinite-scroll.tsx#L96)
[`kitchen-sink/src/demos/demo-flexbox-masonry.tsx:144`](https://github.com/aidenybai/stickies/blob/b883abe43aa6573b4f964c207c8c5968a17ac42d/kitchen-sink/src/demos/demo-flexbox-masonry.tsx#L144)
[`kitchen-sink/src/demos/demo-horizontal-carousel.tsx:90`](https://github.com/aidenybai/stickies/blob/b883abe43aa6573b4f964c207c8c5968a17ac42d/kitchen-sink/src/demos/demo-horizontal-carousel.tsx#L90)
[`kitchen-sink/src/demos/demo-fade-gallery.tsx:97`](https://github.com/aidenybai/stickies/blob/b883abe43aa6573b4f964c207c8c5968a17ac42d/kitchen-sink/src/demos/demo-fade-gallery.tsx#L97)
[`kitchen-sink/src/demos/demo-framer-cards.tsx:82`](https://github.com/aidenybai/stickies/blob/b883abe43aa6573b4f964c207c8c5968a17ac42d/kitchen-sink/src/demos/demo-framer-cards.tsx#L82)
[`kitchen-sink/src/demos/demo-floating-selection.tsx:92`](https://github.com/aidenybai/stickies/blob/b883abe43aa6573b4f964c207c8c5968a17ac42d/kitchen-sink/src/demos/demo-floating-selection.tsx#L92)
[`kitchen-sink/src/demos/demo-drag-snap-grid.tsx:134`](https://github.com/aidenybai/stickies/blob/b883abe43aa6573b4f964c207c8c5968a17ac42d/kitchen-sink/src/demos/demo-drag-snap-grid.tsx#L134)
[`kitchen-sink/src/demos/demo-stacked-layers.tsx:98`](https://github.com/aidenybai/stickies/blob/b883abe43aa6573b4f964c207c8c5968a17ac42d/kitchen-sink/src/demos/demo-stacked-layers.tsx#L98)
[`kitchen-sink/src/demos/demo-3d-flip-cards.tsx:128`](https://github.com/aidenybai/stickies/blob/b883abe43aa6573b4f964c207c8c5968a17ac42d/kitchen-sink/src/demos/demo-3d-flip-cards.tsx#L128)
[`kitchen-sink/src/demos/demo-3d-flip-cards.tsx:146`](https://github.com/aidenybai/stickies/blob/b883abe43aa6573b4f964c207c8c5968a17ac42d/kitchen-sink/src/demos/demo-3d-flip-cards.tsx#L146)
[`kitchen-sink/src/demos/demo-scale-rotate-spiral.tsx:99`](https://github.com/aidenybai/stickies/blob/b883abe43aa6573b4f964c207c8c5968a17ac42d/kitchen-sink/src/demos/demo-scale-rotate-spiral.tsx#L99)
[`kitchen-sink/src/demos/demo-scroll-snap-pager.tsx:89`](https://github.com/aidenybai/stickies/blob/b883abe43aa6573b4f964c207c8c5968a17ac42d/kitchen-sink/src/demos/demo-scroll-snap-pager.tsx#L89)
[`kitchen-sink/src/demos/demo-picture-in-picture.tsx:79`](https://github.com/aidenybai/stickies/blob/b883abe43aa6573b4f964c207c8c5968a17ac42d/kitchen-sink/src/demos/demo-picture-in-picture.tsx#L79)
[`kitchen-sink/src/demos/demo-picture-in-picture.tsx:108`](https://github.com/aidenybai/stickies/blob/b883abe43aa6573b4f964c207c8c5968a17ac42d/kitchen-sink/src/demos/demo-picture-in-picture.tsx#L108)
[`kitchen-sink/src/demos/demo-masked-carousel.tsx:97`](https://github.com/aidenybai/stickies/blob/b883abe43aa6573b4f964c207c8c5968a17ac42d/kitchen-sink/src/demos/demo-masked-carousel.tsx#L97)

**`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.

[`kitchen-sink/src/demos/demo-drag-snap-grid.tsx:111`](https://github.com/aidenybai/stickies/blob/b883abe43aa6573b4f964c207c8c5968a17ac42d/kitchen-sink/src/demos/demo-drag-snap-grid.tsx#L111)
[`kitchen-sink/src/demos/demo-drag-snap-grid.tsx:130`](https://github.com/aidenybai/stickies/blob/b883abe43aa6573b4f964c207c8c5968a17ac42d/kitchen-sink/src/demos/demo-drag-snap-grid.tsx#L130)
[`kitchen-sink/src/demos/demo-3d-flip-cards.tsx:106`](https://github.com/aidenybai/stickies/blob/b883abe43aa6573b4f964c207c8c5968a17ac42d/kitchen-sink/src/demos/demo-3d-flip-cards.tsx#L106)
[`kitchen-sink/src/demos/demo-portal-modals.tsx:17`](https://github.com/aidenybai/stickies/blob/b883abe43aa6573b4f964c207c8c5968a17ac42d/kitchen-sink/src/demos/demo-portal-modals.tsx#L17)
[`kitchen-sink/src/demos/demo-portal-modals.tsx:24`](https://github.com/aidenybai/stickies/blob/b883abe43aa6573b4f964c207c8c5968a17ac42d/kitchen-sink/src/demos/demo-portal-modals.tsx#L24)

**`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.

[`kitchen-sink/src/demos/demo-3d-flip-cards.tsx:106`](https://github.com/aidenybai/stickies/blob/b883abe43aa6573b4f964c207c8c5968a17ac42d/kitchen-sink/src/demos/demo-3d-flip-cards.tsx#L106)
[`kitchen-sink/src/demos/demo-portal-modals.tsx:17`](https://github.com/aidenybai/stickies/blob/b883abe43aa6573b4f964c207c8c5968a17ac42d/kitchen-sink/src/demos/demo-portal-modals.tsx#L17)
[`kitchen-sink/src/demos/demo-portal-modals.tsx:24`](https://github.com/aidenybai/stickies/blob/b883abe43aa6573b4f964c207c8c5968a17ac42d/kitchen-sink/src/demos/demo-portal-modals.tsx#L24)

**`prefer-useReducer`**

Component "DemoGridShuffle" has 5 useState calls — consider useReducer for related state

> Group related state: `const [state, dispatch] = useReducer(reducer, { field1, field2, ... })`

[`kitchen-sink/src/demos/demo-grid-shuffle.tsx:117`](https://github.com/aidenybai/stickies/blob/b883abe43aa6573b4f964c207c8c5968a17ac42d/kitchen-sink/src/demos/demo-grid-shuffle.tsx#L117)
[`kitchen-sink/src/demos/demo-drag-snap-grid.tsx:20`](https://github.com/aidenybai/stickies/blob/b883abe43aa6573b4f964c207c8c5968a17ac42d/kitchen-sink/src/demos/demo-drag-snap-grid.tsx#L20)

**`design-no-bold-heading`**

font-bold on <h1> crushes counter shapes at display sizes — use font-semibold (600) or font-medium (500)

> Use `font-semibold` (600) or `font-medium` (500) on headings — 700+ crushes letter counter shapes at display sizes

[`kitchen-sink/src/index.tsx:171`](https://github.com/aidenybai/stickies/blob/b883abe43aa6573b4f964c207c8c5968a17ac42d/kitchen-sink/src/index.tsx#L171)
[`kitchen-sink/src/index.tsx:364`](https://github.com/aidenybai/stickies/blob/b883abe43aa6573b4f964c207c8c5968a17ac42d/kitchen-sink/src/index.tsx#L364)

**`no-derived-state-effect`**

Derived state in useEffect — wrap the calculation in useMemo([deps]) (or compute it directly during render if it isn't expensive)

> For derived state, compute inline: `const x = fn(dep)`. For state resets on prop change, use a key prop: `<Component key={prop} />`. See https://react.dev/learn/you-might-not-need-an-effect

[`kitchen-sink/src/demos/demo-infinite-scroll.tsx:23`](https://github.com/aidenybai/stickies/blob/b883abe43aa6573b4f964c207c8c5968a17ac42d/kitchen-sink/src/demos/demo-infinite-scroll.tsx#L23)

**`no-layout-transition-inline`**

Transitioning layout property "height" causes layout thrash every frame — use transform and opacity instead

> Use `transform` and `opacity` for transitions — they run on the compositor thread. For height animations, use `grid-template-rows: 0fr → 1fr`

[`kitchen-sink/src/demos/demo-flexbox-masonry.tsx:154`](https://github.com/aidenybai/stickies/blob/b883abe43aa6573b4f964c207c8c5968a17ac42d/kitchen-sink/src/demos/demo-flexbox-masonry.tsx#L154)

**`use-lazy-motion`**

Import "m" with LazyMotion instead of "motion" — saves ~30kb in bundle size

> Use `import { LazyMotion, m } from "framer-motion"` with `domAnimation` features — saves ~30kb

[`kitchen-sink/src/demos/demo-framer-cards.tsx:2`](https://github.com/aidenybai/stickies/blob/b883abe43aa6573b4f964c207c8c5968a17ac42d/kitchen-sink/src/demos/demo-framer-cards.tsx#L2)

**`js-combine-iterations`**

.filter().map() iterates the array twice — combine into a single loop with .reduce() or for...of

> Combine `.map().filter()` (or similar chains) into a single pass with `.reduce()` or a `for...of` loop to avoid iterating the array twice

[`kitchen-sink/src/index.tsx:180`](https://github.com/aidenybai/stickies/blob/b883abe43aa6573b4f964c207c8c5968a17ac42d/kitchen-sink/src/index.tsx#L180)

**`design-no-redundant-padding-axes`**

px-6 py-6 → use the shorthand p-6

> Collapse `px-N py-N` to `p-N` when both axes match. Keep them split only when one axis varies at a breakpoint (`py-2 md:py-3`)

[`kitchen-sink/src/index.tsx:363`](https://github.com/aidenybai/stickies/blob/b883abe43aa6573b4f964c207c8c5968a17ac42d/kitchen-sink/src/index.tsx#L363)

**`design-no-three-period-ellipsis`**

Three-period ellipsis ("...") in JSX text — use the actual ellipsis character "…" (or `…`)

> Use the typographic ellipsis "…" (or `…`) instead of three periods — pairs with action-with-followup labels ("Rename…", "Loading…")

[`kitchen-sink/src/index.tsx:367`](https://github.com/aidenybai/stickies/blob/b883abe43aa6573b4f964c207c8c5968a17ac42d/kitchen-sink/src/index.tsx#L367)

**`no-cascading-set-state`**

4 setState calls in a single useEffect — consider using useReducer or deriving state

> Combine into useReducer: `const [state, dispatch] = useReducer(reducer, initialState)`

[`kitchen-sink/src/demos/demo-floating-selection.tsx:18`](https://github.com/aidenybai/stickies/blob/b883abe43aa6573b4f964c207c8c5968a17ac42d/kitchen-sink/src/demos/demo-floating-selection.tsx#L18)

**`no-z-index-9999`**

z-index: 1000 is arbitrarily high — use a deliberate z-index scale (1–50). Extreme values signal a stacking context problem, not a fix

> Define a z-index scale in your design tokens (e.g. dropdown: 10, modal: 20, toast: 30). Create a new stacking context with `isolation: isolate` instead of escalating values

[`kitchen-sink/src/demos/demo-floating-selection.tsx:104`](https://github.com/aidenybai/stickies/blob/b883abe43aa6573b4f964c207c8c5968a17ac42d/kitchen-sink/src/demos/demo-floating-selection.tsx#L104)

**`client-passive-event-listeners`**

"scroll" listener without { passive: true } — blocks scrolling performance. Only add { passive: true } if the handler does NOT call event.preventDefault() (passive listeners silently ignore preventDefault())

> Add `{ passive: true }` as the third argument: `addEventListener('scroll', handler, { passive: true })`. Only do this if the handler does NOT call `event.preventDefault()` — passive listeners silently ignore `preventDefault()`, which breaks features like pull-to-refresh suppression, custom gestures, and nested-scroll containment.

[`kitchen-sink/src/demos/demo-scroll-snap-pager.tsx:34`](https://github.com/aidenybai/stickies/blob/b883abe43aa6573b4f964c207c8c5968a17ac42d/kitchen-sink/src/demos/demo-scroll-snap-pager.tsx#L34)

**`no-array-index-as-key`**

Array index "index" used as key — causes bugs when list is reordered or filtered

> Use a stable unique identifier: `key={item.id}` or `key={item.slug}` — index keys break on reorder/filter

[`kitchen-sink/src/demos/demo-nested-scrollers.tsx:86`](https://github.com/aidenybai/stickies/blob/b883abe43aa6573b4f964c207c8c5968a17ac42d/kitchen-sink/src/demos/demo-nested-scrollers.tsx#L86)

---

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