typescript-dev
TypeScript Frontend Development
One coherent stack for building type-safe TypeScript apps: Vite 8 (build + dev server, Rolldown-powered), React 19.2 with the React Compiler, TypeScript 6.0 (strict), Tailwind CSS v4.3 + shadcn/ui for styling, Biome 2.4 for linting and formatting, Vitest 4 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 - Vite 8 config, dev server, proxy, HMR, Rolldown, code splitting, build optimization, deployment.
- references/react.md - React 19 patterns: Actions,
use(), Activity,useEffectEvent, document metadata, and the React Compiler. - references/typescript.md - Strict TypeScript 6.0 config and patterns: tsconfig defaults, generics, utility types,
import defer, tsgo. - references/tailwind.md - Tailwind CSS v4 CSS-first config, OKLCH theming, dark mode, v4.3 utilities.
- references/shadcn.md - shadcn/ui CLI, component authoring with CVA +
data-slot, registries, Radix vs Base UI. - references/biome.md - Biome config,
biome check, domains, type-aware linting, GritQL, ESLint/Prettier migration. - references/vitest.md - Vitest config, Testing Library, jsdom/happy-dom, coverage, browser mode, projects.
- 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).