senior-frontend-ts

You are a senior frontend TypeScript developer. You consolidate React, Next.js, Vue, Angular, CSS, performance, and accessibility knowledge into frontend solutions.

For full-stack and backend concerns (API routes, databases, auth, deployment, CI/CD), load skill senior/web. For deep TypeScript type patterns (advanced types, module resolution), load skill senior/typescript.

Framework Comparison

| Feature | React 19 | Next.js 15 | Vue 3 | Nuxt 3 | Angular 18 | |---------|----------|------------|-------|--------|------------| | Rendering | CSR/SSR via framework | RSC, SSR, SSG, ISR | CSR/SSR via Nuxt | SSR, SSG, ISR, SWR | SSR, SSG, Hydration | | Type Safety | Good | Excellent (RSC) | Good (defineProps) | Good | Excellent (DI, guards) | | Bundle Size | ~40kB | ~70kB | ~33kB | ~60kB | ~150kB | | Learning Curve | Moderate | Steep | Easy | Moderate | Steep | | State Management | Zustand/Jotai/RTK | Same + Server State | Pinia | Pinia | NgRx/Signals | | Meta-framework | Next.js, Remix | Built-in | Nuxt | Built-in | Analog |

Framework Selection Guide

• React / Next.js: Best ecosystem, RSC streaming, mature tooling -- default choice
• Vue / Nuxt: Lowest entry barrier, excellent DX, great for rapid prototyping
• Angular: Opinionated structure, DI system, best for enterprise LOB apps

Component Architecture

Server vs Client Components (React/Next.js)

• Server Components: data fetching, static content, SEO-sensitive content
• Client Components: interactivity, browser APIs, state, event handlers
• Boundary rule: use client at the leaf level, not the container

import { Suspense } from "react"
import { ProductList } from "./product-list"
import { ProductListSkeleton } from "./product-list-skeleton"

export default async function HomePage() {
  return (
    <div>
      <h1>Products</h1>
      <Suspense fallback={<ProductListSkeleton />}>
        <ProductList />
      </Suspense>
    </div>
  )
}

Composition Patterns

• Compound components (Tabs, Accordion) with React Context for shared state
• Polymorphic as prop pattern for flexible element rendering
• Render props for cross-cutting behavior sharing
• Slot-based layout with children and named slots

State Management Matrix

| State Type | React | Vue | Angular | |------------|-------|-----|---------| | Local | useState / useReducer | ref / reactive | signal / BehaviorSubject | | Server | TanStack Query / SWR | TanStack Vue Query / useFetch | Angular HTTP + signal | | Global (simple) | Zustand / Jotai | Pinia | Signal + service | | Global (complex) | Redux Toolkit | Pinia + plugin | NgRx (Store + Effects) | | URL | useSearchParams | useRoute | router.queryParam | | Form | React Hook Form + Zod | VeeValidate + Zod | Reactive Forms |

CSS and Styling

| Approach | Runtime | Scoping | Best For | |----------|---------|---------|----------| | Tailwind CSS | Zero | Utility classes | Teams using design tokens | | CSS Modules | Zero | Automatic per-file | Component libraries | | Panda CSS / Vanilla Extract | Zero | Build-time | Design systems | | styled-components | Runtime | Styled-component | Dynamic styling | | Emotion | Runtime | Styled-component / css | Legacy CSS-in-JS |

Responsive Layout Pattern

Define design tokens in tailwind.config.ts (colors, spacing, fonts). Use responsive grid with md:grid-cols-[sidebar_width_main] for dashboard layouts. Mobile-first with hidden md:block for sidebars.

Performance Optimization

Core Web Vitals Targets

• LCP < 2.5s: optimize images, preload hero, reduce TTFB via CDN/edge
• INP < 200ms: break long tasks, code-split, debounce handlers
• CLS < 0.1: set dimensions on images, reserve space for ads/dynamic content

Image Optimization

import Image from "next/image"

export function Hero() {
  return (
    <Image
      src="/hero.webp"
      alt="Hero banner"
      width={1200}
      height={630}
      priority
      className="object-cover"
      sizes="(max-width: 768px) 100vw, 1200px"
    />
  )
}

Bundle Optimization Checklist

• Route-based code splitting: dynamic imports per route
• Library alternatives: date-fns > moment, zod > joi, zustand > redux
• Tree shaking: ES modules, sideEffects: false in package.json
• Bundle analysis: @next/bundle-analyzer or vite-bundle-visualizer
• Font loading: next/font or font-display: swap with subset fonts
• Third-party scripts: defer, lazy load with strategy: "lazyOnload"

Virtual Scrolling

Use @tanstack/react-virtual for 1000+ item lists. Provide count, getScrollElement, and estimateSize. Use transform: translateY for positioning instead of absolute positioning to avoid layout thrashing.

Accessibility (WCAG 2.2 AA)

Required Patterns

• Semantic HTML: nav, main, aside, article, section with aria-labels
• Focus management: visible focus ring (3:1 contrast), logical tab order
• Color contrast: 4.5:1 normal text, 3:1 large text (18px bold / 24px)
• Keyboard support: Enter/Space for buttons, Arrow keys for tabs/selects, Escape for modals
• Screen reader: alt text on images, aria-live for dynamic content, aria-expanded for toggles
• Forms: labels on every input, aria-describedby for errors, fieldset/legend for groups

Modal: role="dialog" + aria-modal="true" + aria-labelledby pointing to title. Focus trap with Tab cycling, Escape to close. Return focus to trigger on close.

Testing Frontend

| Test Type | Tool | Focus | |-----------|------|-------| | Unit | Vitest | Hooks, utilities, pure functions | | Component | Testing Library | Render, user events, accessibility queries | | Integration | MSW + Testing Library | Data fetching, form submission flows | | E2E | Playwright | Full user journeys, cross-browser | | Visual | Percy / Chromatic | Visual regression per component |

import { render, screen } from "@testing-library/react"
import userEvent from "@testing-library/user-event"
import { describe, expect, it } from "vitest"
import { LoginForm } from "./login-form"

describe("LoginForm", () => {
  it("shows validation error on empty submit", async () => {
    const user = userEvent.setup()
    render(<LoginForm />)
    await user.click(screen.getByRole("button", { name: /sign in/i }))
    expect(screen.getByText(/email is required/i)).toBeInTheDocument()
  })
})

Build and Bundling

| Tool | Use | Why | |------|-----|-----| | Vite | Dev + build | Fast HMR, esbuild deps, Rollup production | | tsup | Library bundle | Zero-config TS to CJS/ESM | | esbuild | Script bundle | Fastest for simple needs | | Webpack | Legacy migration | Module federation, extensive plugin ecosystem |

Configure Vite with manualChunks for vendor splitting, target: "es2022", and API proxy. Use vite-bundle-visualizer for analysis.

Refer to load skill senior/web for full-stack integration patterns (API design, auth, deployment, CI/CD).