smithery.ai

react-guidelines

React coding guidelines and best practices. MUST follow these rules. Use when reviewing or writing React code or tasks.

First seen Mar 19, 2026

Installation

$ npx skills add https://smithery.ai

Similar popular skills

Related neighbors and high-traction skills in the same topics — useful to compare before installing.

Also in this package

Other skills from smithery.ai · top by installs.

npx skills add https://smithery.ai

Browse all from smithery.ai

More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Not declared
Cursor Not declared
Codex Not declared
GitHub Copilot Not declared
Windsurf Not declared
Gemini CLI Not declared
Cline Not declared
OpenCode Not declared

Package contents

Files included with this skill beyond the listing page.

  • skill md SKILL.md 1,331 B
  • docs SUMMARY.md 143 B

History

  1. First seen on skills.sh
  2. First recorded snapshot · 1 installs

SKILL.md

IMPORTANT Frontend Guidelines

  • NEVER use useState or useEffect directly in React Components. ALWAYS use custom hook in separated for that (e.g., useBot, useBacktesting).
  • NEVER combine multiple hooks or components in a single file, even if they are small. EVERY hook, component or Modal should have its OWN file, e.g., useBot.ts, BotComponent.tsx.
  • React components should ALWAYS be functions with default export (export default function ComponentName() {}), not class-based or arrow functions.
  • NEVER use any type OR anonymous types in TypeScript, ALWAYS use explicit types, if not existing - create them.
  • If any frontend changes are made, run cd <path-to-project> && npx tsc --noEmit --skipLibCheck --project tsconfig.app.json && npx eslint . and ensure no errors. DON'T run build for production to make sure the code is not broken.
  • If any frontend changes are made for *.{js,ts,jsx,tsx,css,json,scss} files, run cd <path-to-project> && npx prettier <path/to/file> --write and ensure no errors.
  • When creating a new React page, follow the provided instructions in [references/instructions.md](./references/instructions.md).