Senior Frontend Specialist (2026 Edition)

English | Bahasa Indonesia

---

<a name="english"></a>

English

Description

Production-grade frontend development patterns, performance optimization, and modern ecosystem integrations for React 19 / Next.js 15 applications with Tailwind CSS v4 and TypeScript. Covers React 19 Compiler, Partial Prerendering (PPR), View Transitions API, and SPA/MPA hybrid strategies with automated self-healing testing loops.

Orchestration & Integration

• design-system-architect: For building robust UI components (Radix, Base UI, shadcn) and design tokens.
• tailwind-expert: For styling and custom @theme configurations.
• svg-animation-motion-expert: For advanced animations, GSAP timelines, and motion physics.
• nextjs-app-router-expert: For RSC, caching, and Next.js routing patterns.
• state-management-expert: For client-side state (Zustand, Jotai).
• tanstack-query-expert: For advanced data fetching and server state caching.
• spa-orchestrator: For Single-Page Application architectures.
• mpa-orchestrator: For Multi-Page Application architectures.
• autonomous-tdd-debugger: For automated unit/component test execution and stack-trace self-healing.
• anti-slop: For enforcing complete, stub-free component implementations and zero syntax narration comments.

Trigger Conditions

• Scaffold a new React or Next.js 15 project with TypeScript and Tailwind CSS v4.
• Generate new components, custom hooks, or Server Actions.
• Analyze and optimize bundle sizes and Core Web Vitals.
• Implement advanced React 19 patterns (useActionState, useOptimistic, use()).
• Build SPAs — coordinate with spa-orchestrator.
• Ensure accessibility compliance (WCAG 2.2) and testing.

Technical Guidelines & Best Practices

1. Next.js 15: Server vs Client Components

Use Server Components by default for performance and SEO. Use 'use client' strictly for:

• State (useState, useEffect), event handlers (onClick), browser APIs.
• Interactive UI needing client hydration.

Next.js 15.2+ Requirements:

• Await Promise-based params and searchParams before accessing properties.
• Use Partial Prerendering (PPR) natively. Wrap dynamic sections in <Suspense>.

2. React 19 Compiler & Hooks

Do not use useMemo, useCallback, or React.memo unless explicitly required; rely on the React 19 compiler.

Mandatory Hooks:

• useActionState: Manage form state, pending indicators, and action results with Server Actions.
• useOptimistic: Update UI instantly before server confirmation.
• useFormStatus: Read form submission state in child components.
• use(promise): Unwrap promises or context inside render with Suspense.

3. View Transitions API

Implement native View Transitions API for smooth page transitions. Use Next.js 15 <Link viewTransition> natively.

4. Tailwind CSS v4

Use CSS-first configuration. Define custom tokens with @theme and register plugins with @plugin in the main CSS file. Never create tailwind.config.js.

5. Accessibility (WCAG 2.2) & Self-Healing Testing

• Enforce semantic HTML (<button>, <nav>, <main>, <article>).
• Enforce full keyboard navigability and valid aria-* labels.
• Run typecheck (tsc --noEmit) to verify zero compiler diagnostics.
• Write unit tests using Vitest and React Testing Library.
• When tests fail, activate autonomous-tdd-debugger to self-heal until 100% passing.

6. Architecture Integration

• SPA (spa-orchestrator): Use TanStack Router for type-safe client routing and TanStack Query v5 for server state. Never use bare useEffect for data fetching.
• MPA (mpa-orchestrator): Use Alpine.js or HTMX for micro-interactions. Apply Progressive Enhancement.

7. Animations & Motion

For web animations, scroll-driven timelines, GSAP choreographies, and Framer Motion spring physics, delegate directly to svg-animation-motion-expert.

8. Material Design 3 (M3) Web Integration (https://m3.material.io/)

In modern React 19 / Next.js 15 apps, incorporate Google's official Material Web Components (@material/web) or token-mapped headless primitives:

• Material Web Components: Use Lit-based web components (@material/web/button/filled-button.js, @material/web/textfield/outlined-text-field.js) with React 19 native custom element support.
• Dynamic CSS Variable Theming: Map tokens dynamically at the root.

9. Sovereign Visual Hierarchy & Scanability Engineering

Every React 19 / Next.js 15 view must demonstrate Linear/Apple-caliber visual hierarchy:

• Typographic Cadence: Eyebrows (text-[11px] font-semibold tracking-wider uppercase text-neutral-500) -> Hero Titles (text-3xl md:text-5xl font-bold tracking-tight text-neutral-900 leading-[1.1]) -> Section Headings (text-xl md:text-2xl font-semibold tracking-tight) -> Body (text-sm md:text-base text-neutral-600 leading-relaxed).
• Tabular Figures: Always wrap metrics, currency, and counters in tabular-nums.
• Single Focal CTA: Exactly one high-contrast primary button per screen view; secondary actions use subtle/outline treatments.
• Gestalt Proximity: Related controls sit within gap-1.5 (6px); distinct groups sit at space-y-4 (16px); section boundaries use generous whitespace (py-16 md:py-24).
• Crisp 1px Surface Layering: Pair border border-neutral-200/80 dark:border-neutral-800 with subtle directional shadow-xs instead of blurry 30px drop-shadows.

// Example: Production Component with Sovereign Visual Hierarchy
import { ArrowRight } from 'lucide-react';

interface MetricBannerProps {
  category: string;
  title: string;
  metricValue: string;
  metricLabel: string;
  onPrimaryAction: () => void;
  onSecondaryAction?: () => void;
}

export function MetricBanner({
  category,
  title,
  metricValue,
  metricLabel,
  onPrimaryAction,
  onSecondaryAction,
}: MetricBannerProps) {
  return (
    <section className="bg-neutral-50/50 dark:bg-neutral-950 py-12 px-6">
      <div className="mx-auto max-w-5xl rounded-xl border border-neutral-200/80 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-8 shadow-xs">
        {/* Eyebrow: Context landmark with optical tracking */}
        <span className="text-[11px] font-semibold tracking-wider uppercase text-neutral-500 dark:text-neutral-400">
          {category}
        </span>

        {/* Title: Punchy authority with tight tracking */}
        <h1 className="mt-2 text-2xl md:text-3xl font-bold tracking-tight text-neutral-900 dark:text-neutral-50">
          {title}
        </h1>

        {/* Metric block with tabular numerals to eliminate horizontal jitter */}
        <div className="mt-6 flex items-baseline gap-3">
          <span className="text-4xl font-extrabold tracking-tight tabular-nums text-neutral-900 dark:text-neutral-50">
            {metricValue}
          </span>
          <span className="text-sm font-medium text-neutral-500 dark:text-neutral-400">
            {metricLabel}
          </span>
        </div>

        {/* Actions: Single primary CTA dominance + subtle ghost action */}
        <div className="mt-8 flex items-center gap-3">
          <button
            type="button"
            onClick={onPrimaryAction}
            className="cursor-pointer inline-flex items-center gap-2 rounded-lg bg-neutral-900 dark:bg-neutral-100 px-4 py-2 text-sm font-medium text-white dark:text-neutral-900 transition hover:bg-neutral-800 dark:hover:bg-white active:scale-[0.98] focus-visible:ring-2 focus-visible:ring-neutral-900 focus-visible:ring-offset-2"
          >
            Deploy Pipeline
            <ArrowRight className="h-4 w-4" />
          </button>

          {onSecondaryAction && (
            <button
              type="button"
              onClick={onSecondaryAction}
              className="cursor-pointer rounded-lg px-4 py-2 text-sm font-medium text-neutral-600 dark:text-neutral-400 transition hover:text-neutral-900 dark:hover:text-neutral-100 hover:bg-neutral-100 dark:hover:bg-neutral-800 focus-visible:ring-2 focus-visible:ring-neutral-400"
            >
              View Documentation
            </button>
          )}
        </div>
      </div>
    </section>
  );
}

---

<a name="bahasa-indonesia"></a>

Bahasa Indonesia

Deskripsi

Pola pengembangan frontend tingkat produksi, optimasi performa, dan integrasi ekosistem modern untuk aplikasi React 19 / Next.js 15 dengan Tailwind CSS v4 dan TypeScript. Mencakup React 19 Compiler, Partial Prerendering (PPR), View Transitions API, dan strategi hybrid SPA/MPA dengan loop pengujian perbaikan mandiri (self-healing).

Integrasi Orkestrasi

• design-system-architect: Untuk membangun komponen UI yang kuat (Radix, Base UI, shadcn) dan design token.
• tailwind-expert: Untuk styling dan konfigurasi @theme kustom.
• svg-animation-motion-expert: Untuk animasi web, timeline GSAP, dan fisika spring.
• nextjs-app-router-expert: Untuk RSC, caching, dan pola routing Next.js.
• state-management-expert: Untuk state client-side (Zustand, Jotai).
• tanstack-query-expert: Untuk fetching data lanjutan dan caching server state.
• spa-orchestrator: Untuk arsitektur Single-Page Application.
• mpa-orchestrator: Untuk arsitektur Multi-Page Application.
• autonomous-tdd-debugger: Untuk eksekusi pengujian otomatis dan perbaikan mandiri berdasarkan stack trace terminal.

Kondisi Pemicu

• Buat proyek React atau Next.js 15 baru dengan TypeScript dan Tailwind CSS v4.
• Buat komponen baru, custom hooks, atau Server Actions.
• Analisis dan optimalkan ukuran bundle dan Core Web Vitals.
• Terapkan pola React 19 lanjutan (useActionState, useOptimistic, use()).
• Bangun SPA — koordinasikan dengan spa-orchestrator.
• Pastikan kepatuhan aksesibilitas (WCAG 2.2) dan pengujian.

Panduan Teknis & Praktik Terbaik

1. Next.js 15: Server vs Client Components

Gunakan Server Components secara default. Gunakan 'use client' hanya untuk:

• State (useState, useEffect), event handler, API browser.
• UI interaktif yang membutuhkan hidrasi klien.

Persyaratan Next.js 15.2+:

• Wajib await pada params dan searchParams yang kini bertipe Promise.
• Gunakan Partial Prerendering (PPR) secara native. Bungkus bagian dinamis dengan <Suspense>.

2. React 19 Compiler & Hook Baru

Jangan gunakan useMemo, useCallback, atau React.memo kecuali sangat diperlukan; andalkan compiler React 19.

Hook Wajib:

• useActionState: Kelola state form, indikator loading, dan hasil action dengan Server Actions.
• useOptimistic: Perbarui UI secara instan sebelum server mengonfirmasi.
• useFormStatus: Baca status form di dalam komponen anak.
• use(promise): Buka promise atau context langsung di dalam render dengan Suspense.

3. View Transitions API

Terapkan View Transitions API bawaan browser untuk transisi halaman. Gunakan <Link viewTransition> pada Next.js 15.

4. Tailwind CSS v4

Gunakan konfigurasi CSS-first. Definisikan token kustom dengan @theme dan plugin dengan @plugin di file CSS utama (lihat tailwind-expert). Jangan pernah membuat file tailwind.config.js.

5. Aksesibilitas (WCAG 2.2) & Pengujian Self-Healing

• Wajib gunakan HTML semantik (<button>, <nav>, <main>).
• Wajib pastikan navigasi keyboard dengan label aria-* yang valid.
• Jalankan pemeriksaan tipe (tsc --noEmit) untuk memastikan nol eror diagnostik.
• Tulis pengujian unit dengan Vitest dan React Testing Library.
• Jika pengujian gagal, aktifkan autonomous-tdd-debugger untuk memulihkan kode hingga 100% lolos.

6. Integrasi Arsitektur

• SPA (spa-orchestrator): Gunakan TanStack Router untuk routing klien dan TanStack Query v5 untuk server state. Jangan gunakan useEffect murni untuk fetching data.
• MPA (mpa-orchestrator): Gunakan Alpine.js atau HTMX untuk interaksi mikro. Terapkan Progressive Enhancement.

7. Animasi & Motion

Untuk animasi web, timeline scroll-driven, koreografi GSAP, dan fisika spring Framer Motion, delegasikan langsung ke svg-animation-motion-expert.

8. Integrasi Web Material Design 3 (M3) (https://m3.material.io/)

Pada aplikasi React 19 / Next.js 15 modern, terapkan komponen web resmi Google (@material/web) atau primitif headless yang dipetakan ke token M3:

• Komponen Material Web: Manfaatkan komponen berbasis Lit (@material/web) yang didukung secara native oleh React 19 tanpa wrapper tambahan.
• Theming Variabel CSS Dinamis: Terapkan token M3 (--md-sys-color-primary, --md-sys-color-surface-container) pada elemen root untuk menjamin paritas kontras WCAG di seluruh komponen antarmuka.

9. Rekayasa Hierarki Visual & Kemampuan Pindai

Setiap tampilan React 19 / Next.js 15 wajib memancarkan hierarki visual kaliber Stripe/Linear:

• Irama Tipografi: Eyebrow (text-[11px] font-semibold tracking-wider uppercase text-neutral-500) -> Judul Utama (text-3xl md:text-5xl font-bold tracking-tight text-neutral-900 leading-[1.1]) -> Subjudul (text-xl md:text-2xl font-semibold tracking-tight) -> Body (text-sm md:text-base text-neutral-600 leading-relaxed).
• Angka Tabular Wajib: Selalu terapkan tabular-nums pada metrik, saldo mata uang, dan pencacah data.
• Dominasi Single Primary CTA: Maksimal satu tombol utama kontras tinggi per layar; aksi sekunder menggunakan gaya subtle/outline.
• Kedekatan Gestalt (Proximity): Kontrol dan label terhubung duduk berjarak rapat gap-1.5 (6px); batas antar-seksi menggunakan ruang kosong yang lega (py-16 md:py-24).
• Pelapisan Permukaan 1px Tajam: Padukan border tajam border border-neutral-200/80 dark:border-neutral-800 dengan micro-shadow terarah shadow-xs alih-alih bayangan hitam buram 30px.