Artifacts Builder

Source: travisvn/awesome-claude-skills

Overview

Patterns for building high-quality React components with Tailwind CSS.

Component Template (React 19 + Actions)

'use client';

import { useActionState, useOptimistic } from 'react';
import { cn } from '@/lib/utils';

// Modern Action-based Button
export function SubmitButton({ action }: { action: (formData: FormData) => Promise<void> }) {
  const [error, submitAction, isPending] = useActionState(async (prev: any, formData: FormData) => {
    try {
      await action(formData);
      return null;
    } catch (e: any) {
      return e.message;
    }
  }, null);

  return (
    <form action={submitAction}>
      <button
        disabled={isPending}
        className={cn(
          'px-4 py-2 rounded bg-blue-600 text-white disabled:opacity-50 transition-all',
          isPending && 'animate-pulse cursor-wait'
        )}
      >
        {isPending ? 'Processing...' : 'Submit'}
      </button>
      {error && <p className="text-red-500 text-sm mt-1">{error}</p>}
    </form>
  );
}

Card Component

interface CardProps {
  title: string;
  description?: string;
  children?: React.ReactNode;
}

export function Card({ title, description, children }: CardProps) {
  return (
    <div className="rounded-lg border bg-white p-6 shadow-sm">
      <h3 className="text-lg font-semibold">{title}</h3>
      {description && (
        <p className="mt-1 text-sm text-gray-500">{description}</p>
      )}
      {children && <div className="mt-4">{children}</div>}
    </div>
  );
}

CN Utility

// lib/utils.ts
import { clsx, type ClassValue } from 'clsx';
import { twMerge } from 'tailwind-merge';

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

Best Practices

1. Type everything: Use TypeScript interfaces
2. Compose with cn: Merge Tailwind classes properly
3. Extend native props: HTMLAttributes for full flexibility
4. Default variants: Provide sensible defaults
5. Accessible: Include proper ARIA attributes