Adds the Vercel skill under .agents with famapp path patterns. Includes skills-lock.json pin.
49 lines
1.7 KiB
YAML
49 lines
1.7 KiB
YAML
name: react-best-practices
|
|
description: 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.
|
|
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."
|