Agent Skills: Frontend Design

Frontend Design

Build polished, native-feeling interfaces for Raamattu Nyt using shadcn/ui, Tailwind CSS, and React.

Tech Stack

• Components: shadcn/ui (Radix primitives)
• Styling: Tailwind CSS 3.4 with CSS variables
• Icons: Lucide React
• State: React Query + React Hook Form + Zod

Quick Patterns

Responsive Layout

// Mobile-first with desktop override
<div className="flex flex-col md:flex-row gap-4">
  <div className="w-full md:w-1/3">Sidebar</div>
  <div className="flex-1">Content</div>
</div>

Mobile Bottom Navigation

<nav className="fixed bottom-0 left-0 right-0 z-50 bg-background/95 backdrop-blur-md border-t md:hidden safe-area-bottom">
  <div className="flex items-center justify-around h-16">
    {/* 44px+ touch targets */}
  </div>
</nav>

Sheet for Mobile, Dialog for Desktop

const isMobile = useIsMobile();

return isMobile ? (
  <Sheet>
    <SheetContent side="bottom" className="h-[85vh]">
      {content}
    </SheetContent>
  </Sheet>
) : (
  <Dialog>
    <DialogContent className="max-w-lg">
      {content}
    </DialogContent>
  </Dialog>
);

Touch-Optimized Button

<Button
  className="h-12 px-6 active:scale-95 transition-transform"
  variant="default"
>
  Touch Me
</Button>

Mobile-Native Feel Checklist

• [ ] Bottom nav visible only on mobile (md:hidden)
• [ ] Touch targets min 44px (h-11/h-12)
• [ ] active:scale-95 on tappable elements
• [ ] Safe area padding (safe-area-bottom class)
• [ ] Backdrop blur on overlays (bg-background/95 backdrop-blur-md)
• [ ] Swipe gestures where appropriate
• [ ] No hover-only interactions on mobile

Design Tokens

/* Use semantic colors */
--background, --foreground
--primary, --primary-foreground
--muted, --muted-foreground
--destructive
--border, --ring

/* Border radius */
--radius: 0.5rem (8px)

When Building UI

1. Read image inputs - Analyze screenshots/mockups for layout and style
2. Mobile-first - Start with mobile, add md: breakpoint for desktop
3. Use shadcn - Import from @ui/ not raw Radix
4. Native feel - Add touch feedback, proper spacing, animations
5. Accessibility - ARIA labels, focus states, keyboard nav

References

• Component patterns: See references/components.md
• Mobile patterns: See references/mobile.md
• Forms & validation: See references/forms.md