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.

rulesasync-cheap-condition-before-await.md

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

Check Cheap Conditions Before Async Flags

When a branch uses await for a flag or remote value and also requires a cheap synchronous condition (local props, request metadata, already-loaded state), evaluate the cheap condition first. Otherwise you pay for the async call even when the compound condition can never be true.

This is a specialization of Defer Await Until Needed for flag && cheapCondition style checks.

Incorrect:

const someFlag = await getFlag()

if (someFlag && someCondition) {
  // ...
}

Correct:

if (someCondition) {
  const someFlag = await getFlag()
  if (someFlag) {
    // ...
  }
}

This matters when getFlag hits the network, a feature-flag service, or React.cache / DB work: skipping it when someCondition is false removes that cost on the cold path.

Keep the original order if someCondition is expensive, depends on the flag, or you must run side effects in a fixed order.

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