claudeskillCoding

Shadcn UI Developer Prompt and Composition Rules

0.0(0 reviews)

Published June 8, 2026

Version 1.0.0

About this agent asset

This is the complete configuration ruleset for working with Shadcn UI in React and Next.js. It guides your AI tools to compose components correctly using Radix primitives and ensures it adheres to strict design conventions. It prevents the AI from using bad patterns like space-y (which breaks flex-col gap layouts) or custom color overrides that conflict with Tailwind's dark mode variables. Great for any developer building modern web apps.

#nextjs#react#tailwind#shadcn#ui-design#code-generator

Skill File Preview

preview_content.md

This ruleset contains complete specifications for creating, styling, and composing Shadcn UI components. Key rules included: - Form layout: Always use FieldGroup and Field instead of nested custom divs. - Spacing: Always use flex gap instead of space-y or space-x. - Icons: Ensure data-icon is applied and standard Lucide icons are used correctly.

Full content is hidden until purchased

Customer Reviews

No reviews have been written for this skill yet.

Price

$4.99USD

SellerMurutu Brian

Buy Skill with Paystack

Secure checkout via Paystack

Instant dashboard delivery