# Jsx Md

> Write agent instructions, SKILL.md files, and LLM prompts as typed JSX/TSX components using @theseus.run/jsx-md. Use when creating or editing .tsx files that render Markdown strings via render(), authoring jsx-md components, or working with the jsx-md primitives, Context API, or XML intrinsics.

- **Type:** Skill
- **Install:** `agentstack add skill-theseus-run-theseus-jsx-md`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [theseus-run](https://agentstack.voostack.com/s/theseus-run)
- **Installs:** 0
- **Category:** [AI & ML](https://agentstack.voostack.com/c/ai-and-ml)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [theseus-run](https://github.com/theseus-run)
- **Source:** https://github.com/theseus-run/theseus/tree/master/packages/jsx-md/skills/jsx-md
- **Website:** https://www.theseus.run

## Install

```sh
agentstack add skill-theseus-run-theseus-jsx-md
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# @theseus.run/jsx-md

JSX runtime that outputs Markdown strings. No React, no virtual DOM. `render()` is synchronous and returns a plain string. Same input → same string every time.

## Setup

`tsconfig.json`:

```json
{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "@theseus.run/jsx-md"
  }
}
```

Import:

```ts
import { render, H1, H2, P, Ul, Li, Bold, Code } from "@theseus.run/jsx-md"
```

## Authoring rules

**1. Prefer components over inline markdown syntax.**

```tsx
// WRONG
**bold** and `code`

// CORRECT
bold and code
```

**2. Bare JSX text for plain prose. `{'...'}` only when the string contains a character JSX cannot represent as bare text.**

Characters requiring `{'...'}`: `` ` `` `{` `}` `` `'`

Characters safe as bare text: letters, spaces, digits, `. , : ; ! ? — – - ( ) [ ] " & * + = | / \`

```tsx
// WRONG — unnecessary wrapper
P1{': Guard clauses over nesting.'}

// CORRECT — bare text
P1: Guard clauses over nesting.

// CORRECT — must wrap, contains single quote
P1{": Dead code: delete, don't comment out."}

// CORRECT — must wrap, contains backtick
{'Format: `ROI≈X.X`'}
```

**3. `Md` is an escape hatch only.** Legitimate use: 4+ mixed inline spans where decomposition adds noise. Never use `Md` for content that decomposes cleanly into components.

```tsx
// Legitimate — 6 code spans mixed with bold
{'**P0**: Type = `TKey`. Not `TFuncKey`, `string`, or ``.'}

// Not legitimate — decompose instead
{'**P1**: Guard clauses over nesting.'}
// → P1: Guard clauses over nesting.
```

## Primitives

Full table with output shapes: [references/primitives.md](references/primitives.md).

| Category | Components |
|---|---|
| Block | `H1`–`H6`, `P`, `Hr`, `Codeblock`, `Blockquote` |
| List | `Ul`, `Ol`, `Li`, `TaskList`, `Task` |
| Table | `Table`, `Tr`, `Th`, `Td` |
| Inline | `Bold`, `Code`, `Italic`, `Strikethrough`, `Br`, `Sup`, `Sub`, `Kbd`, `Link`, `Img` |
| Escape | `Escape` (component), `escapeMarkdown` (function) |
| Raw | `Md` |
| Other | `HtmlComment`, `Details`, `Callout` |

Key props:

- `Codeblock` — `lang?: string`, `indent?: number`
- `Task` — `done?: boolean` (`- [x]` when true, `- [ ]` when false/omitted)
- `Th` — `align?: 'left' | 'center' | 'right'`
- `Callout` — `type: 'note' | 'tip' | 'important' | 'warning' | 'caution'` (required)
- `Details` — `summary: string` (required)
- `Link` — `href: string` (required)
- `Img` — `src: string`, `alt?: string`

Nesting: `Ul`/`Ol` inside `Li` is fully supported. `DepthContext` tracks depth and computes indentation automatically — never count spaces manually.

## Context API

Same shape as React — `createContext`, `useContext`, `Context.Provider`. Synchronous only. Not safe for concurrent `render()` calls in the same process.

```tsx
import { render, createContext, useContext, Ul, Li, Code } from "@theseus.run/jsx-md"

const HarnessCtx = createContext('copilot')

const StepsSection = () => {
  const harness = useContext(HarnessCtx)
  return (
    
      Always verify output before claiming done.
      {harness === 'opencode' && Use task() for multi-step subtasks.}
    
  )
}

const prompt = render(
  
    
  
)
```

`useContext` returns the default when called outside a Provider. Providers nest — innermost wins.

## XML intrinsics

Any lowercase JSX tag renders as an XML block. No imports, no registration. Use for Anthropic-style prompt structure (``, ``, ``).

```tsx
const ReviewerPrompt = ({ repo, examples }: Props) => (
  <>
    
      Repository: {repo}. Language: TypeScript.
    
    
      Role
      You are a precise code reviewer.
    
    {examples.length > 0 && (
      
        {examples.map((ex, i) => (
          
            {ex}
          
        ))}
      
    )}
  
)
```

Attribute serialization:

- `index={1}` → `index="1"`
- `active={true}` → `active` (bare attribute)
- `active={false}` / `active={null}` / `active={undefined}` → omitted
- Empty content → self-closing: ``
- Object value → throws — use `JSON.stringify()` to convert first

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [theseus-run](https://github.com/theseus-run)
- **Source:** [theseus-run/theseus](https://github.com/theseus-run/theseus)
- **License:** MIT
- **Homepage:** https://www.theseus.run

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-theseus-run-theseus-jsx-md
- Seller: https://agentstack.voostack.com/s/theseus-run
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.