skilld
All skills
vercel-labs avatar

/react-best-practices

@d48b8d5 official
by Vercel Labsvercel-labs/vercel-plugin295 stars
64

React best-practices reviewer for TSX files. Triggers after editing multiple TSX components to run a condensed quality checklist covering component structure, hooks usage, accessibility, performance, and TypeScript patterns.

  • 151 files
  • 448.8 KB
  • Updated last week
  • GitHub

Ask your Agent

Use this Skill: https://skilld.dev/gh/vercel-labs/vercel-plugin/react-best-practices

This session only. Nothing lands on disk.

upstreamrules_sections.md

≈389 tokens on demand. Your agent reads this file only when SKILL.md points to it.

Sections

This file defines all sections, their ordering, impact levels, and descriptions. The section ID (in parentheses) is the filename prefix used to group rules.

1. Eliminating Waterfalls (async)

Impact: CRITICAL
Description: Waterfalls are the #1 performance killer. Each sequential await adds full network latency. Eliminating them yields the largest gains.

2. Bundle Size Optimization (bundle)

Impact: CRITICAL
Description: Reducing initial bundle size improves Time to Interactive and Largest Contentful Paint.

3. Server-Side Performance (server)

Impact: HIGH
Description: Optimizing server-side rendering and data fetching eliminates server-side waterfalls and reduces response times.

4. Client-Side Data Fetching (client)

Impact: MEDIUM-HIGH
Description: Automatic deduplication and efficient data fetching patterns reduce redundant network requests.

5. Re-render Optimization (rerender)

Impact: MEDIUM
Description: Reducing unnecessary re-renders minimizes wasted computation and improves UI responsiveness.

6. Rendering Performance (rendering)

Impact: MEDIUM
Description: Optimizing the rendering process reduces the work the browser needs to do.

7. JavaScript Performance (js)

Impact: LOW-MEDIUM
Description: Micro-optimizations for hot paths can add up to meaningful improvements.

8. Advanced Patterns (advanced)

Impact: LOW
Description: Advanced patterns for specific cases that require careful implementation.

Source: SKILL.md on GitHub

Third-party checks

No third-party reports yet.

Provenance

Signed by skilld at d48b8d5. This ties the file your Agent reads to that commit on GitHub. It does not review the instructions.

Last checked against GitHub 10 hours ago.

Activeupdated last week

Capability

Other metadata
metadata
{
  "priority": 4,
  "docs": [
    "https://react.dev/reference/react",
    "https://react.dev/learn"
  ],
  "pathPatterns": [
    "src/components/**/*.tsx",
    "src/components/**/*.jsx",
    "app/components/**/*.tsx",
    "app/components/**/*.jsx",
    "components/**/*.tsx",
    "components/**/*.jsx",
    "src/ui/**/*.tsx",
    "lib/components/**/*.tsx"
  ],
  "bashPatterns": [],
  "importPatterns": [
    "react",
    "react-dom"
  ]
}
validate
[
  {
    "pattern": "from\\s+['\"](styled-components|@emotion/styled|@emotion/react|@mui/material|@chakra-ui/react)['\"]|styled\\.",
    "message": "Legacy CSS-in-JS or component library detected. Consider shadcn/ui + Tailwind for modern Vercel-native UI.",
    "severity": "warn",
    "upgradeToSkill": "shadcn",
    "upgradeWhy": "Migrate from CSS-in-JS/MUI/Chakra to shadcn/ui + Tailwind CSS for better SSR performance and Vercel ecosystem alignment.",
    "skipIfFileContains": "@/components/ui|shadcn|tailwindcss"
  }
]
retrieval
{
  "aliases": [
    "react review",
    "component quality",
    "tsx linter",
    "react patterns"
  ],
  "intents": [
    "review react code",
    "improve component quality",
    "check accessibility",
    "optimize react"
  ],
  "entities": [
    "hooks",
    "accessibility",
    "React",
    "TSX",
    "component"
  ]
}
chainTo
[
  {
    "pattern": "from\\s+['\\\"](styled-components|@emotion/styled|@emotion/react|@mui/material|@chakra-ui/react)['\"]|styled\\.",
    "targetSkill": "shadcn",
    "message": "Legacy CSS-in-JS or component library detected — loading shadcn/ui guidance for modern Vercel-native UI."
  }
]

README badge

README badge for vercel-labs/vercel-plugin/react-best-practices