All skills
vercel-labs avatar

/react-best-practices

@d48b8d5 official

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

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

This session only. Nothing lands on disk.

upstreamrulesasync-api-routes.md

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

Prevent Waterfall Chains in API Routes

In API routes and Server Actions, start independent operations immediately, even if you don't await them yet.

Incorrect (config waits for auth, data waits for both):

export async function GET(request: Request) {
  const session = await auth()
  const config = await fetchConfig()
  const data = await fetchData(session.user.id)
  return Response.json({ data, config })
}

Correct (auth and config start immediately):

export async function GET(request: Request) {
  const sessionPromise = auth()
  const configPromise = fetchConfig()
  const session = await sessionPromise
  const [config, data] = await Promise.all([
    configPromise,
    fetchData(session.user.id)
  ])
  return Response.json({ data, config })
}

For operations with more complex dependency chains, use better-all to automatically maximize parallelism (see Dependency-Based Parallelization).

Source: SKILL.md on GitHub

No third-party reports yet.

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
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