What problem does it solve? Building UI in this project often leads to inconsistent patterns: developers re-create existing components, hardcode colors, or misuse form libraries. This Skill ensures every form, dialog, table, and layout follows the project's established Radix UI + shadcn + Tailwind CSS component system. ## Core Features & Use Cases - Component Library Reference: Documents all atomic components in src/components/ui/ (Button, Dialog, Form, DataTable, Select, Tabs, etc.) with correct import paths and usage patterns. - Form Patterns: Provides the canonical react-hook-form + Zod + shadcn Form integration pattern, including mutation handling with loading states. - Enforced Rules: Mandates cn() from @/lib/utils for class merging, Tailwind design tokens instead of hardcoded colors, and FormField/FormControl instead of raw inputs. - Use Case: When asked to add a "Create Printer" dialog with a validated form, the Skill guides you to compose Dialog, Form, Input, and Button from the existing UI library with proper loading states and Zod validation. ## Quick Start Build a new dialog containing a validated form for creating a printer using the project's existing UI component library.
