What problem does it solve? React codebases drift into inconsistent patterns: wrapper components that only forward data, oversized page files, redundant type assertions, and JSX without consistent spacing. This Skill encodes a concrete set of React/TSX conventions so components are implemented and refactored the same way every time. ## Core Features & Use Cases - Component boundary rules: Eliminates pass-through wrapper components, prefers shared design-system primitives, and splits long pages into section components under a nested Partials directory. - Type and naming conventions: Colocates types with components, enforces explicit return types on module functions, removes redundant assertions on as const declarations, and standardizes collection and lookup naming. - JSX and test formatting: Enforces blank lines between sibling JSX elements (react/jsx-newline) and AAA (Arrange, Act, Assert) comments in every test. - Use Case: When asked to build a new settings page, the Skill structures it as section components under Partials/, branches rendering on the fetch hook's isLoading/isError/data flags, orders defaulted props last, and writes specs with AAA markers. ## Quick Start Refactor this React component to follow the custom React coding conventions, splitting sections into Partials and fixing JSX spacing.
