Shadcn
This gives Claude the component catalog for json-render with shadcn/ui, a system for building UIs from JSON definitions. You get 36 pre-built components (cards, forms, dialogs, tables) based on Radix UI and Tailwind. The clever bit is two entry points: one for server-safe schemas, one for React implementations. You explicitly pick which components you need rather than importing everything, which keeps your catalog tight. Useful when you want Claude to generate or modify UIs declaratively without writing JSX directly, or when you're building tools where non-developers define interfaces through structured data.
- skills.sh installs
- 2.5K
- GitHub stars
- 19.5K
- last updated
- Aug 21, 2026
Install
$ npx -y skills add vercel-labs/json-render --skill shadcn --agent claude-codeInstalls into .claude/skills of the current project.
Files
This gives Claude the component catalog for json-render with shadcn/ui, a system for building UIs from JSON definitions. You get 36 pre-built components (cards, forms, dialogs, tables) based on Radix UI and Tailwind. The clever bit is two entry points: one for server-safe schemas, one for React implementations. You explicitly pick which components you need rather than importing everything, which keeps your catalog tight. Useful when you want Claude to generate or modify UIs declaratively without writing JSX directly, or when you're building tools where non-developers define interfaces through structured data.
Browse the repository on GitHubSponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/vercel-labs/json-render
- Categories
- Frontend Development, Cloud & Infrastructure
- First seen
- May 16, 2026
More from vercel-labs/json-render
All 31- React Three Fiber2.4K
- React Pdf2.4K
- Zustand1.9K
- Remotion1.8K
- Image1.6K
- Remotion Best Practices1.6K
- Vue1.4K
- React Email1.4K
- Skill Creator1.4K
- Ink1.3K
- Svelte1.2K
- Shadcn Svelte1.2K
- Redux1.1K
- Jotai1.1K
- Xstate1.1K
- Solid1.1K
- Yaml1.1K
- Json Render React391
- Json Render Core340
- Json Render Shadcn213
- Json Render Remotion153
- Json Render React Native142
- React18.5K
- Core17.2K
Recommended
More Frontend Development
frontend-designjwynia/agent-skillsCreate distinctive, production-grade frontend interfaces with high design quality. Provides analysis tools for auditing existing designs and generation tools fo2.3Kskills.sh installs
frontend-designvercel-labs/agent-evalCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, 2.2Kskills.sh installs
astro-frameworkdelineas/astro-framework-agentsAstro framework specialist for building fast, content-driven websites with islands architecture. Use when creating Astro components, configuring hydration (clie2.2Kskills.sh installs
nextjs-app-router-fundamentalswsimmonds/claude-nextjs-skillsGuide for working with Next.js App Router (Next.js 13+). Use when migrating from Pages Router to App Router, creating layouts, implementing routing, handling me2.2Kskills.sh installs
senior-frontenddavila7/claude-code-templatesComprehensive frontend development skill for building modern, performant web applications using ReactJS, NextJS, TypeScript, Tailwind CSS. Includes component sc2.1Kskills.sh installs
tailwind-best-practicesmastra-ai/mastraTailwind CSS styling guidelines for Mastra Playground UI. This skill should be used when writing, reviewing, or refactoring styling code in packages/playground-2Kskills.sh installs