Communitygithub.com

vercel-labs/shadcn

用于 json-render 的预构建 shadcn/ui 组件。当处理 @json-render/shadcn、向目录添加标准 UI 组件,或使用 Radix UI + Tailwind CSS 组件构建 Web UI 时使用。

shadcn 是什么?

该技能提供了针对 json-render 框架优化的预构建 shadcn/ui 组件集合。它主要用于简化在开发者工具或目录系统中集成标准 UI 组件的过程,特别适合那些使用 Radix UI 和 Tailwind CSS 构建 Web 界面的项目。该技能基于 @json-render/shadcn 包,通过高效渲染 JSON 数据结构来加速 UI 开发。它支持常见 UI 组件(如按钮、表单、模态框等)的快速集成,并且与 Radix UI 的无障碍性和 Tailwind CSS 的灵活性兼容。主要目标用户是使用 Vercel、Next.js、React 等技术栈的开发者,希望以声明式方式构建一致且可定制的用户界面。该技能本身不包含特定平台限制,但推荐与 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 组件构建 Web 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.

相关技能