Communitygithub.com

vercel-labs/core

Pacote principal para definir esquemas, catálogos e geração de prompts de IA para json-render. Use ao trabalhar com @json-render/core, definir esquemas, criar catálogos ou construir especificações JSON para geração de UI/vídeo.

O que é core?

O vercel-labs/core é o pacote fundamental do ecossistema json-render, responsável por fornecer as primitivas essenciais para definição de esquemas, organização de catálogos e geração automática de prompts para modelos de IA. Este pacote é indispensável para desenvolvedores que precisam estruturar dados de forma consistente, criando especificações JSON que podem ser usadas para renderizar interfaces de usuário ou gerar conteúdo de vídeo de maneira programática. Suporta plataformas como Claude Code, Cursor e Codex, oferecendo uma API robusta para descrever componentes, propriedades e relações entre elementos visuais. Ao utilizar schemas tipados e catálogos reutilizáveis, o vercel-labs/core simplifica a comunicação entre sistemas de IA e motores de renderização, garantindo que as instruções geradas sejam precisas e aderentes aos formatos esperados. É especialmente útil em fluxos de trabalho que envolvem automação de design, geração de interfaces dinâmicas ou produção de vídeos baseados em dados estruturados.

Funciona com~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/vercel-labs/json-render/tree/main/skills/core

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

Documentação

O que core faz?

Pacote principal para definir esquemas, catálogos e geração de prompts de IA para json-render. Use ao trabalhar com @json-render/core, definir esquemas, criar catálogos ou construir especificações JSON para geração de UI/vídeo.

Visão Geral

Este pacote fornece as ferramentas fundamentais para trabalhar com o ecossistema json-render, permitindo que você:

  • Defina esquemas tipados para componentes e propriedades
  • Crie catálogos reutilizáveis de elementos visuais
  • Gere prompts otimizados para modelos de IA
  • Construa especificações JSON estruturadas para renderização

Instalação

npm install vercel-labs/core @json-render/core

Uso Básico

import { defineSchema, createCatalog } from 'vercel-labs/core';
import { render } from '@json-render/core';

// Definir um esquema para um componente de botão
const buttonSchema = defineSchema({
  type: 'object',
  properties: {
    label: { type: 'string' },
    variant: { type: 'string', enum: ['primary', 'secondary'] },
    disabled: { type: 'boolean' }
  },
  required: ['label']
});

// Criar um catálogo de componentes
const uiCatalog = createCatalog('UI Components', {
  button: buttonSchema,
  card: { /* ... */ },
  input: { /* ... */ }
});

// Gerar prompt para IA
const prompt = uiCatalog.generatePrompt('Crie uma página de login com botão e campos de entrada');

API

defineSchema(config)

Define um esquema JSON com tipagem completa.

createCatalog(name, schemas)

Cria um catálogo nomeado contendo múltiplos esquemas.

generatePrompt(description)

Gera um prompt estruturado para modelos de IA baseado em um catálogo e descrição.

Exemplos

Consulte o diretório examples/ para exemplos completos de uso com diferentes plataformas.

Licença

MIT

Individual skills in this repo

This repo contains 7 individual skills — each has its own dedicated page.

vercel-labs/react

React renderer for json-render that turns JSON specs into React components. Use when working with @json-render/react, building React UIs from JSON, creating component catalogs, or rendering AI-generated specs.

vercel-labs/react-native

React Native renderer for json-render that turns JSON specs into native mobile UIs. Use when working with @json-render/react-native, building React Native UIs from JSON, creating mobile component catalogs, or rendering AI-generated specs on mobile.

vercel-labs/react-pdf

React PDF renderer for json-render. Use when generating PDF documents from JSON specs, working with @json-render/react-pdf, or rendering specs to PDF buffers/streams/files.

vercel-labs/react-three-fiber

React Three Fiber 3D renderer for json-render. Use when working with @json-render/react-three-fiber, building 3D scenes from JSON specs, rendering meshes/lights/models/environments, or integrating Three.js with json-render catalogs.

vercel-labs/remotion

Remotion renderer for json-render that turns JSON timeline specs into videos. Use when working with @json-render/remotion, building video compositions from JSON, creating video catalogs, or rendering AI-generated video timelines.

vercel-labs/shadcn

Pre-built shadcn/ui components for json-render. Use when working with @json-render/shadcn, adding standard UI components to a catalog, or building web UIs with Radix UI + Tailwind CSS components.

vercel-labs/zustand

Zustand adapter for json-render's StateStore interface. Use when integrating json-render with Zustand for state management via @json-render/zustand.

Habilidades Relacionadas