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?

Be as detailed as possible for better results