/typescript-dev

name: typescript-dev
description: Full-stack TypeScript with Vite 8, React 19, Tailwind v4, shadcn/ui, Biome, Vitest, and Hono 4. Use when setting up or working in a TypeScript project - components, styling, build and HMR, tests, lint/CI, or a Hono API with type-safe RPC.
metadata:
  version: "0.5.0"
  categories: "development"
  topics: "typescript, vite, react, tailwind, hono"
  openclaw:
    homepage: https://github.com/tenequm/skills/tree/main/skills/typescript-dev
    emoji: "🟦"
  upstream: "vite@8.3.6, @vitejs/plugin-react@6.2.1, @rolldown/plugin-babel@0.3.0, react@19.3.1, typescript@7.0.2, tailwindcss@4.3.4, @biomejs/biome@2.6.5, vitest@5.1.0, babel-plugin-react-compiler@1.0.0, class-variance-authority@0.7.1, hono@4.13.16, @hono/node-server@2.1.6, shadcn@4.23.0, cn@0.5.2"

TypeScript Frontend Development

One coherent stack for building type-safe TypeScript apps: **Vite 8** (build + dev server, Rolldown-powered), **React 19.3** with the React Compiler, **TypeScript 7.0** (strict, Go-native), **Tailwind CSS v4.3 + shadcn/ui** for styling, **Biome 2.6** for linting and formatting, **Vitest 5** for testing, and **Hono 4** for the backend/edge API. The pieces are designed to fit together - this skill covers how they wire up and the sharp edges that span more than one of them. Hono's RPC client (`hc`) shares server types directly with the React frontend, so the front and back end stay type-safe end to end without codegen.

The body below is the cross-cutting layer: the rules that bite when these tools meet, plus one working end-to-end setup. Each tool also has a deep-dive reference - read the one you need:

• **[references/vite.md](references/vite.md)** - Vite 8 config, dev server, proxy, HMR, Rolldown, code splitting, build optimization, deployment.
• **[references/react.md](references/react.md)** - React 19 patterns: Actions, `use()`, Activity, `<ViewTransition>`, Fragment refs, `useEffectEvent`, document metadata, and the React Compiler.
• **[references/typescript.md](references/typescript.md)** - Strict TypeScript 7.0 config and patterns: tsconfig defaults, the 6.0 compat path for API-consuming tools, generics, `import defer`.
• **[references/tailwind.md](references/tailwind.md)** - Tailwind CSS v4 CSS-first config, OKLCH theming, dark mode, v4.3 utilities.
• **[references/shadcn.md](references/shadcn.md)** - shadcn/ui CLI, component authoring with CVA + `data-slot`, the `cn` package, registries, Base UI / Radix / React Aria.
• **[references/biome.md](references/biome.md)** - Biome config, `biome check`, domains, type-aware linting, GritQL, ESLint/Prettier migration.
• **[references/vitest.md](references/vitest.md)** - Vitest 5 config, Testing Library, mocking, coverage, browser mode, projects, v4->v5 migration, test speed.
• **[references/hono.md](references/hono.md)** - Hono 4 web framework: routing, context, middleware, validation (Zod), end-to-end type-safe RPC, OpenAPI, helpers, and multi-runtime deployment (Workers/Node/Bun/Deno).

Version targets

| Tool | Version | Note | |------|---------|------| | Vite | 8.3.6 | Rolldown is the single default bundler | | @vitejs/plugin-react | 6.2.1 | v6 removed the inline `babel` option | | @rolldown/plugin-babel | 0.3.0 | runs the React Compiler for plugin-react v6 | | React / react-dom | 19.3.1 | React Compiler is stable (1.0); 19.3.1 patches a critical RSC RCE | | babel-plugin-react-compiler | 1.0.0 | pin with `--save-exact` | | TypeScript | 7.0.2 | Go-native, ~10x faster; ships no JS API (6.0 compat path in typescript.md) | | Tailwind CSS | 4.3.4 | CSS-first config, no JS config file | | shadcn/ui CLI | 4.23.0 | Base UI is the default base; `cn` is its own package | | Biome | 2.6.5 | single binary for lint + format + imports (2.6 adds Markdown, SCSS, YAML) | | Vitest | 5.1.0 | Vite-native test runner; reuses vite.config | | Hono | 4.13.16 | Web Standards backend/edge framework; v5 is a release candidate (`hono@next`) |

**Node.js 22.12+** is the effective floor for the stack: Vite alone accepts 20.19+, but Vitest 5, `@rolldown/plugin-babel`, and Hono v5 require 22.12+, and `cn` 0.5 requires 22+.

Cross-cutting critical rules

These are the rules that fail in confusing ways precisely because they sit at the seam between two tools. The single-tool details live in the references.

Vite plugin order: framework plugins first, `react()` last

When a framework plugin (TanStack Router/Start, etc.) generates routes or transforms code, it must run before `@vitejs/plugin-react` so React's Fast Refresh transform sees the final output. Wrong order causes route-generation failures and broken HMR.

plugins: [
  tanstackStart(),   // or tanstackRouter() for SPA - framework first
  tailwindcss(),
  react(),           // React plugin last among framework plugins
]

React Compiler replaces manual memoization - and changes how you wire Vite

React Compiler 1.0 auto-memoizes components, computations, and callbacks at build time. Write plain components; do not reach for `useMemo`/`useCallback`/`memo`. The catch lives at the Vite seam: **`@vitejs/plugin-react` v6 removed the inline `babel` option**, so the old `react({ babel: { plugins: [...] } })` wiring no longer works. The compiler now runs through a separate Babel plugin:

import react, { reactCompilerPreset } from '@vitejs/plugin-react'
import babel from '@rolldown/plugin-babel'

plugins: [react(), babel({ presets: [reactCompilerPreset()] })]

Install: `pnpm add -D @rolldown/plugin-babel @babel/core babel-plugin-react-compiler @types/babel__core`.

Leave `@rolldown/plugin-babel`'s new `parallel` option (0.3) off here: `reactCompilerPreset()` cannot be sent to a worker thread, so `babel({ parallel: true, presets: [reactCompilerPreset()] })` fails the build.

plugin-react 6.1+ also ships an **experimental** native (Rust) compiler path, `react({ compiler: true })`, that skips Babel entirely - see [react.md](references/react.md) for its install trap. The Babel