Communitygithub.com

vercel-labs/shadcn

json-render용 사전 구축된 shadcn/ui 컴포넌트입니다. @json-render/shadcn 작업, 카탈로그에 표준 UI 컴포넌트 추가, 또는 Radix UI + Tailwind CSS 컴포넌트로 웹 UI 구축 시 사용하세요.

shadcn란 무엇인가요?

이 스킬은 `@json-render/shadcn` 패키지와 함께 사용하도록 설계된 사전 구축된 shadcn/ui 컴포넌트를 제공합니다. 개발자가 카탈로그에 표준 UI 컴포넌트를 추가하거나 Radix UI와 Tailwind CSS를 기반으로 웹 UI를 빠르게 구축할 수 있도록 지원합니다. 주로 Vercel 플랫폼과 shadcn/ui 생태계를 활용하는 프로젝트에서 유용하며, json-render 라이브러리의 데이터 기반 렌더링 기능과 결합하여 효율적인 UI 개발 워크플로우를 제공합니다. 이 스킬의 SKILL.md 문서에는 컴포넌트 사용법, 설치 방법, 그리고 주요 API에 대한 설명이 포함되어 있습니다.

지원 대상~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/vercel-labs/json-render/tree/main/skills/shadcn

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

문서

shadcn은(는) 무엇을 하나요?

json-render용 사전 구축된 shadcn/ui 컴포넌트입니다. @json-render/shadcn 작업, 카탈로그에 표준 UI 컴포넌트 추가, 또는 Radix UI + Tailwind CSS 컴포넌트로 웹 UI 구축 시 사용하세요.

Individual skills in this repo

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

vercel-labs/core

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.

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/zustand

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

관련 스킬