frontend-design

Spectaculous-Code's avatarfrom Spectaculous-Code

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.

⭐0stars🔀0forks📁View on GitHub🕐Updated Jan 10, 2026
[Code Generation]

When & Why to Use This Skill

This Claude skill enables the creation of high-quality, production-grade frontend interfaces using React, Tailwind CSS, and shadcn/ui. It focuses on generating polished, mobile-first web components and applications that deliver a native-like user experience while avoiding common AI-generated aesthetics through creative and professional-grade code patterns.

Use Cases

  • Rapidly prototyping responsive web applications with a mobile-first design strategy and Tailwind CSS breakpoints.
  • Building accessible and interactive UI components using shadcn/ui primitives and Radix UI for consistent design systems.
  • Implementing complex form logic and state management using React Hook Form, Zod validation, and React Query.
  • Transforming visual mockups into clean, production-ready code with optimized touch targets and smooth transitions for mobile devices.
namefrontend-design
descriptionCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.

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