json-render-generative-ui — скилл для Claude Code: установка
Скилл учит нейросеть собирать интерфейсы через json-render: модель выдаёт строгий JSON-манифест, а приложение отрисовывает его в React, Vue или PDF.
npx skills add reason-machines/trending-skills --skill json-render-generative-ui -a claude-codeЧто делает json-render-generative-ui
Скилл задаёт правила для построения Generative UI на базе библиотеки json-render. Нейросеть не пишет произвольный JSX-код. Она возвращает плоский JSON со списком разрешённых элементов, их свойствами и связями.
Архитектура строится на связке каталога, реестра и рендерера. В каталоге разработчик описывает допустимые компоненты со схемами валидации Zod. Реестр связывает эти схемы с реальными компонентами интерфейса. Поддерживаются адаптеры под React, Vue, Svelte, Solid, React Native, Remotion для видео и react-pdf для отчётов.
Интерфейс не соберётся, если модель выдаст элемент, которого нет в реестре. Для работы в проекте нужны пакет @json-render/core и модуль рендерера под целевой фреймворк.
Какие задачи решает
- ограничить генерацию разметки строгой схемой компонентов
- отображать сгенерированные AI спецификации в React или Svelte
- рендерить динамические интерфейсы в формат PDF или видео
- обрабатывать клики и действия через систему actions
Примеры запросов агенту
- Создай каталог компонентов json-render с карточками и кнопками
- Настрой рендерер React для отображения элементов из JSON-спецификации
- Собери пайплайн генерации PDF-отчётов на базе json-render
Как установить json-render-generative-ui
1Через Skills CLI (Vercel)
npx skills add reason-machines/trending-skills --skill json-render-generative-ui -a claude-code2Вручную: положить файлы
~/.claude/skills/json-render-generative-ui/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/json-render-generative-ui/
1Через Skills CLI (Vercel)
npx skills add reason-machines/trending-skills --skill json-render-generative-ui -a codex2Вручную: положить файлы
.agents/skills/json-render-generative-ui/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add reason-machines/trending-skills --skill json-render-generative-ui -a cursor2Вручную: положить файлы
.cursor/skills/json-render-generative-ui/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install reason-machines/trending-skills json-render-generative-ui2Вручную: положить файлы
.github/skills/json-render-generative-ui/SKILL.md1Через Skills CLI (Vercel)
npx skills add reason-machines/trending-skills --skill json-render-generative-ui -a gemini-cli2Командой платформы
gemini skills install https://github.com/reason-machines/trending-skills --path skills/json-render-generative-uiВручную: положить файлы
.devin/skills/json-render-generative-ui/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add reason-machines/trending-skills --skill json-render-generative-ui -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о json-render-generative-ui
Как установить json-render-generative-ui в Claude Code?
Установите скилл командой npx skills add reason-machines/trending-skills --skill json-render-generative-ui -a claude-code.
Что делает json-render-generative-ui?
Обучает модель генерировать интерфейсы в виде структурированного JSON, который безопасно трансформируется в компоненты фронтенда.
Какие фреймворки поддерживает json-render?
Фреймворк работает с React, Vue, Svelte, Solid, React Native, а также поддерживает создание PDF, разметку писем и видео в Remotion.
