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.
Ask your Agent
Use this Skill: https://skilld.dev/gh/vercel-labs/vercel-plugin/react-best-practices
This session only. Nothing lands on disk.
≈164 tokens on demand. Your agent reads this file only when SKILL.md points to it.
When async operations have no interdependencies, execute them concurrently using Promise.all().
Incorrect (sequential execution, 3 round trips):
const user = await fetchUser()
const posts = await fetchPosts()
const comments = await fetchComments()Correct (parallel execution, 1 round trip):
const [user, posts, comments] = await Promise.all([
fetchUser(),
fetchPosts(),
fetchComments()
])Source: SKILL.md on GitHub
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.
{
"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"
]
}[
{
"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"
}
]{
"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"
]
}[
{
"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."
}
]