浏览器

module-tsx

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

它能做什么

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.

技能文档

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.

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 次安装

Writing Skills

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

1 次安装

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 次安装1 星标

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