# Cpet DB React Best Practices

> React and Next.js performance optimization guidelines for CPET.db. Tailored for three-tier architecture with Vercel frontend, Google Cloud Run backend, and Supabase database. Use when writing, reviewing, or refactoring React components, data fetching, or optimizing performance.

- Skill: `cyanluna-git/cpet-db-react-best-practices` (Agent Skill, multi-file: 15 files)
- Install (CLI): `npx skillmds@latest add cyanluna-git/cpet-db-react-best-practices`
- Raw SKILL.md: https://api.skillmd.com/api/skills/cyanluna-git/cpet-db-react-best-practices/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- License: MIT
- Author: cyanluna-git (https://skillmd.com/u/cyanluna-git)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/cyanluna-git/cpet-db-react-best-practices

---


# CPET.db React Best Practices

Comprehensive performance optimization guide for React and Next.js applications in CPET.db, optimized for AI-assisted development with Vercel, Google Cloud Run, and Supabase.

## When to Apply

Reference these guidelines when:
- Writing new React components or Next.js pages
- Implementing data fetching (client or server-side)
- Reviewing code for performance issues
- Refactoring existing React/Next.js code
- Optimizing bundle size or load times
- Working with Supabase real-time subscriptions
- Integrating with Cloud Run APIs

## Rule Categories by Priority

| Priority | Category | Impact | Prefix |
|----------|----------|--------|--------|
| 1 | Eliminating Waterfalls | CRITICAL | `async-` |
| 2 | Bundle Size Optimization | CRITICAL | `bundle-` |
| 3 | Server-Side Performance | HIGH | `server-` |
| 4 | Client-Side Data Fetching | MEDIUM-HIGH | `client-` |
| 5 | Re-render Optimization | MEDIUM | `rerender-` |
| 6 | Rendering Performance | MEDIUM | `rendering-` |
| 7 | JavaScript Performance | LOW-MEDIUM | `js-` |
| 8 | Advanced Patterns | LOW | `advanced-` |
| 9 | CPET-Specific Patterns | MEDIUM | `cpet-` |

## How to Use

Read individual rule files for detailed explanations and code examples:

```
rules/async-parallel.md
rules/bundle-barrel-imports.md
rules/cpet-supabase-queries.md
rules/_sections.md
```

Each rule file contains:
- Brief explanation of why it matters
- Incorrect code example with explanation
- Correct code example with explanation
- Additional context and references

## Full Compiled Document

For the complete guide with all rules expanded: `AGENTS.md`