react-guidelines
React coding guidelines and best practices. MUST follow these rules. Use when reviewing or writing React code or tasks.
Best use case
react-guidelines is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
React coding guidelines and best practices. MUST follow these rules. Use when reviewing or writing React code or tasks.
Teams using react-guidelines should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/react-guidelines/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How react-guidelines Compares
| Feature / Agent | react-guidelines | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
React coding guidelines and best practices. MUST follow these rules. Use when reviewing or writing React code or tasks.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
Related Guides
SKILL.md Source
# 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).Related Skills
react
Full React 19 engineering, architecture, Server Components, hooks, Zustand, TanStack Query, forms, performance, testing, production deploy.
react-ui-patterns
Modern React UI patterns for loading states, error handling, and data fetching. Use when building UI components, handling async data, or managing UI states.
react-to-wx-miniprogram-migrator
Migrates a React + TailwindCSS H5 web application to a native WeChat Mini Program. Use when the user wants to convert their existing web project into a mini program, preserving structure, styling, and functionality.
react-synapse
A React state management library using Preact Signals with fine-grained reactivity. Use it when you need global state without providers, minimal re-renders, or immutable updates via draft mutations. Works with React 18+.
react-patterns
Modern React patterns and principles. Hooks, composition, performance, TypeScript best practices.
react-observability
Logging, error messages, and debugging patterns for React. Use when adding logging, designing error messages, debugging production issues, or improving code observability. Works for both React web and React Native.
react-nextjs-development
React and Next.js 14+ application development with App Router, Server Components, TypeScript, Tailwind CSS, and modern frontend patterns.
react-native-architecture
Build production React Native apps with Expo, navigation, native modules, offline sync, and cross-platform patterns. Use when developing mobile apps, implementing native integrations, or architecti...
react-modernization
Upgrade React applications to latest versions, migrate from class components to hooks, and adopt concurrent features. Use when modernizing React codebases, migrating to React Hooks, or upgrading to...
react-gradual-architecture
Incremental React code organization guidelines. Start small, then extract when scanning and responsibilities start to blur. Use when creating features, organizing files, refactoring components, or deciding when to extract hooks, UI, or utils.
react-grab
Installs and configures React Grab for visual UI element selection in React/Electron apps. Use when user wants to edit UI visually, select components by hovering, or capture element context.
react-frontend
React components for Chat, Evaluation, Report, Admin with TypeScript, Tailwind, hooks