Frontend Master Skill

Unified decision framework for modern frontend development.

Stack: Next.js 14+ (App Router) · React 18+ · Tailwind CSS · TypeScript · Framer Motion

Quick Decision Matrix

WHAT DO YOU NEED?
│
├─► UI Components
│   ├─ Basic (buttons, forms, dialogs) → shadcn/ui
│   ├─ SaaS polish (tickers, marquees) → Magic UI [skill: frontend-magic-ui]
│   └─ Dramatic effects (spotlight, 3D) → Aceternity [skill: frontend-aceternity]
│
├─► Animations
│   ├─ Just plays/loops (loaders, feedback) → Lottie [skill: frontend-lottie]
│   └─ Reacts to input (hover, data) → Rive [skill: frontend-rive]
│
├─► Assets
│   ├─ Icons → Iconify/Lucide [skill: frontend-iconify]
│   ├─ Avatars → DiceBear (FREE) [skill: frontend-image-generation]
│   ├─ Photos → Unsplash (FREE) [skill: frontend-image-generation]
│   └─ Illustrations → unDraw (FREE) [skill: frontend-image-generation]
│
├─► Theming
│   ├─ Colors/palette → Color System [skill: frontend-color-system]
│   └─ Typography → Google Fonts [skill: frontend-google-fonts]
│
└─► Quality
    ├─ Code checks → Debug & Linting [skill: frontend-debug-linting]
    └─ Visual QA → Playwright [skill: frontend-playwright]

---

1. Project Setup Checklist

# New Next.js project
npx create-next-app@latest my-app --typescript --tailwind --eslint --app

# Essential dependencies
npm install clsx tailwind-merge framer-motion
npm install -D prettier eslint-config-prettier

# UI foundation
npx shadcn@latest init
npx shadcn@latest add button card input dialog

Recommended Structure

src/
├── app/                    # Next.js App Router
│   ├── layout.tsx          # Root layout + fonts
│   ├── page.tsx            # Home page
│   └── (routes)/           # Route groups
├── components/
│   ├── ui/                 # shadcn components
│   ├── magicui/            # Magic UI components
│   └── [feature]/          # Feature components
├── lib/
│   ├── fonts.ts            # Font configuration
│   ├── utils.ts            # cn() helper
│   └── constants.ts        # App constants
├── styles/
│   └── globals.css         # Tailwind + CSS vars
└── public/
    ├── animations/         # .lottie, .riv files
    ├── icons/              # Downloaded SVGs
    └── images/             # Static images

---

2. Component Selection Guide

UI Components Decision Tree

Need a component?
│
├─► Form element (input, select, checkbox)
│   └─► shadcn/ui — accessible, unstyled base
│
├─► Data display (table, card, list)
│   └─► shadcn/ui — consistent patterns
│
├─► Marketing/Landing page
│   ├─► Stats/numbers → Magic UI: NumberTicker
│   ├─► Logo carousel → Magic UI: Marquee
│   ├─► Feature grid → Magic UI: BentoGrid
│   ├─► Hero spotlight → Aceternity: Spotlight, Aurora
│   ├─► 3D hover cards → Aceternity: 3DCard
│   ├─► Text reveal → Aceternity: TextGenerateEffect
│   └─► Device mockup → Magic UI: Safari, iPhone
│
└─► Interactive element
    ├─► Simple hover/focus → Tailwind transitions
    ├─► Complex entrance → Framer Motion
    └─► State machine → Rive

Animation Decision Tree

Animation needed?
│
├─► Does it react to user input?
│   ├─ NO → Lottie (just plays)
│   └─ YES → Does it have multiple states?
│       ├─ Simple hover → CSS/Framer Motion
│       └─ Complex states → Rive
│
├─► What type?
│   ├─ Loading spinner → Lottie
│   ├─ Success/error → Lottie
│   ├─ Empty state illustration → Lottie
│   ├─ Animated toggle/checkbox → Rive
│   ├─ Progress driven by data → Rive
│   └─ Hero background effect → Aceternity

Quick Reference:

Need	Solution
Loader spinner	Lottie
Success checkmark	Lottie
Animated button	Rive
Data-driven progress	Rive
Hero spotlight	Aceternity
Number ticker	Magic UI

---

3. Styling Best Practices

Tailwind Patterns

// ✅ Use cn() for conditional classes
import { cn } from "@/lib/utils"

<button className={cn(
  "px-4 py-2 rounded-md font-medium",
  "bg-primary text-primary-foreground",
  "hover:bg-primary/90 transition-colors",
  disabled && "opacity-50 cursor-not-allowed"
)}>

// ✅ Responsive: mobile-first
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

// ✅ Dark mode with CSS variables
<div className="bg-background text-foreground">

// ❌ Avoid arbitrary values when Tailwind has it
<div className="mt-[16px]">  // Bad
<div className="mt-4">       // Good

Color System Setup

→ See [frontend-color-system] for full guide

/* globals.css - shadcn theme structure */
:root {
  --background: 0 0% 100%;
  --foreground: 240 10% 3.9%;
  --primary: 239 84% 67%;
  --primary-foreground: 0 0% 98%;
  /* ... */
}

.dark {
  --background: 240 10% 3.9%;
  --foreground: 0 0% 98%;
  /* ... */
}

Typography Setup

→ See [frontend-google-fonts] for font pairings

// lib/fonts.ts
import { Inter, Plus_Jakarta_Sans } from 'next/font/google'

export const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-inter',
})

export const jakarta = Plus_Jakarta_Sans({
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-jakarta',
})

// app/layout.tsx
<html className={`${inter.variable} ${jakarta.variable}`}>

// tailwind.config.ts
fontFamily: {
  sans: ['var(--font-inter)'],
  display: ['var(--font-jakarta)'],
}

Font Pairing Presets:

Project Type	Heading	Body
Modern SaaS	Plus Jakarta Sans	Inter
Corporate	Source Sans 3	Source Serif 4
Editorial	Playfair Display	Lora
Dev Tools	Geist	Inter

---

4. Assets Strategy

Icons

→ See [frontend-iconify] for full API

// Recommended: @iconify/react with Lucide set
import { Icon } from '@iconify/react'

<Icon icon="lucide:home" className="w-5 h-5" />

// Or download SVGs for performance
curl -o ./public/icons/home.svg "https://api.iconify.design/lucide/home.svg"

Images — FREE FIRST

→ See [frontend-image-generation] for all options

ALWAYS FREE FIRST:
  Avatars:      DiceBear, Boring Avatars, UI Avatars
  Photos:       Unsplash, Picsum
  Illustrations: unDraw, Storyset
  Backgrounds:  Haikei, Hero Patterns

AI GENERATION ONLY WHEN:
  - Custom branded asset needed
  - No suitable free alternative
  - User explicitly requests

// Avatar with fallback
const fallback = `https://api.dicebear.com/7.x/lorelei/svg?seed=${name}`
<img src={src || fallback} onError={e => e.target.src = fallback} />

// Placeholder photo
<img src="https://source.unsplash.com/800x600/?technology" />

---

5. SSR & Hydration Rules

Critical for Next.js App Router:

// 1. Client components need directive
'use client'

// 2. Browser-only code → useEffect
const [mounted, setMounted] = useState(false)
useEffect(() => setMounted(true), [])
if (!mounted) return <Skeleton />

// 3. Heavy animations → dynamic import
import dynamic from 'next/dynamic'
const Globe = dynamic(() => import('@/components/globe'), { ssr: false })

// 4. Window/document access → check first
if (typeof window !== 'undefined') {
  // browser code
}

Components requiring 'use client':

• All Aceternity components
• All Magic UI animated components
• Lottie/Rive players
• Anything using useState, useEffect, event handlers

---

6. Performance Checklist

Images:
  ✓ Use next/image with proper sizing
  ✓ Add priority to LCP images
  ✓ Lazy load below-fold images

Fonts:
  ✓ Use next/font (auto self-hosted)
  ✓ Only 'latin' subset unless needed
  ✓ display: 'swap' always

Animations:
  ✓ Reduce particles on mobile
  ✓ Respect prefers-reduced-motion
  ✓ Pause when not in viewport

Components:
  ✓ Dynamic import heavy components
  ✓ Lazy load below-fold sections
  ✓ Memoize expensive renders

// Reduced motion check
const prefersReducedMotion = window.matchMedia(
  '(prefers-reduced-motion: reduce)'
).matches

// Viewport visibility
import { useInView } from 'react-intersection-observer'
const { ref, inView } = useInView({ threshold: 0.1 })
useEffect(() => {
  inView ? animation.play() : animation.pause()
}, [inView])

---

7. Quality Gates

Before Every Delivery

→ See [frontend-debug-linting] and [frontend-playwright]

CODE CHECKS (required):
  npm run lint        → 0 errors
  npm run typecheck   → 0 errors
  npm run format      → clean

VISUAL QA (required):
  1. npm run dev
  2. browser_navigate → page
  3. browser_take_screenshot → looks correct
  4. browser_console_messages { onlyErrors: true } → EMPTY
  5. browser_resize { width: 375 } → mobile works

Common Issues Quick Fix

TypeScript:
  "Type 'X' not assignable to 'Y'" → Fix type or add assertion
  "Object possibly undefined" → Add ?. or ?? fallback

React:
  "Missing useEffect dependencies" → Add deps or useCallback
  "Each child needs unique key" → Add key={item.id}

Hydration:
  "Text content mismatch" → 'use client' + mounted check
  "Hydration failed" → dynamic import with ssr: false

Console:
  "Failed to fetch" → Check API/network
  "Cannot read property of undefined" → Add loading state

---

8. Common Patterns

Responsive Container

<div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl">
  {children}
</div>

Section Spacing

<section className="py-16 md:py-24 lg:py-32">
  <div className="container">
    <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold mb-8">
      Title
    </h2>
  </div>
</section>

Card Grid

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  {items.map(item => (
    <Card key={item.id}>
      <CardHeader>
        <CardTitle>{item.title}</CardTitle>
      </CardHeader>
      <CardContent>{item.content}</CardContent>
    </Card>
  ))}
</div>

Loading State

function Component() {
  const [data, setData] = useState(null)
  const [loading, setLoading] = useState(true)

  if (loading) return <Skeleton className="h-32 w-full" />
  if (!data) return <EmptyState />
  return <Content data={data} />
}

---

9. Skill Reference Map

Task	Primary Skill	When to Use
Dramatic hero effects	frontend-aceternity	Spotlight, aurora, 3D cards
Color palette/theme	frontend-color-system	Brand colors, dark mode
Linting & debugging	frontend-debug-linting	Before every delivery
Typography	frontend-google-fonts	Font setup, pairings
Icons	frontend-iconify	Search & integrate icons
Images & avatars	frontend-image-generation	FREE assets first
Simple animations	frontend-lottie	Loaders, feedback
SaaS components	frontend-magic-ui	Tickers, marquees, mockups
Visual testing	frontend-playwright	Screenshot verification
Interactive animations	frontend-rive	State-driven animations

---

10. Quick Start Templates

Landing Page Hero

'use client'
import { Spotlight } from '@/components/ui/spotlight'
import { FlipWords } from '@/components/ui/flip-words'

export function Hero() {
  return (
    <section className="relative h-screen bg-black overflow-hidden">
      <Spotlight className="absolute -top-40 left-0" fill="white" />
      <div className="relative z-10 container flex flex-col items-center justify-center h-full text-center">
        <h1 className="text-4xl md:text-6xl font-bold text-white mb-6">
          Build <FlipWords words={["faster", "better", "smarter"]} /> apps
        </h1>
        <p className="text-xl text-gray-400 max-w-2xl mb-8">
          Description text here
        </p>
        <Button size="lg">Get Started</Button>
      </div>
    </section>
  )
}

Stats Section

'use client'
import { NumberTicker } from '@/components/magicui/number-ticker'

const stats = [
  { value: 10000, label: 'Users', suffix: '+' },
  { value: 99.9, label: 'Uptime', suffix: '%' },
  { value: 50, label: 'Countries', suffix: '+' },
]

export function Stats() {
  return (
    <section className="py-16 bg-muted">
      <div className="container grid grid-cols-1 md:grid-cols-3 gap-8 text-center">
        {stats.map(stat => (
          <div key={stat.label}>
            <div className="text-4xl font-bold">
              <NumberTicker value={stat.value} />
              {stat.suffix}
            </div>
            <div className="text-muted-foreground">{stat.label}</div>
          </div>
        ))}
      </div>
    </section>
  )
}

---

External Resources

• shadcn/ui: https://ui.shadcn.com
• Tailwind CSS: https://tailwindcss.com/docs
• Next.js: https://nextjs.org/docs
• Framer Motion: https://www.framer.com/motion
• Magic UI: https://magicui.design
• Aceternity: https://ui.aceternity.com
• LottieFiles: https://lottiefiles.com
• Rive: https://rive.app

For latest API of any library → use context7 skill