Communitygithub.com

vercel-labs/shadcn

為 json-render 預先建置的 shadcn/ui 元件。適用於使用 @json-render/shadcn、將標準 UI 元件新增至目錄,或使用 Radix UI + Tailwind CSS 元件建置網頁 UI 時。

shadcn 是什麼?

此技能提供預先建置的 shadcn/ui 元件,專門設計用於與 json-render 整合。它能讓開發人員輕鬆地將標準 UI 元件(如按鈕、輸入框、對話框等)新增至目錄,從而加速開發流程。這個技能特別適合使用 Radix UI 和 Tailwind CSS 建置現代、可存取且可自訂的 Web UI 的專案。主要支援的平台包括基於 Vercel 的專案或任何使用 shadcn/ui 生態系的環境。其運作方式是利用 @json-render/shadcn 套件來動態渲染這些預先定義的元件,減少手動撰寫重複性程式碼的需求,並確保 UI 的一致性。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/vercel-labs/json-render/tree/main/skills/shadcn

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

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.

相關技能