skills.rest
gengirish
gengirishCOMMUNITY
Explore all skills by this author →
GitHub

shadcn-tailwind-ui

Implements shadcn/ui and Tailwind CSS component patterns for the DropFlow dashboard frontend.

Updated Mar 31, 2026
Search Tags:#next.js#zod#dashboard#tailwind css#ui components#react hook form#shadcn
One-click install
npx skills add https://github.com/gengirish/dropflow --skill shadcn-tailwind-ui-gengirish
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn-tailwind-ui
Source: https://github.com/gengirish/dropflow/tree/main/.cursor/skills/shadcn-tailwind-ui
Command: npx skills add https://github.com/gengirish/dropflow --skill shadcn-tailwind-ui-gengirish

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building consistent dashboard UI in apps/web/ requires repeated decisions about form handling, currency formatting, status badges, and detail views. This Skill provides ready-made shadcn/ui and Tailwind CSS patterns so every component follows the same DropFlow conventions. ## Core Features & Use Cases - Form Pattern: React Hook Form with Zod resolvers wired to shadcn Form, Input, and Button components using shared @dropflow/types schemas. - Domain Components: MoneyDisplay with Indian lakh formatting in INR, OrderStatusBadge with variant mapping, and Sheet-based order detail views. - Localization & Conventions: IST date formatting via date-fns-tz, Tailwind theme colors only, dark mode variants, and mobile-first responsive breakpoints. - Use Case: When adding a new product creation page, generate a validated form with Zod schemas, INR money display, and consistent spacing without re-deriving the patterns. ## Quick Start Use the shadcn-tailwind-ui skill to create a product creation form with validation and INR price display in apps/web.

Frequently Asked Questions about shadcn-tailwind-ui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a form with shadcn/ui and React Hook Form?▼

Use useForm with zodResolver bound to a shared schema, then wrap fields in Form, FormField, FormItem, FormLabel, FormControl, and FormMessage components. Disable the submit Button via form.formState.isSubmitting.

How to add new shadcn/ui components to a Next.js app?▼

Run npx shadcn@latest add followed by component names from the apps/web directory, for example button card dialog form input select sheet table toast. Generated components land in components/ui.

How do I format currency in Indian lakh format with React?▼

Use Intl.NumberFormat with the en-IN locale and INR currency, dividing paise by 100 before formatting. Render it in a span with font-mono and tabular-nums classes for aligned numeric display.

Does this pattern support dark mode and responsive layouts?▼

Yes, all styling uses Tailwind theme colors with dark: variant classes for dark mode and mobile-first sm:, md:, lg: breakpoints for responsiveness. Hardcoded hex values are not allowed.

When should I use a Sheet versus a Dialog for detail views?▼

Use a Sheet for wider detail panels like order details, configured with a fixed width such as w-[600px]. Dialogs suit shorter confirmations, while Sheets slide in for richer side-panel content.

Related Skills

Explore More Software Engineering Skills→
selrai-companyselrai-company

shadcn-ui

Implement accessible shadcn/ui components in Next.js TypeScript projects.

Official
Advanced
Venture-FormationsVenture-Formations
1

supabase-database-ops

Enforce publication_id filtering on tenant-scoped Supabase tables.

Official
Advanced
charlesjones-devcharlesjones-dev
34

accessibility-auditing

Audit codebases and live sites for WCAG 2.1/2.2 compliance gaps.

Community
Advanced
KumarAdi8KumarAdi8

ui-styling

Build accessible, responsive UIs with shadcn/ui and Tailwind CSS for React projects.

Community
Advanced