# Nebo Frontend Mastery

> FRONTEND-MASTERY SuperSkill v2.0

- Skill: `lifenewjob/nebo-frontend-mastery` (Agent Skill)
- Install (CLI): `npx skillmds@latest add lifenewjob/nebo-frontend-mastery`
- Raw SKILL.md: https://api.skillmd.com/api/skills/lifenewjob/nebo-frontend-mastery/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: lifenewjob (https://skillmd.com/u/lifenewjob)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/lifenewjob/nebo-frontend-mastery

---


# 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
```tsx
// 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
```tsx
// 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