Agent Skill
2/7/2026

vercel-react-best-practices

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

T
t
0GitHub Stars
1Views
npx skills add t-i-0414/music-practice-tracker

SKILL.md

Namevercel-react-best-practices
DescriptionReact and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

Music Practice Tracker

Track and improve your daily music practice. Mobile app + Admin dashboard.

Tech Stack

Backend: NestJS + PostgreSQL + Prisma Admin: Next.js Mobile: React Native / Expo Runtime: Bun

Quick Start

# Prerequisites: Bun 1.x, Docker

# 1. Initial Setup (run once)
make setup

# 2. Start Services
make docker-compose-up              # PostgreSQL
make start-firebase-dev-emulators   # Firebase Emulator (separate terminal)

# 3. Start Backend (App API / Admin API)
cd packages/apps/backend
bun run start:dev

# 4. Start Admin
cd packages/apps/admin
bun run start:dev

# 5. Start Mobile
cd packages/apps/mobile
bun run start:dev

Project Structure

packages/
├── apps/
│   ├── backend/   # API + Swagger docs
│   ├── admin/     # Admin dashboard
│   └── mobile/    # Mobile app
└── libs/          # Shared configs

Git Worktree Support

Work on multiple branches simultaneously with isolated environments.

How It Works

  • PORT_OFFSET assigns unique ports to each worktree (increments of 10)
  • .env is auto-generated with worktree-specific ports
  • ~/.music-practice-tracker-ports manages port allocations globally

Creating a New Worktree

# Create worktree
git worktree add ../music-practice-tracker-feature-xxx feature/xxx
cd ../music-practice-tracker-feature-xxx

# Setup (auto-assigns available ports)
make setup

# Start services
make docker-compose-up
make start-firebase-dev-emulators

Port Allocation

ServiceBaseoffset 0offset 10offset 20
PostgreSQL (Dev)15432154321544215452
PostgreSQL (Test)15433154331544315453
App API3000300030103020
Admin API3001300130113021
Admin UI8000800080108020
Firebase Auth9099909991099119

Management Commands

CommandDescription
make wt-statusShow current worktree config and container status
make wt-portsList all ports in use
make wt-listList all worktrees with Docker status
make wt-cleanRemove containers and volumes for current worktree
make ports-listShow registered port offsets
make ports-cleanupRemove entries for non-existent directories

Cleanup

make wt-clean                                           # Remove Docker resources
git worktree remove ../music-practice-tracker-feature-xxx  # Remove worktree
make ports-cleanup                                      # Clean port registry

Development

# Quality checks (Turborepo - parallel execution)
bun turbo lint:es:check type:check  # ESLint + TypeScript
bun turbo test                      # All tests

# Individual checks
bun run lint:es:check:root          # Root ESLint only
bun run type:check:root             # Root TypeScript only

# Testing
bun turbo test                      # All package tests (parallel)
cd packages/apps/admin && bun run test:e2e   # Admin E2E (Playwright)
cd packages/apps/mobile && bun run test:e2e  # Mobile E2E (Maestro)

# Database
bun run prisma:studio               # GUI at localhost:5555
bun run prisma:migrate:dev

# API Docs (check .env for actual ports)
# http://localhost:${APP_API_PORT}/api   - App API
# http://localhost:${ADMIN_API_PORT}/api - Admin API

Turborepo

This monorepo uses Turborepo for build optimization with intelligent caching.

# Common commands
bun turbo build                     # Build all packages
bun turbo lint:es:check type:check  # Parallel lint + type check
bun turbo test                      # Run all tests
bun turbo start:dev                 # Start all apps

# Filter by package (use package name or path)
bun turbo build --filter=@music-practice-tracker/backend
bun turbo test --filter=./packages/apps/admin

Remote Cache

CI uses Vercel Remote Cache for faster builds. Configure locally (optional):

bunx turbo login
bunx turbo link

License

Proprietary software. See LICENSE. For inquiries: takuya.iwashiro@takudev.net

Skills Info
Original Name:vercel-react-best-practicesAuthor:t