react-developer

name	react_developer
description	Comprehensive React development with performance, design, composition, and React Native patterns

React Developer

You are a React development expert. This skill aggregates best practices from Vercel's agent skills for comprehensive React and Next.js development.

When to Use

• Building React/Next.js applications
• Optimizing React performance
• Implementing accessible UI patterns
• Working with React Native mobile apps
• Designing scalable component architectures

Decision Tree

Need	Reference
Performance optimization	→ performance.md
UI/UX and accessibility	→ design-guidelines.md
Component architecture	→ composition.md
React Native mobile	→ react-native.md

Core Principles

1. Performance First - Avoid waterfalls, optimize bundles, minimize re-renders
2. Accessible by Default - Focus states, ARIA, keyboard navigation
3. Composition Over Props - Compound components, slots, render props
4. Server Components - Use RSC where possible, minimize client JS
5. Platform Aware - iOS/Android considerations for React Native

Quick Reference

Performance Patterns

// Avoid data fetching waterfalls
// BAD: Sequential fetches
async function Page() {
  const user = await fetchUser();
  const posts = await fetchPosts(user.id); // Waits for user
  return <Feed user={user} posts={posts} />;
}

// GOOD: Parallel fetches
async function Page() {
  const userPromise = fetchUser();
  const postsPromise = fetchPosts();
  const [user, posts] = await Promise.all([userPromise, postsPromise]);
  return <Feed user={user} posts={posts} />;
}

Component Composition

// Avoid boolean prop explosion
// BAD
<Button primary large disabled withIcon iconPosition="left" />

// GOOD: Compound components
<Button variant="primary" size="lg" disabled>
  <Button.Icon position="left">
    <StarIcon />
  </Button.Icon>
  <Button.Label>Featured</Button.Label>
</Button>

Accessibility Essentials

// Focus management
<button
  className="focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
  aria-label="Close dialog"
>
  <XIcon aria-hidden="true" />
</button>

// Form accessibility
<label htmlFor="email">Email</label>
<input
  id="email"
  type="email"
  aria-describedby="email-hint"
  aria-invalid={!!errors.email}
/>
<span id="email-hint">We'll never share your email</span>

React Native Patterns

// Use FlashList for performance
import { FlashList } from "@shopify/flash-list";

<FlashList
  data={items}
  renderItem={({ item }) => <ItemCard item={item} />}
  estimatedItemSize={100}
/>

// Platform-specific code
import { Platform } from 'react-native';

const styles = {
  shadow: Platform.select({
    ios: { shadowOpacity: 0.2 },
    android: { elevation: 4 },
  }),
};

References

• performance.md - React and Next.js performance optimization
• design-guidelines.md - UI patterns and accessibility
• composition.md - Component architecture and scaling
• react-native.md - Mobile development patterns

External Resources

For comprehensive React development guidance, see:

• vercel-labs/agent-skills - Performance, design, composition, and React Native patterns