# hono-jsx

Скилл для серверного рендеринга HTML на Hono JSX: асинхронные компоненты, Suspense и стриминг ответов. Пригодится, когда нужны SSR-страницы или шаблоны писем без клиентской гидратации.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 338 установок · ★ 78
- Автор: bobmatnyc
- Лицензия: MIT · policy=mirror · начало файла — в конце страницы
- Исходник: https://github.com/bobmatnyc/claude-mpm-skills/tree/HEAD/toolchains/javascript/frameworks/hono/hono-jsx/SKILL.md
- Обновлён: 2026-07-18
- HTML: https://affpapa.org/nevibecode/skills/hono-jsx

## Что делает

Скилл описывает, как Hono рендерит HTML на сервере через встроенный JSX-рендерер. Внутри — шаблоны компонентов, асинхронные компоненты, стриминг с `Suspense`, границы ошибок и Context API. Клиентской гидратации нет: страница приходит готовой разметкой.

Настройка начинается с `tsconfig.json`: `"jsx": "react-jsx"` и `"jsxImportSource": "hono/jsx"`. Для Deno то же самое, но источник — `npm:hono/jsx`. Есть и вариант с прагма-комментариями `/** @jsx jsx */` в начале файла. Рендер идёт через `c.html()`, стриминг — через `renderToReadableStream` из `hono/jsx/streaming`.

Скилл не для интерактивных SPA — для них авторы советуют React, Vue или Svelte. Если у вас одностраничное приложение с активным состоянием на клиенте, здесь брать нечего.

## Установка

### Claude Code (родная платформа)

1. **Через Skills CLI (Vercel)**
```bash
npx skills add bobmatnyc/claude-mpm-skills --skill hono-jsx -a claude-code
```

2. **Вручную: положить файлы**
- Файл: `~/.claude/skills/hono-jsx/SKILL.md` — Папка скилла целиком; для одного проекта — .claude/skills/hono-jsx/

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add bobmatnyc/claude-mpm-skills --skill hono-jsx -a codex
```

2. **Вручную: положить файлы**
- Файл: `.agents/skills/hono-jsx/SKILL.md` — Для всех проектов — ~/.agents/skills/

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add bobmatnyc/claude-mpm-skills --skill hono-jsx -a cursor
```

2. **Вручную: положить файлы**
- Файл: `.cursor/skills/hono-jsx/SKILL.md` — Cursor читает и .agents/skills/, и .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install bobmatnyc/claude-mpm-skills hono-jsx
```

2. **Вручную: положить файлы**
- Файл: `.github/skills/hono-jsx/SKILL.md`

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add bobmatnyc/claude-mpm-skills --skill hono-jsx -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/bobmatnyc/claude-mpm-skills --path toolchains/javascript/frameworks/hono/hono-jsx
```

### Windsurf (Devin Desktop)

**Вручную: положить файлы**
- Файл: `.devin/skills/hono-jsx/SKILL.md` — Старый путь .windsurf/skills/ тоже читается

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add bobmatnyc/claude-mpm-skills --skill hono-jsx -a opencode
```

### Claude.ai

**Claude.ai**
- Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/bobmatnyc/claude-mpm-skills/tree/HEAD/toolchains/javascript/frameworks/hono/hono-jsx/SKILL.md

## Когда брать
- отдать готовый HTML с сервера без клиентской гидратации
- собрать страницу из асинхронных компонентов с данными из базы
- стримить длинный ответ и показать заглушку до загрузки
- поймать ошибку в компоненте и показать запасной вариант
- сделать общий макет с шапкой и подвалом для нескольких страниц

## Примеры запросов агенту
- Настрой `tsconfig.json` для Hono JSX и сделай компонент `Layout` с заголовком и дочерними элементами
- Оберни медленный компонент в `Suspense` с заглушкой и отдай страницу через `renderToReadableStream`
- Добавь `ErrorBoundary` вокруг компонента, который может упасть при загрузке данных

## Похожие
- [frontend-design](https://affpapa.org/nevibecode/skills/frontend-design.md) — скилл · 1025790 установок
- [design-taste-frontend](https://affpapa.org/nevibecode/skills/design-taste-frontend.md) — скилл · 678700 установок
- [prototype](https://affpapa.org/nevibecode/skills/prototype.md) — скилл · 986201 установка
- [hyperframes](https://affpapa.org/nevibecode/skills/heygen-com-hyperframes.md) — скилл · 1200000 установок
- [hyperframes-cli](https://affpapa.org/nevibecode/skills/heygen-com-hyperframes-cli.md) — скилл · 1300000 установок
- [webapp-testing](https://affpapa.org/nevibecode/skills/webapp-testing.md) — скилл · 186758 установок

## Другие версии с тем же именем
- [hono-jsx · honojs](https://affpapa.org/nevibecode/skills/honojs-hono-jsx.md) — 337 установок

Из того же набора: [bobmatnyc/claude-mpm-skills](https://affpapa.org/nevibecode/by/bobmatnyc/claude-mpm-skills.md) — 125 карточек

_Часть страницы не вошла по размеру — она есть в HTML-версии._

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md