React Best Practices — Workflow

Overview

How the react-best-practices skill works, step by step.

Source Workflow

Claude skill workflow.

Step-by-step Workflow

vercel-react-best-practices — Workflow

Auto-generated from SKILL.md. The skill itself is the source of truth; this is a human-readable map of what it does and how it runs.

What it does & when to use

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

How it works

Workflow outline (sections of SKILL.md):

  1. When to Apply
  2. Rule Categories by Priority
  3. Quick Reference
  4. How to Use
  5. Full Compiled Document

Components

Single-file skill — all instructions live in SKILL.md.

Invoke

  • Slash: /vercel-react-best-practices
  • Or a natural-language request matching the triggers above.

Source: SKILL.md in this directory.

Execution Logic

The skill executes when its trigger fires (slash command, natural-language match, or direct invocation). It reads its references, applies its rules, and produces the documented outputs.

Edge Cases

See the source skill's references/ and scripts/ folders for edge-case handling.

Failure Handling

A skill failure surfaces as a tool error or a partial output; never a silent skip. Re-run with --verbose (where applicable) for diagnostics.

Integration Notes

  • Claude — invoked via the Skill tool with skill: "react-best-practices".
  • Codex — referenced from AGENTS.md if mirrored.
  • Antigravity — referenced from the workspace agent rules if mirrored.
  • HQ Project — listed on the landing page Skills section + post-login sidebar.
  • MD Project (md.sgnk.ai) — file rendered from Skills/React Best Practices/workflow.md.
  • Obsidian — file rendered with frontmatter + tags.

Usage Examples

Invoke via slash command or natural language matching the skill description.

Source: ~/.claude/skills/react-best-practices/WORKFLOW.md