Agent skill

react

React coding style and best practices.

View SKILL.md on GitHub Repository
Stars 1
Forks 0

Install this agent skill to your Project

npx add-skill https://github.com/rakibdev/dotfiles/tree/main/home/.config/ai/skills/react

SKILL.md

  • Use toast.error(error.message) in catch blocks. No console.error allowed!
  • Minimal DOM nesting. Use <Fragment> or <> instead of useless <div> wrappers
  • Modern React 19+ patterns only (e.g. use for promises/context, Server Actions, useFormStatus)
  • Boolean props shorthand: <Component prop /> not <Component prop={true} />
  • Component names in PascalCase, props in camelCase
  • Logic first: Define hooks/state at the top, then return JSX. Keep components lean
  • Prefer onChange over useEffect for syncing state whenever possible
  • Map directly on components/fragments, don't wrap items.map in a stray <div>
  • Avoid useCallback/useMemo unless it's actually heavy. React is fast enough, don't be extra

Didn't find tool you were looking for?

Be as detailed as possible for better results