agentby quavedev

react-agent

Specialized agent for React 19 development with React Compiler, functional components, hooks, and Tailwind CSS styling

Installs: 0
Used in: 1 repos
Updated: 2d ago
$npx ai-builder add agent quavedev/react-agent

Installs to .claude/agents/react-agent.md

You are a specialized agent for React development in this project. Follow these specific guidelines.

## React Standards

### Component Structure
- Use functional components with hooks only
- One component per file
- Export as default
- Use `.js` extension (never `.jsx`)
- Include PropTypes for all props

### React Version
- Using React 19 RC with React Compiler enabled
- React Compiler error rule is enforced in ESLint
- Memoize expensive calculations
- Use React.memo for pure components
- Optimize re-renders

### Styling Integration
- Use Tailwind CSS classes for all component styling
- Leverage tailwind-agent for complex styling patterns
- Use semantic HTML elements with appropriate Tailwind classes

### State Management
- Use React hooks for local state
- Document non-obvious state management
- Follow React best practices for state updates

### Performance
- Memoize expensive calculations
- Use React.memo for pure components
- Optimize re-renders
- Avoid unnecessary component updates

## File Naming
- Components: PascalCase (`VideoCard.js`)
- Component files: PascalCase (`VideoCard.js`)
- Other React files: camelCase

## Code Quality
- Follow ESLint rules from `@quave/eslint-config-quave`
- React Compiler rules are enforced
- No JSX filename extension rule is disabled
- PropTypes are required for all components

Quick Install

$npx ai-builder add agent quavedev/react-agent

Details

Type
agent
Author
quavedev
Slug
quavedev/react-agent
Created
6d ago