json-render-core.mdПубличный

JSON Render Core

Сборка интерфейса из JSON через json-render

О скиле

С json-render можно описать экран в JSON и задать список компонентов, из которых он собирается. Скил подсказывает, как связать описание со знакомыми кнопками, карточками и таблицами. Для компонентов задаются поля и допустимые действия. Разработчик может собрать отчёт, где состав блоков приходит с сервера. Продакт может проверить несколько вариантов виджета на одном наборе компонентов. Для работы понадобятся JavaScript-проект и подходящий пакет отображения.

Об источнике

Автор скила — Vercel Labs. Распространяется под лицензией Apache-2.0. Открыть репозиторий.

Как установить

  1. В JavaScript или TypeScript проекте с актуальным Node.js LTS установите скил.
CLI
npx skills add vercel-labs/json-render --skill core
  1. Установите @json-render/core, zod и пакет отображения для своего проекта. Для React это @json-render/react. Сверьте версии пакетов между собой и используйте менеджер зависимостей проекта.

  2. Попросите агента описать два компонента с допустимыми полями и отобразить пример JSON из локального файла. Проверьте допустимую спецификацию и случай с неизвестным компонентом. Для действий, которые изменяют данные, отдельно добавьте проверку прав на сервере.

  3. Если нужна генерация через модель, подключите её отдельно. Локальный пример на готовом JSON можно проверить без ключа модели.

Пакеты и примеры json-render

Проверенный SKILL.md

Установка

Не уверены, куда положить .md-файл? как установить скилл в Claude Code — пошаговый гайд.

telegram

Разбираю скилы вроде этого и близкие по теме «Разработка»: где брать, как собирать и применять их на практике.

  • бесплатно
  • то, чем сам пользуюсь
  • новые скилы и разборы каждую неделю
Подписаться в Telegram
// продолжай по той же профессии или категории
// как применять скилы Claude Code на практике
Вся тема «Скилы, MCP и ИИ-агенты»: 74 гайдов
Непонятные термины? Загляни в «Понятия» — словарь ИИ

Частые вопросы

Что такое скил «JSON Render Core»?
«JSON Render Core» — готовый Agent Skill для Claude Code и Cursor. Это .md-файл с системным промптом, который подключается одним файлом и расширяет возможности AI-редактора в задачах Вайбкодинг. Категория инструмента: Разработка, Данные и ИИ. Чаще всего пригождается профессиям: Разработка и программирование, Продакт-менеджмент, Дизайн и UX/UI. Ключевые темы скила: type:skill, for:claude-code, for:react.
Как установить скил «JSON Render Core» в Claude Code?
Скачайте .md-файл скила «JSON Render Core» на этой странице и положите его в папку ~/.claude/skills/ вашего проекта. Перезапустите Claude Code — скил подхватится автоматически. Для Cursor и Windsurf скопируйте содержимое .md-файла в системный промпт проекта (Settings → Rules). Исходный код скила открыт в репозитории github.com/vercel-labs/json-render.
Бесплатен ли скил «JSON Render Core»?
Да, скил «JSON Render Core» доступен бесплатно для всех пользователей без регистрации — скачайте .md-файл прямо на этой странице. Автор скила — Vercel Labs, распространяется под лицензией Apache-2.0.

Больше вопросов про Agent Skills — общий FAQ маркетплейса