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

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

rakibdev/dotfiles

valibot

Valibot schema validation for backend and frontend forms.

1 0
Explore
rakibdev/dotfiles

vue

Vue coding style and best practices.

1 0
Explore
rakibdev/dotfiles

tailwind

Tailwind CSS styling conventions.

1 0
Explore
rakibdev/dotfiles

websearch

Search Google

1 0
Explore
rakibdev/dotfiles

github

Fetch GitHub URLs, repos, issues, pull requests, code search

1 0
Explore
rakibdev/dotfiles

figma

Tool for fetching Figma design data and downloading images.

1 0
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results