--- name: senior-frontend description: "Senior frontend: React 19, Next.js 15, TypeScript, and Tailwind v4 / Frontend tingkat lanjut: React 19, Next.js 15, dan Tailwind v4." author: "Roedy Rustam" version: "4.7.0" --- # Senior Frontend Specialist (2026 Edition) [English](#english) | [Bahasa Indonesia](#bahasa-indonesia) --- ## 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 - `modern-web-guidance`: For HTML5/CSS standards, modern browser APIs, and accessibility guidelines. - `design-system-architect`: For building robust UI components (Radix, Base UI, shadcn) and design tokens. - `modern-css-native-expert`: For native CSS anchor positioning, View Transitions, container queries, and `@starting-style`. - `tailwind-expert`: For styling and custom @theme configurations. - `ui-ux-pro-max`: For UI/UX design intelligence, color harmonies, and 11-stack layout patterns. - `visual-ui-auditor`: For multimodal vision inspection of rendered interfaces and layout fidelity. - `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. - `angular-expert` & `solidjs-expert`: For cross-framework enterprise Signals and fine-grained reactivity 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. - **Cross-Domain Synergy & Subagent Swarm Integration**: `vue-frontend-expert`, `svelte-sveltekit-expert`, `astro-framework-expert`, `htmx-hypermedia-expert`, `micro-frontend-architect`, `fullstack-expert`, `rich-text-editor-expert`, `ephemeral-generative-ui-architect` ### 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 ``. #### 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 `` 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 (` {onSecondaryAction && ( )} ); } ``` #### 10. Non-Generic Website Navigation: Floating Island Capsule Header & Mega Menu Flyouts Modern production websites must avoid generic edge-to-edge glued navbar templates. Implement the **Floating Island Capsule Header** with rich **Flyout Card Mega Menus**: ```tsx 'use client'; import { useState, useRef, useEffect } from 'react'; import Link from 'next/link'; import { Layers, Cpu, ShieldCheck, Zap, ChevronDown, Menu, X } from 'lucide-react'; interface SubMenuItem { title: string; description: string; href: string; icon: typeof Layers; } const SKILL_CATEGORIES: { category: string; items: SubMenuItem[] }[] = [ { category: 'Architecture & Swarm', items: [ { title: 'Zero-to-Prod Orchestrator', description: '8-phase autonomous software lifecycle pipeline', href: '/skills/orchestrator', icon: Layers }, { title: 'Frontier AI & MCP Engine', description: 'Model Context Protocol v1.x with dynamic routing', href: '/skills/mcp', icon: Cpu } ] }, { category: 'Security & Quality Gate', items: [ { title: 'Sovereign Anti-Slop', description: 'Zero-placeholder code & Linear-caliber UI craft', href: '/skills/anti-slop', icon: ShieldCheck }, { title: 'Micro-TDD Compiler', description: 'Sub-15ms in-memory contract verification hot-loop', href: '/skills/tdd', icon: Zap } ] } ]; export function FloatingIslandCapsuleHeader() { const [openDropdown, setOpenDropdown] = useState(null); const [mobileMenuOpen, setMobileMenuOpen] = useState(false); const navRef = useRef(null); useEffect(() => { function handleClickOutside(e: MouseEvent) { if (navRef.current && !navRef.current.contains(e.target as Node)) { setOpenDropdown(null); } } function handleKeyDown(e: KeyboardEvent) { if (e.key === 'Escape') setOpenDropdown(null); } document.addEventListener('mousedown', handleClickOutside); document.addEventListener('keydown', handleKeyDown); return () => { document.removeEventListener('mousedown', handleClickOutside); document.removeEventListener('keydown', handleKeyDown); }; }, []); return (
{/* Floating Pill Capsule Bar */}
); } ``` --- #### React 19 Optimistic Mutation & Server Action Form Hook (TypeScript) ```tsx 'use client'; import { useActionState, useOptimistic } from 'react'; export interface TaskItem { id: string; title: string; completed: boolean; } export function OptimisticTaskList({ initialTasks, toggleTaskAction }: { initialTasks: TaskItem[]; toggleTaskAction: (prevState: { error?: string }, formData: FormData) => Promise<{ error?: string }>; }) { const [state, formAction, isPending] = useActionState(toggleTaskAction, {}); const [optimisticTasks, addOptimisticToggle] = useOptimistic( initialTasks, (currentTasks, toggledId: string) => currentTasks.map((t) => (t.id === toggledId ? { ...t, completed: !t.completed } : t)) ); return (
{ const id = String(formData.get('taskId') ?? ''); addOptimisticToggle(id); formAction(formData); }} className="space-y-2" > {state.error &&

{state.error}

} {optimisticTasks.map((task) => (
{task.title}
))}
); } ``` #### React 19 `use()` Promise Streaming & View Transition Switcher (TSX) ```tsx 'use client'; import { use, startTransition, useState } from 'react'; export interface TelemetryPoint { readonly id: string; readonly region: string; readonly latencyP99Ms: number; readonly status: 'healthy' | 'degraded'; } export function StreamingTelemetryPanel({ telemetryPromise }: { telemetryPromise: Promise; }) { const rows = use(telemetryPromise); const [selectedRegion, setSelectedRegion] = useState('ALL'); const filtered = selectedRegion === 'ALL' ? rows : rows.filter((r) => r.region === selectedRegion); function handleSelectRegion(region: string) { startTransition(() => { setSelectedRegion(region); }); } return (
{['ALL', 'ap-southeast-1', 'us-east-1', 'eu-central-1'].map((region) => ( ))}
{filtered.map((item) => (
{item.region} {item.latencyP99Ms} ms
))}
); } ``` #### Sovereign Enterprise Data Table with Tabular Numerals & Keyboard Navigation (TSX) ```tsx 'use client'; import { useState, type KeyboardEvent } from 'react'; export interface LedgerRow { readonly id: string; readonly invoiceNo: string; readonly amountMinor: number; readonly currency: string; readonly settled: boolean; } export function SovereignLedgerTable({ rows }: { readonly rows: readonly LedgerRow[] }) { const [focusedIndex, setFocusedIndex] = useState(0); function handleKeyDown(e: KeyboardEvent) { if (e.key === 'ArrowDown') { e.preventDefault(); setFocusedIndex((prev) => Math.min(rows.length - 1, prev + 1)); } else if (e.key === 'ArrowUp') { e.preventDefault(); setFocusedIndex((prev) => Math.max(0, prev - 1)); } } return (
{rows.map((row, idx) => ( setFocusedIndex(idx)} className="cursor-pointer transition hover:bg-neutral-50 dark:hover:bg-neutral-900/60 aria-selected:bg-neutral-100/80 dark:aria-selected:bg-neutral-900" > ))}
Invoice Status Amount
{row.invoiceNo} {row.settled ? 'Settled' : 'Pending'} {row.currency} {(row.amountMinor / 100).toFixed(2)}
); } ``` #### 11. NiubiGEO Mode: Cosmic Evidence & Interactive Utility Web Architecture (Anti-Monotony Blueprint) Whenever building AI SaaS, developer tools, diagnostic platforms, or conversion landing pages where standard templates feel repetitive and monotonous, deploy the **NiubiGEO Cosmic Evidence Architecture**: ##### 1. Tailwind v4 Theme Tokens (`theme.css`) ```css @import "tailwindcss"; @theme { --color-canvas: #080a0f; /* Deep Cosmic Obsidian */ --color-surface-l1: #11141e; /* Layer 1 Surface */ --color-surface-l2: #181b29; /* Layer 2 Elevated Surface */ --color-border-hairline: #272b3c; /* Crisp 1px Boundary */ --color-text-primary: #f5f4fa; /* Crisp Off-White */ --color-text-secondary: #979aaf; /* Muted Slate-Violet */ --color-accent-brand: #b7a0ff; /* Electric Lavender */ --color-accent-evidence: #7ce4b0; /* Emerald Jade (Signals & Verified) */ --color-focus-glow: #76508d; /* Deep Violet Glow */ --font-sans: "Inter", "Noto Sans SC", system-ui, sans-serif; } ``` ##### 2. Reusable Component: Conversion Hero with Embedded Interactive Setup ```tsx import React, { useState } from 'react'; import { ArrowRight, CheckCircle2, Sparkles, Search } from 'lucide-react'; export function ConversionHeroWithSetup({ onAnalyze }: { onAnalyze?: (url: string) => void }) { const [url, setUrl] = useState(''); const [isPending, setIsPending] = useState(false); const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); if (!url.trim()) return; setIsPending(true); onAnalyze?.(url); }; return (
{/* Background subtle radial glow */}
); } ``` ##### 3. Reusable Component: Actionable Evidence Bento Grid ```tsx import React from 'react'; import { ShieldCheck, Tag, Globe2, ListTodo, ArrowUpRight } from 'lucide-react'; export function ActionableEvidenceBento() { return (

ACTIONABLE EVIDENCE · ZERO VANITY

Reports Are Not a Score, But a Set of Actionable Proof.

{/* 4-Card Bento Grid */}
{/* Card 1: Brand Visibility */}
Metric 01 Active Mention

Brand Presence & Visibility

Measures whether LLMs spontaneously cite your solution when users query domain questions.

78.4% +14.2% vs competitors
{/* Card 2: Description Accuracy */}
Metric 02

Entity Description Accuracy

Verifies if AI hallucinations misrepresent your core features, pricing, or tech stack.

✓ Open-Source Verified ✓ Self-Hosted Support i18n Multi-Lingual
{/* Card 3: Multi-Platform Citations */}
Metric 03

Citations & Competitor Benchmarks

Track exact URLs and community discussions where AI discovers your product credentials.

Top Source

GitHub Trending / Repo

Secondary

Substack & X Threads

{/* Card 4: Prioritized Action Checklist */}
Action Plan

Prioritized Improvement Triage

Concrete technical modifications that yield direct increases in search agent citations.

  • Deploy `llms.txt` and schema.org markup High Impact
  • Publish benchmark comparison table Priority
); } ``` #### 12. Dribbble-Grade Hero Section Blueprints: React 19 + Tailwind CSS v4 (Anti-Monotony Recipes) Deploy these 3 canonical Dribbble Hero Section recipes when building web apps to eliminate hero section monotony: ##### Blueprint A: Split-Screen 50/50 with 3D Perspective Tilt & Floating Live Chips (`SplitScreenPerspectiveHero.tsx`) ```tsx import React from 'react'; import { ArrowRight, Play, Sparkles, CheckCircle2, TrendingUp, ShieldCheck } from 'lucide-react'; export function SplitScreenPerspectiveHero() { return (
{/* Background ambient lighting scrim */}
); } ``` ##### Blueprint B: Above-the-Fold Modular Bento Grid Hero (`ModularBentoHero.tsx`) ```tsx import React from 'react'; import { ArrowRight, Terminal, Cpu, Zap, Star } from 'lucide-react'; export function ModularBentoHero() { return (
{/* Asymmetrical Bento Grid Above the Fold */}
{/* Card 1 (Span 2 Cols, 2 Rows): Primary Value Proposition */}
Next-Gen AI IDE Engine

Architect, Code, & Verify at Quantum Velocity.

Empower your development team with autonomous swarm orchestration and zero-tolerance anti-slop verification.

Zero config required · MIT Licensed
{/* Card 2 (Span 2 Cols, 1 Row): Live Code Sandbox Card */}
main.rs Compiled in 42ms 
              {`#[derive(Debug, SwarmAgent)]
pub struct KernelRuntime {
    pub consensus: RaftConsensus,
    pub state_sync: ZeroKnowledgeState,
}`}
{/* Card 3 (Span 1 Col, 1 Row): High-Authority Stat */}
Autonomous Tasks
1.2M+

99.98% passing tests

Self-healed without developer intervention
{/* Card 4 (Span 1 Col, 1 Row): Rating & Social Badge */}
{[...Array(5)].map((_, i) => ( ))}

4.9 / 5.0

Top-rated on ProductHunt & GitHub

Loved by 15,000+ engineers →
); } ``` ##### Blueprint C: Centered Kinetic Typography with Overlapping Fold Peek (`OverlappingFoldPeekHero.tsx`) ```tsx import React from 'react'; import { ArrowRight, Sparkles } from 'lucide-react'; export function OverlappingFoldPeekHero() { return (
{/* Background Radial Glow */}
); } ``` ### Sovereign Execution, Token Efficiency & Invariants | Dimension | Sovereign Mandate & Deterministic Contract | | :--- | :--- | | **Frontier Model Cascade** | Medium / High (`Gemini 4 Argon`, `Claude Sonnet 5.5 High`, `Muse Wonder High`, `Composer 2.5 Fast`) | | **Availability Fallback** | `Gemini 4 Argon/Pro` -> `Gemini 3.8 Flash`; `Claude Opus 5.5` -> `Claude Opus 4.6` (Zero unhandled missing-model errors) | | **KV-Cache & Token Protocol** | Pin static instructions & schemas at prompt prefix (`kv-cache-prefix-optimizer`); pass surgical `CONTEXT_MAP.md` slices (<250 tokens/call) during Swarm Fan-Out | | **SaaT CLI & MCP Dispatch** | CLI: `vibes skill exec senior-frontend ` / MCP: `vibes_skill_dispatch`, `vibes_visual_audit`, `vibes_ast_query`, `vibes_verify_gate` | | **NFR & Anti-Slop Invariants** | LCP < 1.8s, INP < 100ms, CLS < 0.05, 1px crisp borders, 3-tier radius (6px/8px/12px), `tabular-nums`, 5-state interactive contract; 100% complete zero-placeholder output verified via `node scripts/check-anti-slop.js --strict` | --- --- ## 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 - `modern-web-guidance`: Untuk standar HTML5/CSS, API browser modern, dan pedoman aksesibilitas. - `design-system-architect`: Untuk membangun komponen UI yang kuat (Radix, Base UI, shadcn) dan design token. - `modern-css-native-expert`: Untuk CSS anchor positioning native, View Transitions, container queries, dan `@starting-style`. - `tailwind-expert`: Untuk styling dan konfigurasi @theme kustom. - `ui-ux-pro-max`: Untuk kecerdasan desain UI/UX, harmoni warna, dan pola layout lintas 11 stack. - `visual-ui-auditor`: Untuk inspeksi vision multimodal terhadap antarmuka yang dirender dan fidelitas tata letak. - `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. - `anti-slop`: Untuk penegakan implementasi komponen lengkap tanpa stub dan tanpa komentar narasi sintaksis. - **Sinergi Lintas Domain & Integrasi Swarm Subagent**: `vue-frontend-expert`, `svelte-sveltekit-expert`, `solidjs-expert`, `angular-expert`, `astro-framework-expert`, `htmx-hypermedia-expert`, `micro-frontend-architect`, `fullstack-expert`, `rich-text-editor-expert`, `ephemeral-generative-ui-architect` ### 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 ``. #### 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 `` 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 (`