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.

rulesserver-auth-actions.md

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

Authenticate Server Actions Like API Routes

Impact: CRITICAL (prevents unauthorized access to server mutations)

Server Actions (functions with "use server") are exposed as public endpoints, just like API routes. Always verify authentication and authorization inside each Server Action—do not rely solely on middleware, layout guards, or page-level checks, as Server Actions can be invoked directly.

Next.js documentation explicitly states: "Treat Server Actions with the same security considerations as public-facing API endpoints, and verify if the user is allowed to perform a mutation."

Incorrect (no authentication check):

'use server'

export async function deleteUser(userId: string) {
  // Anyone can call this! No auth check
  await db.user.delete({ where: { id: userId } })
  return { success: true }
}

Correct (authentication inside the action):

'use server'

import { verifySession } from '@/lib/auth'
import { unauthorized } from '@/lib/errors'

export async function deleteUser(userId: string) {
  // Always check auth inside the action
  const session = await verifySession()
  
  if (!session) {
    throw unauthorized('Must be logged in')
  }
  
  // Check authorization too
  if (session.user.role !== 'admin' && session.user.id !== userId) {
    throw unauthorized('Cannot delete other users')
  }
  
  await db.user.delete({ where: { id: userId } })
  return { success: true }
}

With input validation:

'use server'

import { verifySession } from '@/lib/auth'
import { z } from 'zod'

const updateProfileSchema = z.object({
  userId: z.string().uuid(),
  name: z.string().min(1).max(100),
  email: z.string().email()
})

export async function updateProfile(data: unknown) {
  // Validate input first
  const validated = updateProfileSchema.parse(data)
  
  // Then authenticate
  const session = await verifySession()
  if (!session) {
    throw new Error('Unauthorized')
  }
  
  // Then authorize
  if (session.user.id !== validated.userId) {
    throw new Error('Can only update own profile')
  }
  
  // Finally perform the mutation
  await db.user.update({
    where: { id: validated.userId },
    data: {
      name: validated.name,
      email: validated.email
    }
  })
  
  return { success: true }
}

Reference: https://nextjs.org/docs/app/guides/authentication

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