Enforce clean React component patterns in TypeScript codebases.
npx skills add https://github.com/d-kimuson/dotfiles --skill react-d-kimuson
Please help me install this Agent Skill. Skill: react Source: https://github.com/d-kimuson/dotfiles/tree/main/claude-code/skills/react Command: npx skills add https://github.com/d-kimuson/dotfiles --skill react-d-kimuson
This Skill captures React coding guidelines focusing on minimal useEffect, explicit event handling, and predictable component patterns.
Convert a simple component using useEffect into a declarative, event-driven version with explicit handlers.
High-intent search queries and answers about installing and using this skill.
Minimal useEffect in React is achieved by using event handlers and query clients (Apollo, TanStack, SWR) instead of direct fetch calls in components. This approach reduces side effects, improves predictability, and keeps components declarative and easier to test.
Use dedicated query clients like Apollo, TanStack Query, or SWR instead of direct fetch calls within components. These libraries manage caching, loading states, and refetching, eliminating the need for complex useEffect patterns and improving code maintainability.
Use functional component (FC) typing with arrow functions in TypeScript React. This provides strong type annotations, prevents accidental function declaration patterns, and ensures consistent component signatures across your codebase.
Direct fetch calls in React components should be avoided in favor of query clients. Fetch within components creates side effects, complicates dependency tracking, and leads to harder-to-maintain code; query clients handle these concerns more reliably.
Enforcing patterns like minimal useEffect, FC typing, and prescribed API workflows ensures consistency, reduces bugs from incorrect side-effect handling, improves code readability, and makes reviews and maintenance faster across teams.
Yes, this guidance is built for modern React with TypeScript, emphasizing FC type annotations, event-driven patterns, and integration with contemporary data-fetching libraries like Apollo, TanStack Query, and SWR.
TheBushidoCollectiveManage GraphQL queries, mutations, and cache state in React with Apollo Client.
ElbertePlinioReplace unnecessary React useEffect calls with five standardized patterns.
lciacciEnforce strict TypeScript practices with ESLint, Jest, and CI quality gates.
armanisadeghiEnforce provider initialization and data-fetch rules in app shell code.
