ui-components

marthaya-putra's avatarfrom marthaya-putra

React UI component specialist with Tailwind CSS and shadcn/ui for building responsive, accessible interfaces

⭐0stars🔀0forks📁View on GitHub🕐Updated Dec 30, 2025
[Code Generation]

When & Why to Use This Skill

This Claude skill acts as a specialized React UI architect, streamlining the development of modern web interfaces using Tailwind CSS and shadcn/ui. It focuses on generating accessible, responsive, and high-performance components while adhering to industry-standard styling patterns like glassmorphism and dark mode. By automating the boilerplate of UI development, it helps developers maintain a consistent design system and high code quality.

Use Cases

  • Rapid Prototyping: Quickly build functional and aesthetically pleasing UI elements like login forms, data tables, and navigation bars using shadcn/ui primitives.
  • Responsive Layout Design: Generate mobile-first React components that automatically adapt to different screen sizes using Tailwind's responsive utility classes.
  • UX Enhancement: Implement professional loading states with Skeleton components and smooth transitions to improve perceived performance and user experience.
  • Design System Alignment: Ensure consistent styling, naming conventions, and accessibility standards across a React codebase by following strict Tailwind and shadcn/ui guidelines.
nameui-components
descriptionReact UI component specialist with Tailwind CSS and shadcn/ui for building responsive, accessible interfaces

UI Components Specialist

Instructions

When building UI components:

  1. Component Creation

    • Use shadcn/ui components whenever available
    • Prefer @/components/ui/button over <button>
    • Use @/components/ui/input over <input>
    • Check available components before creating custom ones

  2. Styling Guidelines

    • Use Tailwind CSS classes only
    • Apply dark theme consistently
    • Use glassmorphism effects with backdrop-blur
    • Follow the kebab-case file naming convention

  3. Responsive Design

    • Mobile-first approach
    • Use Tailwind's responsive prefixes (sm:, md:, lg:)
    • Test on multiple screen sizes
    • Ensure touch-friendly interactions

  4. Performance & UX

    • Add loading states with Skeleton components
    • Implement error boundaries
    • Use lazy loading for heavy components
    • Add smooth transitions sparingly

Examples

Using shadcn/ui components:

import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'

function LoginForm() {
  return (
    <div className="space-y-4">
      <Label htmlFor="email">Email</Label>
      <Input id="email" type="email" />
      <Button type="submit">Submit</Button>
    </div>
  )
}

Creating a content card:

import { Badge } from '@/components/ui/badge'

function MovieCard({ movie }) {
  return (
    <div className="relative group cursor-pointer">
      <img
        src={movie.poster}
        alt={movie.title}
        className="w-full rounded-lg"
      />
      <div className="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity">
        <Badge className="absolute top-2 right-2">
          {movie.rating}
        </Badge>
      </div>
    </div>
  )
}

Adding loading state:

import { Skeleton } from '@/components/ui/skeleton'

function ContentRowSkeleton() {
  return (
    <div className="space-y-4">
      <Skeleton className="h-6 w-48" />
      <div className="flex gap-4 overflow-x-auto">
        {Array.from({ length: 6 }).map((_, i) => (
          <Skeleton key={i} className="h-64 w-48 flex-shrink-0" />
        ))}
      </div>
    </div>
  )
}