FRONTEND-MASTERY SuperSkill v2.0

Триггеры: "react", "nextjs", "frontend", "компонент", "UI", "верстка", "figma"

WHEN TO USE

• React/Next.js component → Server vs Client decision tree
• Page with data fetching → ISR/SSR/Streaming pattern
• Figma → Code → 5-step protocol
• Performance issue → Core Web Vitals checklist
• Design/aesthetics → Anti-AI-slop rules

DECISION TREE

Needs onClick/onChange/useState?  → 'use client' (push deep as possible)
Fetches data, no interactivity?   → Server Component (default)
Heavy library (chart/editor/map)? → dynamic(() => import(), { ssr: false })
Large list (100+ items)?          → Virtual scrolling
Image above fold?                 → fetchPriority="high", no lazy

KEY ACTIONS

1. Next.js App Router Page

// app/products/[id]/page.tsx
export const revalidate = 3600; // ISR

async function ProductPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  const product = await db.product.findUnique({ where: { id } });
  if (!product) notFound();
  return (
    <main>
      <h1>{product.name}</h1>
      <Suspense fallback={<ReviewsSkeleton />}>
        <Reviews productId={id} />
      </Suspense>
    </main>
  );
}

2. React 19 Patterns

• use() — read Promise/Context in render, works in conditionals
• useActionState — forms with pending state
• useOptimistic — instant UI feedback before server confirms
• Server Actions: 'use server' + revalidatePath() + redirect()

3. Figma → Code (MCP Protocol)

1. get_metadata     → hierarchy, variants, layers
2. get_design_context → colors, spacing, typography
3. Screenshot       → visual verification
4. Variables        → design tokens → CSS variables
5. Code generation  → production React

4. Performance Optimization

// Images: always sized, lazy below fold
<Image src={src} alt={alt}
  sizes="(max-width: 768px) 100vw, 50vw"
  placeholder="blur" loading="lazy" />

// Fonts: next/font, never system defaults
import { Inter } from 'next/font/google';
const inter = Inter({ subsets: ['latin'], display: 'swap' });

// Bundle splitting: Vite manual chunks
output: {
  manualChunks: { vendor: ["react","react-dom"], charts: ["recharts"] }
}

5. Anti-AI-Slop Design Rules

• Never Inter/Roboto/Arial — use distinctive display + refined body font
• Never purple gradients on white — bold aesthetic with sharp accents
• Asymmetry, overlap, diagonal flow > centered grid monotony
• Backgrounds: gradient meshes, noise/grain textures, layered transparency

CORE WEB VITALS TARGETS

LCP < 2.5s → preload hero image, inline critical CSS
INP < 200ms → debounce inputs, startTransition, break long tasks
CLS < 0.1  → width/height on images, font display swap

CHECKLIST

• [ ] 'use client' only where interactivity needed
• [ ] Suspense boundaries around async components
• [ ] Images: width/height, lazy loading, WebP/AVIF, alt text
• [ ] Fonts: distinctive, preloaded, display swap
• [ ] Mobile: viewport meta, touch targets >= 48px
• [ ] Accessibility: semantic HTML, aria-labels, keyboard nav
• [ ] Color contrast >= 4.5:1 (AA)

ANTI-PATTERNS

1. 'use client' at layout/page level (push to leaf components)
2. ScrollView + map for long lists (use FlatList / virtual scroll)
3. Generic system fonts without design intention
4. Images without explicit dimensions (causes CLS)
5. Fetching data in client when server component would work