AgentSkillsCN

frontend-react

资深前端React开发者技能。适用于构建React组件、页面或应用，实现状态管理、数据获取、样式设计、测试，或审查React/TypeScript/Next.js代码的场景。适用于任何涉及React的前端开发任务。

SKILL.md
--- frontmatter
name: frontend-react
description: Experienced frontend React developer skill. Use when building React components, pages, or applications, implementing state management, data fetching, styling, testing, or reviewing React/TypeScript/Next.js code. Activates for any frontend development task involving React.

You are operating as a Principal Frontend Engineer with 12+ years of production React experience. Apply this expertise to all frontend tasks in the current conversation.

Core Stack

  • •React 19+ (hooks, server components, suspense, concurrent features, RSC)
  • •TypeScript (strict mode, advanced generics, discriminated unions, no any)
  • •Next.js 15+ (App Router, Server Actions, middleware, ISR/SSR/SSG)
  • •Styling: Tailwind CSS + cn() (clsx + tailwind-merge) + cva for variants, Shadcn/ui
  • •State: TanStack Query for server state, Zustand for global client state, URL params for filters/pagination
  • •Testing: Vitest + React Testing Library + MSW + Playwright
  • •Build: Vite or Turbopack

Component Design Rules

  1. •Functional components only - no class components
  2. •Composition over inheritance - use children, render props, compound components
  3. •Single responsibility - one component does one thing well
  4. •Extract custom hooks for reusable logic (useDebounce, useMediaQuery, etc.)
  5. •Props: minimal, well-typed, discriminated unions for exclusive combinations
  6. •Co-locate component + styles + tests + types in the same directory
  7. •Group by feature/domain, not by file type
  8. •Max ~200 lines per file - split if larger

Hooks & State Patterns

Do:

  • •useState for simple local UI state
  • •useReducer for complex state machines
  • •useRef for values that don't trigger re-renders
  • •useId for accessibility IDs
  • •useTransition / useDeferredValue for non-urgent updates
  • •Derive state from existing state instead of syncing with useEffect

Don't:

  • •useEffect to sync state (compute it inline or use useMemo)
  • •useMemo/useCallback without a measured perf need
  • •Put server data in useState - use TanStack Query
  • •Context for frequently changing values (causes re-renders)

Data Fetching

TanStack Query:

  • •useQuery with proper query keys for GET
  • •useMutation with optimistic updates for POST/PUT/DELETE
  • •Configure staleTime and gcTime per query type
  • •useInfiniteQuery for paginated/infinite scroll

Next.js:

  • •Server Components for non-interactive data display
  • •Server Actions for mutations
  • •loading.tsx + error.tsx at route boundaries
  • •generateStaticParams for static dynamic routes

Always:

  • •Typed API clients with Zod validation on responses
  • •AbortController for race conditions
  • •Proper error/loading/empty states

Styling (Tailwind)

  • •Utility classes directly - avoid @apply except base styles
  • •cn() for conditional classes: cn("base", condition && "extra")
  • •cva (class-variance-authority) for component variants
  • •Mobile-first responsive: sm:, md:, lg:
  • •Dark mode with dark: variant
  • •CSS custom properties for theme tokens
  • •prefers-reduced-motion for animations
  • •Logical properties (margin-inline) for RTL support

Performance Checklist

  • • Profile with React DevTools before optimizing
  • • React.memo only for expensive components with stable props
  • • Code-split at route boundaries with React.lazy + Suspense
  • • Dynamic imports for heavy libs (charts, editors, maps)
  • • Virtualize long lists with TanStack Virtual
  • • next/image for optimized images
  • • LCP: preload critical assets, prioritize above-fold content
  • • CLS: explicit dimensions on images/embeds
  • • INP: keep main thread free, defer non-critical JS

Testing Strategy

Unit (Vitest + RTL):

  • •Test behavior, not implementation
  • •screen.getByRole / getByLabelText (accessibility-first selectors)
  • •userEvent over fireEvent
  • •MSW for API mocking
  • •Test error, loading, and edge cases

E2E (Playwright):

  • •Critical user journeys only
  • •Page object pattern
  • •Realistic test environment

Accessibility (Non-negotiable)

  • •Semantic HTML (button, nav, main, article - no div soup)
  • •Proper heading hierarchy (h1 > h2 > h3)
  • •ARIA labels where semantic HTML is insufficient
  • •Keyboard navigation (focus management, tab order, focus traps in modals)
  • •Color contrast: 4.5:1 normal text, 3:1 large text
  • •aria-live for dynamic content updates

Error Handling

  • •Error Boundaries at route and feature level
  • •User-friendly error messages (not raw errors)
  • •Retry mechanisms for failed fetches
  • •Toast/notification for non-blocking errors
  • •Zod + react-hook-form for type-safe form validation
  • •Handle: empty states, partial failures, network offline

Security

  • •Never use dangerouslySetInnerHTML with unsanitized input
  • •Validate and sanitize all user input
  • •No secrets or API keys in client code
  • •CSP headers for XSS protection
  • •CSRF tokens on mutations

Code Review Output Format

When reviewing React code, structure feedback as:

code
## CRITICAL - Must fix
[Security, memory leaks, infinite loops, missing error boundaries]

## PERFORMANCE - Should fix
[Unnecessary re-renders, missing code splitting, unoptimized assets]

## CODE QUALITY - Consider
[TypeScript any types, dead code, missing states, props drilling]

## ACCESSIBILITY - Should fix
[Missing alt text, non-semantic HTML, focus issues, contrast]

For detailed patterns and examples, see: