VividKit Crystal clear AI coding
VI
Choose Your Setup Get Started with AgentKit Continue with ClaudeKit Migrate from ClaudeKit to AgentKit Clean cutover from ClaudeKit What Is AgentKit? How AgentKit Works AgentKit Kits, Skills, Agents & Hooks AgentKit Runtime Support AgentKit Desktop App AgentKit Configuration AgentKit CLI Quick Reference AgentKit Skills Cheatsheet AgentKit Workflows AgentKit Statusline Update AgentKit CLI & Kits AgentKit Helper Clean reinstall of AgentKit AgentKit Troubleshooting What is ClaudeKit? ClaudeKit CLI Guide Command Finder Commands Cheat Sheet Workflow Recipes CLI Quick Reference Claude Mechanics Permission Modes ClaudeKit Hooks Coexistence ClaudeKit x Codex CK → Other coding tools How ClaudeKit Works Inside ClaudeKit Finding Your Unknowns Session Recovery Fix from Logs UI/UX Guide Accounts Switcher IDE Config Remote Control Codex App System Diagramming UI Review Gate Promotions Support VividKit

Quick Ref / Command

Engineer Kit

/ak:react-best-practices

React/Next performance patterns

Apply Vercel Engineering React and Next.js performance patterns across component optimization, rendering performance, bundle analysis, and data fetching.

01

Match the React surface

02

Prioritize by rule category

03

Eliminate waterfalls

04

Shrink client work

Rule 01

Follow the eight priority categories from waterfalls through advanced patterns

Rule 02

Treat bundle size, server boundaries, and data serialization as React performance work

Rule 03

Optimize rerenders by subscription shape and update urgency before adding memoization

Rule 04

Ground recommendations in the individual rule files' incorrect and correct examples

Execution Map

Core lanes from input to output, aligned with the command's real execution path.

01

Start

Input, scope, route

  1. 1 Match the React surface Start from the component, page, data-fetching pattern, bundle issue, or refactor target named by the user.
  2. 2 Prioritize by rule category Apply the SKILL.md priority order: waterfalls and bundle size first, then server performance, client fetching, rerenders, rendering, JavaScript, and advanced patterns.
02

Work

Agent / skill execution

  1. 3 Eliminate waterfalls Move awaits into the branches that need them, start independent promises early, use Promise.all, handle partial dependencies, and stream with Suspense boundaries.
  2. 4 Shrink client work Avoid barrel imports, dynamically load heavy components, defer third-party code, conditionally load features, and preload on hover or focus when it improves perceived speed.
03

Verify

Gate, review, validation

  1. 5 Tighten data flow Use React.cache or LRU caching for server work, parallelize server fetches, serialize less into client components, and deduplicate client requests or global listeners.
  2. 6 Reduce render cost Shape subscriptions, memoize expensive subtrees, stabilize callbacks, lazy-initialize state, transition non-urgent updates, and apply rendering rules such as content-visibility or static JSX hoisting.
04

Close

Report, handoff, artifact

  1. 7 Use rule files for examples Pull concrete incorrect and correct code patterns from the individual rule files or the full compiled guide before recommending refactors.

Syntax, arguments, subcommands

How to invoke the skill: syntax, positional arguments, shared options, then each subcommand with its own syntax and outcome.

Syntax

/ak:react-best-practices [component or pattern]

Arguments

[component or pattern] Required

React surface or rule focus

Component, route, server function, bundle problem, data-fetching path, render symptom, or named optimization pattern to audit or improve. Include baseline evidence, compatibility constraints, mutation boundary, and the measurement or test threshold that defines success.

/ak:react-best-practices "Audit the existing Next.js product route for server waterfalls and client bundle cost; propose ranked changes first and implement only approved files."

Sample Prompt

Concrete invocations for each flag, subcommand, mode, or route available in the live workflow.

Default component review Recommended 
/ak:react-best-practices ProductGrid
Use when:
Use when writing, reviewing, or refactoring a React component for performance.
Expected:
The skill checks the named component against the prioritized Vercel rule categories and returns concrete refactor guidance backed by rule examples.
Next.js data fetching 
/ak:react-best-practices dashboard page data fetching
Use when:
Use for async waterfalls, server-side fetching, client request deduplication, or slow Next.js page loads.
Expected:
The skill prioritizes waterfall removal, server fetch parallelization, cache choices, serialization limits, and client-side SWR or listener deduplication.
Bundle analysis 
/ak:react-best-practices checkout bundle size
Use when:
Use when a React or Next.js route ships too much JavaScript or loads heavy features too early.
Expected:
The skill applies bundle rules for direct imports, dynamic imports, deferred third-party scripts, conditional loading, and preloading for perceived speed.
Rendering hot path 
/ak:react-best-practices activity feed rendering performance
Use when:
Use when rerenders, hydration behavior, long lists, SVG work, or JavaScript loops make interactions feel slow.
Expected:
The skill combines rerender, rendering, JavaScript, and advanced rules to suggest subscription shaping, lazy state, transitions, content-visibility, hoisting, and loop fixes.

Handled Scope

  • React component optimization
  • Next.js pages and data fetching
  • Async waterfall removal
  • Bundle size analysis
  • Server and client data deduplication
  • Rendering and JavaScript hot-path performance

Next