react-best-practiceslisted
Install: claude install-skill andr-ca/agentharness
# React Best Practices
This skill covers React/JSX-specific conventions. It layers on top of
`typescript-conventions` — apply that skill first for naming, type safety,
async/await, and module structure; this skill only covers what's
different for components.
Deeper reference: `frameworks/react/CONVENTIONS.md` (full harness
conventions), `languages/typescript/CONVENTIONS.md`.
---
## Component naming and file structure
- `PascalCase` for component names. File name matches the component name.
- Use descriptive, specific names: `UserProfileCard`, not `Card`.
- One component per file (unless the secondary component is tightly
scoped and unexported).
```typescript
// Good
export function UserProfileCard({ user }: UserCardProps): JSX.Element {
return <div>{user.name}</div>;
}
// File: UserProfileCard.tsx
// Bad — too generic, doesn't match file name
export function Card({ user }: { user: User }): JSX.Element { }
// File: card.tsx
```
---
## Props typing
Define prop types explicitly with an interface. Destructure in the
signature. Return type annotation (`JSX.Element` or `React.ReactNode`)
is recommended.
```typescript
interface UserCardProps {
user: User;
onSelect?: (user: User) => void;
}
export function UserCard({ user, onSelect }: UserCardProps): JSX.Element {
return (
<button type="button" onClick={() => onSelect?.(user)}>
{user.name}
</button>
);
}
```
---
## Hooks rules
1. Only call hooks at the top level — never inside conditions, loop