O que shadcn faz?
Componentes shadcn/ui pré-construídos para json-render. Use ao trabalhar com @json-render/shadcn, adicionar componentes de UI padrão a um catálogo ou construir interfaces web com componentes Radix UI + Tailwind CSS.
Componentes shadcn/ui pré-construídos para json-render. Use ao trabalhar com @json-render/shadcn, adicionar componentes de UI padrão a um catálogo ou construir interfaces web com componentes Radix UI + Tailwind CSS.
O skill vercel-labs/shadcn fornece um conjunto de componentes shadcn/ui pré-construídos, otimizados para integração com a biblioteca @json-render/shadcn. Este recurso é especialmente útil para desenvolvedores que desejam adicionar rapidamente componentes de interface padrão (como botões, modais, inputs) a um catálogo, sem precisar construí-los do zero. Ele é projetado para ambientes que utilizam Radix UI e Tailwind CSS, garantindo acessibilidade e estilização consistente. O skill também facilita a criação de interfaces web modernas, permitindo que agentes de IA combinem esses componentes de forma eficiente, reduzindo o tempo de desenvolvimento e mantendo a qualidade do código. Funciona de forma nativa em plataformas como Claude Code, Cursor e Codex, onde o agente pode invocar as instruções do SKILL.md para gerar ou modificar UIs baseadas em shadcn/ui.
npx skills add https://github.com/vercel-labs/json-render/tree/main/skills/shadcnComponentes shadcn/ui pré-construídos para json-render. Use ao trabalhar com @json-render/shadcn, adicionar componentes de UI padrão a um catálogo ou construir interfaces web com componentes Radix UI + Tailwind CSS.
This repo contains 7 individual skills — each has its own dedicated page.
Core package for defining schemas, catalogs, and AI prompt generation for json-render. Use when working with @json-render/core, defining schemas, creating catalogs, or building JSON specs for UI/video generation.
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.
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.
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.
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.
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.
Zustand adapter for json-render's StateStore interface. Use when integrating json-render with Zustand for state management via @json-render/zustand.
ElevenLabs text-to-speech with mac-style say UX.
Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.
Capture and automate macOS UI with the Peekaboo CLI.
Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".
Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.
Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".