/

/react-best-practices

by Vercel Labsvercel-labs/vercel-plugin295 stars

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.

rulesrendering-animate-svg-wrapper.md

1.2 KB raw

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

Animate SVG Wrapper Instead of SVG Element

Many browsers don't have hardware acceleration for CSS3 animations on SVG elements. Wrap SVG in a <div> and animate the wrapper instead.

Incorrect (animating SVG directly - no hardware acceleration):

function LoadingSpinner() {
  return (
    <svg 
      className="animate-spin"
      width="24" 
      height="24" 
      viewBox="0 0 24 24"
    >
      <circle cx="12" cy="12" r="10" stroke="currentColor" />
    </svg>
  )
}

Correct (animating wrapper div - hardware accelerated):

function LoadingSpinner() {
  return (
    <div className="animate-spin">
      <svg 
        width="24" 
        height="24" 
        viewBox="0 0 24 24"
      >
        <circle cx="12" cy="12" r="10" stroke="currentColor" />
      </svg>
    </div>
  )
}

This applies to all CSS transforms and transitions (transform, opacity, translate, scale, rotate). The wrapper div allows browsers to use GPU acceleration for smoother animations.

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 11 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." } ]

/react-best-practices