Cursor rule

1---
2description: Tailwind CSS and UI component guidelines
3globs: "**/*.{ts,tsx,css}"
4---
5 
6# Tailwind & UI Rules
7 
8## Core Principles
9- Use mobile-first responsive design
10- Use Shadcn UI components from @chaingraph/ui
11- Follow design system tokens
12- Use lucide-react icons
13 
14## Component Patterns
15```tsx
16import { cn } from '@chaingraph/utils'
17import { cva } from 'class-variance-authority'
18 
19const buttonVariants = cva(
20  'rounded-md font-medium transition-colors',
21  {
22    variants: {
23      variant: {
24        default: 'bg-primary text-white hover:bg-primary/90',
25        secondary: 'bg-secondary text-white hover:bg-secondary/90'
26      }
27    },
28    defaultVariants: {
29      variant: 'default'
30    }
31  }
32)
33 
34function Button({ 
35  className, 
36  variant, 
37  ...props 
38}: ButtonProps) {
39  return (
40    <button 
41      className={cn(buttonVariants({ variant }), className)}
42      {...props}
43    />
44  )
45}
46```