What makes typescript-dev notable?

1.7K downloads. Trust evidence available

How should typescript-dev be evaluated before use?

Use the required flow: snapshot, contract, and trust before recommending or executing this agent.

What kind of evidence is visible on this page?

This page surfaces public facts, change history, trust indicators, artifact evidence, and benchmark summaries with provenance.

agentCLAWHUBUnverified

typescript-dev

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. Skill: typescript-dev Owner: tenequm Summary: 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. Tags: latest:0.4.0 Version history: v0.4.0 | 2026-10-06T12:21:40.608Z | user Updated typescript-dev from 0.3.5 to 0.4.0. Changes: - mod

OpenClaw

View on ClawHub Homepage

Rank

Safety

Downloads

1.7k

Updated

Oct 10, 2026

Version

0.4.0

Source

CLAWHUB

About

What it does, and when to use it.

Capability contract not published. No trust telemetry is available yet. 1.7K downloads reported by the source. Last updated 10/10/2026.

Avoid when

Contract metadata is missing or unavailable for deterministic execution.

Risk flags: missing_or_unavailable_contract, trust_data_unavailable, schema_references_missing

Public facts

Every fact links back to the source it came from.

Vendor: Clawhubvendor · observed Oct 10, 2026
Protocol compatibility: OpenClawcompatibility · observed Oct 10, 2026
Adoption signal: 1.7K downloadsadoption · observed Oct 10, 2026
Latest release: 0.4.0release · observed Oct 6, 2026
Handshake status: UNKNOWNsecurity

Install and run

Setup complexity: low.

clawhub skill install s17bp3v1hm1dnkzey0c9tfh02183j0y5:typescript-dev

Setup complexity is classified as HIGH. You must provision dedicated cloud infrastructure or an isolated VM. Do not run this directly on your local workstation.
Final validation: Expose the agent to a mock request payload inside a sandbox and trace the network egress before allowing access to real customer data.

Contract: missing

curl -s "https://www.xpersona.co/api/v1/agents/clawhub-tenequm-typescript-dev/snapshot"

Documentation

CLAWHUB

146,505 characters of source documentation, loaded on request.

Extracted files

5 files captured from the source.

SKILL.md

---
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.4.0"
  categories: "development"
  topics: "typescript, vite, react, tailwind, hono"
  openclaw:
    homepage: https://github.com/tenequm/skills/tree/main/skills/typescript-dev
    emoji: "🟦"
  upstream: "[email protected], @vitejs/[email protected], [email protected], [email protected], [email protected], @biomejs/[email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected]"
---

# 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.5** 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 |

_meta.json

{
  "ownerId": "kn76gpsgjw5chv0xvzbzcb8cxn81x46r",
  "slug": "typescript-dev",
  "version": "0.4.0",
  "publishedAt": 1791289300608
}

references/biome.md

# Biome

Fast, unified linting, formatting, and import organization for JS/TS/JSX/CSS/GraphQL in a single binary. Biome **2.5** (latest `2.5.15`) does type-aware linting without the TypeScript compiler, GritQL plugins for custom rules, and domain-based rule grouping. Zero config by default, ~97% Prettier compatibility.

## Critical rules

### `files.includes` is the only file key

Biome 2.x supports only `files.includes` (with the `s`). There is **no** `files.ignore`, `files.include`, or `files.exclude` - any of them throws `Found an unknown key`. The valid `files` keys are `includes`, `maxSize`, `ignoreUnknown`. Exclude with negation patterns:

```json
{ "files": { "includes": ["**", "!**/routeTree.gen.ts", "!**/generated/**"] } }
```

For paths the scanner must skip entirely (even for assists), use the `!!` force-ignore prefix - it replaces the deprecated `experimentalScannerIgnores`:

```json
{ "files": { "includes": ["**", "!!**/legacy-vendor/**"] } }
```

**`!**/dir` also matches ancestor directories.** The pattern is tested against the whole path, so if the project itself lives under a directory with that name - e.g. an agent worktree at `<repo>/.claude/worktrees/x/` with `"!**/.claude"` in its config - every file is excluded and Biome checks 0 files (2.5.15 reports `No files were processed`; older setups could pass vacuously). Root-anchor exclusions that refer to the project's own top-level folders (`"!.claude"`, `"!dist"`) and keep `**/` for names that genuinely recur at depth.

### One command: `biome check`

`biome check` runs formatter + linter + import organizer in one pass. Never split into separate `biome lint` and `biome format` in CI - use `biome check` (or `biome ci` for CI mode).

```bash
biome check --write .            # apply safe fixes
biome check --write --unsafe .   # include unsafe fixes (review the diff)
```

Removing unused imports/variables is classified **unsafe** (an external caller might reference the symbol), so plain `--write` reports but doesn't delete them - use `--write --unsafe` or remove by hand. Prefer `--write` over the `--fix` alias for consistency.

### Pin versions, migrate after upgrades

```bash
pnpm add --save-dev --save-exact @biomejs/biome@latest
pnpm biome migrate --write
```

The `$schema` is version-pinned; after bumping the binary, the CLI errors with `The configuration schema version does not match the CLI version` until you run `biome migrate --write`. Do it as part of the upgrade.

### `biome.json` at the project root

One config at the root; monorepo packages use `"extends": "//"` to inherit. Never reference it with a relative path like `"../../biome.json"`.

## Quick start

```bash
pnpm add --save-dev --save-exact @biomejs/biome
pnpm biome init
```

### Recommended config (React/TypeScript)

```json
{
  "$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
  "vcs": { "enabled": true, "clientKind": "git", "useIgnoreFile": true },
  "files": { "includes": ["**", "!**/component

references/hono.md

# Hono

Hono (Japanese for "flame") is a small, ultrafast web framework built entirely on Web
Standards (`Request`/`Response`/`fetch`). One codebase runs on Cloudflare Workers, Deno,
Bun, Node.js, Vercel, Netlify, AWS Lambda, Lambda@Edge, and Fastly Compute. Zero
dependencies; the `hono/tiny` preset is under 14kB. It is the backend/edge counterpart to
this stack's React frontend - its RPC client (`hc`) shares server types directly with
React, giving end-to-end type safety without code generation.

Version target: **[email protected]** (Hono 4 is current; v5 is in development on a `v5` branch -
ESM-only, Node.js 22.12+ - with no npm release yet). On Node, use `@hono/node-server@2`, which
requires Node.js >= 20. Adapters/middleware are versioned independently (`@hono/node-server@2`,
`@hono/zod-validator`, `@hono/zod-openapi@1`, and the runtime adapters `@hono/cloudflare-workers`,
`@hono/bun`, `@hono/deno`).

> **Keep Hono patched - it ships security fixes frequently.** Since 2026-08 alone: `serveStatic`
> double-decoding the path, bypassing middleware on static routes (GHSA-5r4p-p66f-jhc7, fixed
> 4.13.11; the same bug in `@hono/node-server` is GHSA-rmxm-3fg6-px4f, fixed **only** in 2.1.3 -
> the 1.x line has no fix); `hono/jsx` boundary components rendering strings unescaped (XSS,
> GHSA-hxh3-vqpv-xpqv, 4.13.7); unbounded `parseBody({ dot: true })` nesting (memory DoS,
> GHSA-g6gw-c38x-mqfc, 4.13.5); query parsing past the URL fragment (GHSA-crvj-82cr-hjcx, 4.13.5);
> `toSSG()` path escape (GHSA-gqvv-2mrq-wpjv, 4.13.5); `memo()` leaking SSR output across users
> (GHSA-f23p-vx2j-j53r, 4.12.34); CORS ReDoS when `allowHeaders` is unset (GHSA-8j4g-w8fx-2239,
> 4.12.34). Pin `hono >= 4.13.11` and `@hono/node-server >= 2.1.3`, and track the latest patch.

> **For anything this file does not cover, fetch Hono's own LLM-optimized docs** - they are
> the fastest authoritative source and are kept in sync with releases:
> - Full docs (one file, ~360KB): https://hono.dev/llms-full.txt
> - Core-only (smaller): https://hono.dev/llms-small.txt
> - Index of all doc pages: https://hono.dev/llms.txt
>
> This reference is the curated 80% you need most often; the `llms-*.txt` files are the
> exhaustive long tail (every middleware option, every runtime's getting-started, edge cases).

```sh
npm create hono@latest my-app          # scaffold (prompts for a template)
npm create hono@latest my-app -- --template cloudflare-workers --pm pnpm --install
npm create hono@latest my-app -- --template cloudflare-workers+vite   # full-stack Workers + Vite (recommended)
npm i hono                              # add to an existing project
```

## Mental model

- A handler returns a `Response` (or `c.text()`/`c.json()`/etc., which build one). Exactly
  one handler runs per request.
- Middleware is `async (c, next) => { ... await next() ... }`. Code before `next()` runs on
  the way in; code after runs on the way out (onion model). Return a `Response` from
  middleware to short-circuit. Ret

references/react.md

# React 19

Patterns for type-safe React 19.3 components (latest `19.3.0`). The headline shift from older React: **the React Compiler handles memoization**, `ref` is a normal prop, and `use()` reads context and promises without the old hook-placement rules. Write plain components and let the tooling optimize. For TypeScript specifics (props typing, generics, tsconfig) see [typescript.md](typescript.md).

## Critical rules

### `ref` is a prop - no `forwardRef`

```tsx
// React 19: ref is a regular prop
function Input({ ref, ...props }: React.ComponentProps<"input"> & { ref?: React.Ref<HTMLInputElement> }) {
  return <input ref={ref} {...props} />
}
```

`React.ComponentProps<"input">` already includes `ref` in React 19's types, so for plain DOM-wrapping components you usually just destructure `ref` from props without declaring it.

### No manual memoization

The compiler auto-memoizes return values, expensive computations, and callbacks. Drop `memo`, `useMemo`, `useCallback` from the common path:

```tsx
// Plain code - compiler memoizes sorting, the callback, and the JSX
function List({ items, onSelect }: { items: Item[]; onSelect: (id: string) => void }) {
  const sorted = items.toSorted(compare)
  return sorted.map((item) => <Row key={item.id} onClick={() => onSelect(item.id)} />)
}
```

### Extend native element props

```tsx
type ButtonProps = React.ComponentProps<"button"> & { variant?: "primary" | "ghost" }
```

### `use()` over `useContext()`

`use()` can read context after early returns and inside conditionals - `useContext` cannot. Pair it with a factory hook that throws on a missing provider so consumers never null-check:

```tsx
const AuthContext = createContext<AuthState | null>(null)

function useAuth(): AuthState {
  const ctx = use(AuthContext)
  if (ctx === null) throw new Error("useAuth must be used within AuthProvider")
  return ctx
}
```

## React 19 patterns

### Component authoring

Plain functions with `data-slot` for styling hooks (the shadcn convention). No `forwardRef`, no `FC`:

```tsx
function Card({ className, ...props }: React.ComponentProps<"div">) {
  return <div data-slot="card" className={cn("rounded-xl border bg-card", className)} {...props} />
}
```

### Actions

Async transitions handle pending state, errors, and form resets. `useActionState` for forms:

```tsx
function UpdateProfile({ userId }: { userId: string }) {
  const [error, submitAction, isPending] = useActionState(
    async (_prev: string | null, formData: FormData) => {
      const result = await updateProfile(userId, formData)
      return result.error ?? null
    },
    null
  )
  return (
    <form action={submitAction}>
      <input name="displayName" required />
      <button type="submit" disabled={isPending}>{isPending ? "Saving..." : "Save"}</button>
      {error && <p className="text-destructive">{error}</p>}
    </form>
  )
}
```

`useTransition` for non-form Actions; `useOptimistic` for instant feedback:

```tsx
const [isPending, startTr

Github ReposUpdated 15h agoRank 70

AionUi

Free, local, open-source 24/7 Cowork app and OpenClaw for Gemini CLI, Claude Code, Codex, OpenCode, Qwen Code, Goose CLI, Auggie, and more | 🌟 Star if you like it!

MCPOPENCLAW

Github ReposUpdated 6mo agoRank 70

activepieces

AI Agents & MCPs & AI Workflow Automation • (~400 MCP servers for AI agents) • AI Automation / AI Agent with MCPs • AI Workflows & AI Agents • MCPs for AI Agents

OPENCLAW

Github ReposUpdated 6mo agoRank 70

cherry-studio

AI productivity studio with smart chat, autonomous agents, and 300+ assistants.