Skip to content
Agents Pack

Develop with React

Develop with React

Section titled “Develop with React”

Core pack 0.29.0 adds two optional React skills adapted from Vercel Engineering’s MIT-licensed agent-skills repository:

Skill Use it for
ap-react-best-practices React and Next.js performance: waterfalls, bundles, server and client data flow, re-renders, rendering, and measured JavaScript hot paths.
ap-react-composition-patterns Component API design: boolean-prop proliferation, explicit variants, compound components, shared state, and children-based composition.

Both skills work with Claude Code, Codex, and Cursor. They are optional, so an existing installation does not gain them merely by updating the pack.

Install the skills

Section titled “Install the skills”

Ask your coding agent:

Use ap-manage-agents-pack to preview installing ap-react-best-practices and
ap-react-composition-patterns. Wait for my approval before applying each
change, then verify the installation.

Or install them directly:

agents-pack install ap-react-best-practices --dry-run
agents-pack install ap-react-best-practices --yes


agents-pack install ap-react-composition-patterns --dry-run
agents-pack install ap-react-composition-patterns --yes


agents-pack status

If the component IDs are unavailable, update the content pack first. See Update, pin, and rollback.

Choose the performance skill

Section titled “Choose the performance skill”

Use ap-react-best-practices when performance is material:

Use ap-react-best-practices to review this Next.js route. Find the
highest-impact waterfalls, bundle costs, and rendering problems. Verify the
installed framework versions, make only evidenced changes, and measure the
result where the repository has suitable tooling.

The skill checks the installed React, Next.js, and related versions before using framework-specific APIs. It prioritizes high-impact problems before micro-optimizations and does not claim a performance improvement from source inspection alone.

Choose the composition skill

Section titled “Choose the composition skill”

Use ap-react-composition-patterns when a component API is becoming hard to understand or extend:

Use ap-react-composition-patterns to refactor this component API. Determine
whether its boolean props create invalid combinations, preserve existing
behavior, and propose the smallest clearer composition model.

The skill favors explicit variants, focused context interfaces, and normal JSX composition when those patterns simplify real variability or shared state. It keeps small components simple and gates React 19 advice on the installed React version.

Use them together when both problems are real

Section titled “Use them together when both problems are real”

Composition and performance overlap, but neither skill is a blanket redesign instruction. A component may need a clearer API without having a performance problem, or a route may need parallel data loading without changing its public component interface.

Name both skills only when both concerns matter:

Use ap-react-composition-patterns to simplify this component family, then use
ap-react-best-practices to check that the refactor does not introduce
waterfalls, unnecessary client code, or avoidable re-renders. Run the project's
tests, typecheck, lint, and build.

For visual direction and rendered UI verification, use ap-frontend-design and ap-frontend-review instead.

Section titled “Related”