
vercel-react-best-practices
Compatibility alias for react-best-practices. Use when an existing workflow, setup script, or user explicitly asks for vercel-react-best-practices; route general React and Next.js performance work to react-best-practices instead. Triggers on: legacy skill name, Vercel React best practices alias, exact-folder compatibility.
- Installs
- 391
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/akillness/jeo-skills --skill vercel-react-best-practices- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads vercel-react-best-practices automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
Vercel React Best Practices
This skill is a compatibility wrapper around react-best-practices. It exists so older workflows and platform-specific setups can keep working without making the React performance lane look like two equally preferred default skills.
When to use this skill
- A user or tool explicitly asks for
vercel-react-best-practices - A setup or sync process expects the legacy folder/name to exist
- You need to preserve backward compatibility while routing the real work to
react-best-practices
Do not choose this skill as the default for general React or Next.js performance help.
Instructions
Step 1: Confirm alias intent
Check whether the request truly depends on the exact alias name.
Use this alias only when:
- the user names it directly
- a script/tooling surface references it literally
- a migration or compatibility concern is part of the task
Otherwise, switch to ../react-best-practices/SKILL.md.
Step 2: Redirect to the canonical skill
Use the alias-side packet first, then jump to the canonical React performance guidance:
- Alias routing notes:
./references/alias-routing.md - Measurement + route-out notes:
./references/measurement-route-outs.md - Canonical skill:
../react-best-practices/SKILL.md - Deep reference:
../react-best-practices/AGENTS.md - Nearby boundaries:
../state-management/SKILL.mdfor global state architecture../web-accessibility/SKILL.mdfor accessibility remediation../performance-optimization/SKILL.mdfor non-React-wide performance problems
Step 3: Preserve compatibility in outputs
If you were activated via the alias name, mention that the canonical guidance now lives in react-best-practices so future maintenance converges on one primary entry.
Examples
Example 1: explicit legacy-name request
Input: "Use vercel-react-best-practices to audit our slow Next.js dashboard."
Output: Acknowledge the alias, then apply the canonical react-best-practices guidance for waterfalls, bundle size, and RSC boundaries.
Example 2: general React performance question
Input: "Our React app rerenders too much and the Next.js page is slow."
Output: Do not stay in the alias. Route to react-best-practices directly.
Best practices
- Treat this as a redirect layer, not an independent knowledge base.
- Keep trigger wording narrow so the canonical skill wins ordinary React/Next.js requests.
- When updating the underlying guidance, update
react-best-practicesfirst. - Keep docs/setup surfaces explicit about canonical-vs-compatibility status.
References
./references/alias-routing.md./references/measurement-route-outs.md../react-best-practices/SKILL.md../react-best-practices/AGENTS.md../state-management/SKILL.md../web-accessibility/SKILL.md../performance-optimization/SKILL.md
FAQ
What does the vercel-react-best-practices skill do?
Compatibility alias for react-best-practices. Use when an existing workflow, setup script, or user explicitly asks for vercel-react-best-practices; route general React and Next.js performance work to react-best-practices instead. Triggers on: legacy skill name, Vercel React best practices alias, exact-folder compatibility.
How do I install vercel-react-best-practices?
Run npx skills add https://github.com/akillness/jeo-skills --skill vercel-react-best-practices in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/vercel-react-best-practices/ (personal) or .claude/skills/vercel-react-best-practices/ (project).
Which AI agents can use vercel-react-best-practices?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is vercel-react-best-practices safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains vercel-react-best-practices?
It is published by akillness in akillness/jeo-skills. It has 391 recorded installs.
More from akillness/jeo-skills
rtk
akillness/jeo-skills
Install, initialize, verify, and troubleshoot RTK (Rust Token Killer) for AI coding agents. Use when you need to reduce shell-command token output, confirm that the correct rtk binary is installed, choose between Homebrew, install.sh, or Cargo installation, wire rtk init for Claude Code, Codex, Gemini CLI, Cursor, Copilot, Windsurf, Cline, or OpenCode, or use compact wrappers such as rtk git status, rtk read, rtk grep, rtk test, rtk lint, and rtk gain. Triggers on: rtk, rust token killer, token saver cli, rtk init, rtk gain, codex rtk, gemini rtk, opencode rtk, claude hook token reduction.
graphify
akillness/jeo-skills
Drive Graphify from its CLI to build, refresh, query, export, and serve a durable code/corpus knowledge graph. Use when the user wants .graphify/GRAPHREPORT.md, graph.json, graph.html, graphify update/summary/query/path/explain/tree, change-aware review context, git-hook or watch-based refresh, a stdio MCP graph server, or an install into jeo, jeopi, gjc, opencode, Claude, Codex, or Gemini. Also covers the honest structural fallback when native extraction is empty or misleading. Route simple locate/reference work to codebase-search, narrative knowledge-base work to llm-wiki, and project-memory handoff to opencontext. Triggers on: graphify, graphify update, graphify query, knowledge graph CLI, GRAPHREPORT.md, graph.json, codebase graph, graph refresh, graphify install, graphify serve, review context, affected flows.
data-analysis
akillness/jeo-skills
Analyze datasets to extract insights, identify patterns, and generate reports.
code-refactoring
akillness/jeo-skills
Turn a cleanup packet into one behavior-preserving refactor brief. Use when simplifying a messy function/component/service, freezing behavior before touching fragile legacy code, splitting a cleanup-heavy diff into reviewable slices, or planning a repeated migration / codemod without changing intended behavior. Route diagnosis to debugging, review judgment to code-review, validation-program design to testing-strategies, bottleneck-led tuning to performance-optimization, and pure symbol inventory to codebase-search.
technical-writing
akillness/jeo-skills
Write internal technical documentation for engineers and operators: technical specs, architecture docs, ADRs, runbooks, migration plans, and developer-facing implementation guides. Use when the main job is capturing a technical decision, system boundary, operating procedure, or rollout path for builders and maintainers. Triggers on: tech spec, design doc, architecture doc, ADR, runbook, migration guide, implementation guide, rollout doc, operational guide, and internal technical writing. End-user onboarding guides, tutorials, FAQs, and help-center flows belong here too. Route API portals to api-documentation, release notes to changelog-maintenance, decks to presentation-builder, and GTM messaging to marketing-automation.
web-accessibility
akillness/jeo-skills
Routing-first skill for web accessibility remediation and verification. Use when the main job is classifying which accessibility surface is failing — semantics, keyboard/focus, labels/announcements, visual perception/reflow, media alternatives, or routed-app navigation feedback — and turning vague audit, WCAG, axe/Lighthouse, or "make this accessible" requests into one concrete remediation packet. Broad UI critique for hierarchy, polish, and launch readiness belongs here too. Route component API architecture and system governance to design-system, and responsive layout strategy to responsive-design.
Popular frontend & design skills
setup-matt-pocock-skills
mattpocock/skills
Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
vercel-react-best-practices
vercel-labs/agent-skills
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.