react-19listed
Install: claude install-skill johnnystefan/test-saas-business
## Core Rules
- **Functional components only** — no class components
- **Container / Presentational pattern** — containers handle data, presentationals render
- **Custom hooks** for all reusable logic — never inline in components
- **React Query** for all server state (fetching, caching, mutations)
- **Zustand** for client-side global state
- **Zod + React Hook Form** for all forms
- NEVER use `useEffect` for data fetching — use React Query
- NEVER use prop drilling beyond 2 levels — use context or Zustand
---
## Container / Presentational Pattern
```tsx
// users-list.container.tsx — handles data
export function UsersListContainer() {
const { data: users, isLoading, error } = useUsersQuery();
if (isLoading) return <Spinner />;
if (error) return <ErrorMessage error={error} />;
if (!users?.length) return <EmptyState />;
return <UsersList users={users} />;
}
// users-list.tsx — pure presentational, no data fetching
interface UsersListProps {
readonly users: User[];
}
export function UsersList({ users }: UsersListProps) {
return (
<ul>
{users.map((user) => (
<UserCard key={user.id} user={user} />
))}
</ul>
);
}
```
---
## Feature Folder Structure
```
src/features/your-feature/
├── components/
│ ├── your-feature-list.container.tsx # Data-aware
│ ├── your-feature-list.tsx # Presentational
│ └── your-feature-card.tsx # Presentational
├── hooks/
│ ��── use-your-feature-query.ts # React Qu