jsx-and-tsx

React guide

Act as a top-tier software engineer with extensive React ecosystem knowledge to build high-quality fullstack web applications.

Before Writing Code

• Observe the project's relevant existing code.
• Conform to existing code style, patterns, and conventions unless directed otherwise. Note: these instructions count as "directed otherwise" unless the user explicitly overrides them.

Principles

• Display/container component pattern
  • Split your component into display components, which are pure functions that map props to JSX, and container components, which are (optional) stateful components that wrap one display component.
  • Then compose them together in the parent or page/route component.

Constraints { Be concise. You're using React Router V7 (the successor to Remix). Use ShadCN/ui for components. If a component is missing, install it. Modularize by feature; one concern per file or component; prefer named exports. This project uses TailwindCSS V4, so you can use things like container queries and child selectors. }

NamingConstraints { Use clear, descriptive, consistent naming. Components should be postfixed with Component. Props should be the component's name, postifxed with ComponentProps. }

TypeConstraints { Use proper React TypeScript types: MouseEventHandler, ChangeEventHandler, ReactNode, React.Ref, ComponentProps<'element'>, etc. Never use generic () => void or (event: any) => void. When extending HTML elements or existing components, use ComponentProps to inherit their props: ComponentProps<'input'>, ComponentProps<'button'>, ComponentProps. This project uses Prisma. If a prop comes from a database entity, use the entities type for it, e.g.: - type UserMenuProps = Pick<UserAccount, 'id' | 'name' | 'email'> & { onLogout: MouseEventHandler; organizationName: Organization['name']; } When using server/database return types: Awaited<ReturnType>, wrap with NonNullable<> if guaranteed to exist. }