Browser

module-tsx

Try it

Use this skill whenever a user wants to run TypeScript, TSX, or React in the browser without a build step.

What it does

Use this skill whenever a user wants to run TypeScript, TSX, or React in the browser without a build step, or asks about module-tsx. Triggers on: "run TypeScript in the browser", "no build step", "inline TSX", "module-tsx", "script type module-tsx", "React without bundler", "write a page that uses React with TypeScript", "browser TypeScript", "build-free React", or any request to write an HTML page that imports or renders TypeScript/TSX code. Always use this skill when writing HTML that needs to execute TypeScript or JSX in the browser.

The skill document

module-tsx skill

module-tsx runs TypeScript and TSX directly in the browser — no build step, no bundler. It transpiles code on the fly and rewrites bare specifiers (like "react") to https://esm.sh/ automatically.

How to load it

Load this before any `


Or load an external file:

```html

React / TSX — zero config

Bare specifiers resolve to esm.sh automatically, so React just works with no import map needed. JSX without an explicit import React is fine too — it's auto-injected:

Example complete page

<!doctype html>

  
    
    My App

Import maps — only when you need them

An import map is optional. Use one only when you need to:

  • Pin a specific version (e.g. react@18 instead of latest)
  • Deduplicate peer dependencies across packages

The import map must be declared before the module-tsx script tag, because module-tsx reads it at startup:

Peer dependency deduplication

When a UI library (like @radix-ui/themes) depends on the same React as your app, both must resolve to the exact same URL or you get "Invalid hook call" crashes. Use ?deps= to tell the CDN which React to bundle against:

Relative imports

.ts and .tsx files can be imported relatively — fetched and transpiled on the fly:

import { Button } from "./components/Button.tsx";

CSS imports

import "./style.css"; // injects a  tag into 
import styles from "./button.module.css"; // returns { root: "abc123_root", ... }

Dev vs Production

Use the dev build during development for a rich error overlay (runtime errors, failed imports, source-mapped stack traces with code frames):

Use the production build for deployment (no error overlay, smaller footprint):

Common mistakes

  • defer attribute: not supported. Use async or no attribute.
  • Dual React: if a package depends on React as a peer, use ?deps=react@18 so it shares the same instance — otherwise you'll get hook errors.
  • Import map ordering: if you use an import map, it must come before the module-tsx `` tag.

Related skills

Make Html

Aggressively produce self-contained HTML artifacts instead of Markdown for substantial agent outputs. Use when the user asks for a doc, plan, spec, report, r...

7 installs

Writing Skills

Use when creating new skills, editing existing skills, or verifying skills work before deployment

1 installs

Write A Skill

Create new agent skills with proper structure, progressive disclosure, and bundled resources. Use when user wants to create, write, or build a new skill.

3 installs1 stars

Agent CLI Builder

Build or modernize TypeScript CLIs for AI agents with @renxqoo/agent-cli-sdk. Use when a user wants a new command-line tool, an API or internal service wrapped as a CLI, or an existing agent-cli-sdk app extended with authentication, structured output, typed errors, pagination, pipes, Skill distribut

1 installs

Skill Install Bridge

Generate install commands, README snippets, website cards, and social copy for published skills

11 installs

Skill开发

Generate Skill skeleton code, SKILL.md, and reference materials following best practices

2 installs