react-component-guidelines

name	react-component-guidelines
description	Use this skill when writing, reviewing, or refactoring React components in the TanStack Start app. Covers route and feature component boundaries, TypeScript prop shapes, local state ownership, generated-password handling, pure logic extraction, Tailwind class usage, accessible controls, feedback regions, and stable test locators.

React Component Guidelines

Apply these rules when creating, reviewing, or refactoring React components. This skill owns implementation mechanics; UI Design Principles owns design intent.

Component Boundaries

See component-boundaries.md for route-file thinness, feature ownership, pure logic extraction, and generated-password state boundaries.

Guidelines:

• SHOULD read the linked reference when moving component code, splitting components, or changing local state ownership.

Tailwind Usage

See tailwind-usage.md for Tailwind utility usage, global CSS scope, responsive constraints, class readability, and token handling.

Guidelines:

• SHOULD read the linked reference when changing styling, layout, class names, or global CSS.

Accessible Interaction

See accessible-interaction.md for control semantics, labels, descriptions, generated output regions, copy feedback, and test locators.

Guidelines:

• SHOULD read the linked reference when changing forms, buttons, output, feedback, focus, or e2e hooks.