Agent skill
react-clean-ui
Keep React UI components clean; move logic into hooks and services
Stars
163
Forks
31
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/react-clean-ui
Metadata
Additional technical details for this skill
- stack
- node-react-next
- style
- solid-clean-code
SKILL.md
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} />;
}
Didn't find tool you were looking for?