# React Clean UI

> Keep React UI components clean; move logic into hooks and services

- Skill: `majiayu000/react-clean-ui` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add majiayu000/react-clean-ui`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/react-clean-ui/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- License: MIT
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/react-clean-ui

---

## What I do

Je fournis des règles pour garder des composants React **propres** :
- UI minimaliste (présentation)
- Logique dans hooks
- Données via TanStack Query

## UI rules
- Aucun appel réseau dans un composant UI.
- Aucun mapping DTO complexe dans JSX.
- Pas de state global implicite : state local ou query cache.

## Hook rules
- Un hook retourne un **view-model** prêt.
- Le hook parle aux services via DI.
- Les side-effects UI (toast, navigation) restent dans hooks/pages.

## Example pattern

```tsx
export function UserPage({ id }: { id: string }) {
  const vm = useUserDetails(id);
  return <UserDetailsView {...vm} />;
}
```