AgentStack
Sign in Publish
MCP servers Skills Toolkits Why AgentStack Sell Docs
Sign in
SKILL verified MIT Self-run

React

skill-stuffbucket-skills-react · by stuffbucket

Root index for the react-* family — performance best practices (Vercel Engineering guidelines for React + Next.js) and composition patterns (compound components, render props, context, React 19 API changes). Use when the user asks about React or Next.js patterns, component API design, render performance, bundle optimization, or refactoring boolean-prop proliferation.

↗ Website ↗ Repository
— No reviews yet
0 installs
7 views
0.0% view→install

Install

$ agentstack add skill-stuffbucket-skills-react

✓ scanned · ✓ verified — works with Claude Code, Cursor, and more.

Security review

✓ Passed

No issues found. Passed automated security review. · v0.1.0 How review works →

  • ✓ Prompt-injection patterns
  • ✓ Secret / credential exfiltration
  • ✓ Dangerous shell & filesystem operations
  • ✓ Untrusted network calls
  • ✓ Known-malicious package signatures

What it can access

  • ✓ Network access No
  • ✓ Filesystem access No
  • ✓ Shell / process execution No
  • ✓ Environment & secrets No
  • ✓ Dynamic code execution No

From automated source analysis of v0.1.0. “Used” means the capability is present in the source — more access means more to trust, not that it’s unsafe.

Are you the author of React? Claim this listing to set pricing, connect Stripe payouts, and keep 70% of every sale.
Sign up to claim

About

React

Small family with two complementary skills — one for runtime/build performance, one for component API design.

Routing table

| Skill | When to use | | --- | --- | | react-best-practices | Performance optimization for React + Next.js per Vercel Engineering — render cost, data fetching, Suspense, server components, bundle size, image/font handling. Use when writing, reviewing, or refactoring code for performance. | | react-composition | API design that scales — compound components, render props, context providers, slot patterns, React 19 changes. Use when a component has too many boolean props, when building a reusable library, or when designing a flexible component API. |

Cross-family edges

  • tauri (and especially tauri-setup-vite, tauri-commands, tauri-events) — when React is the frontend of a Tauri app; the React-side patterns live here while the Rust-side patterns live there.
  • figma-make-to-vite — turn a Figma Make export into a Vite + React app; pair with react-composition when extracting reusable components.
  • design-frontend, design-extract, design-polish — design judgment paired with React implementation.
  • design-optimize — when slow UI is symptom-first; react-best-practices is the root-cause counterpart.
  • boundary-domain-closure — close component prop domains with discriminated unions instead of boolean proliferation.
  • pages-build-vite — bundle size shows up here.

Decision flow

  1. "Feels slow / re-renders too much / bundle too big / waterfall" → react-best-practices.
  2. "Too many props / boolean explosion / can't compose this" → react-composition.
  3. Both at once (large library refactor) → start with react-composition to fix the API, then react-best-practices for runtime cost.
  4. React 19 upgrade questions → react-composition (covers API changes).

When NOT to use this skill

  • Plain JS / TS language questions with no React surface.
  • CSS-in-JS / styling library selection — see design-frontend.
  • Routing-specific questions (React Router, Next.js App Router internals) — these skills assume the router is already chosen.
  • State management library selection — neither skill takes a position on Redux vs Zustand vs Jotai.

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

Install and usage instructions live in the source repository linked above.

Reviews

No reviews yet — be the first.

Write a review

Versions

  • v0.1.0 Imported from the upstream source.

More in Agent Skills