1. Zero State → Empty with CTA
2. Skeleton Loading → Structured placeholders
3. Content Reveal → Staggered animations
4. Empty State → Actionable next steps
5. Error State → Clear recovery path
6. Success State → Brief celebration + next action

const Skeleton = ({ className = '', width = 'full', height = 'h-12' }) => (
  <div className={`
    ${width === 'full' ? 'w-full' : 'w-24'} ${height}
    bg-neutral-muted animate-pulse rounded-lg
    ${className}
  `} />
);

// Usage pattern
const LoadingCard = () => (
  <div className="space-y-4">
    <Skeleton height="h-6" width="w-3/4" />
    <Skeleton height="h-4" width="w-1/2" />
    <div className="flex gap-2">
      <Skeleton height="h-12" width="w-20" />
      <Skeleton height="h-12" width="w-20" />
    </div>
  </div>
);

// useFocusTrap.js
import { useEffect, useRef } from 'react';

export const useFocusTrap = (active = true) => {
  const ref = useRef();
  
  useEffect(() => {
    if (!active) return;
    
    const focusable = ref.current?.querySelectorAll(
      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
    );
    
    const first = focusable[0];
    const last = focusable[focusable.length - 1];
    
    const handleKeydown = (e) => {
      if (e.key === 'Tab') {
        if (e.shiftKey) {
          if (document.activeElement === first) {
            e.preventDefault();
            last.focus();
          }
        } else {
          if (document.activeElement === last) {
            e.preventDefault();
            first.focus();
          }
        }
      }
    };
    
    document.addEventListener('keydown', handleKeydown);
    first?.focus();
    
    return () => document.removeEventListener('keydown', handleKeydown);
  }, [active]);
};

// ARIA Live Region for dynamic content
const LiveRegion = ({ message, polite = true, assertLive = false }) => {
  const ref = useRef();
  
  useEffect(() => {
    if (message && ref.current) {
      ref.current.textContent = message;
      if (assertLive) ref.current.setAttribute('aria-live', 'assertive');
    }
  }, [message]);
  
  return (
    <div 
      ref={ref}
      role="status"
      aria-live={polite ? 'polite' : 'assertive'}
      aria-atomic="true"
      className="sr-only"
    />
  );
};

const FormField = ({ label, error, children }) => (
  <div className="space-y-1">
    <label className="text-sm font-medium text-neutral-dark">
      {label}
    </label>
    <div className="relative">
      {children}
    </div>
    {error && (
      <p className="text-xs text-danger mt-1 animate-in slide-in-from-top-2">
        {error}
      </p>
    )}
  </div>
);

.pressable {
  --press-scale: 0.96;
  transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1);
}

.pressable:active {
  transform: scale(var(--press-scale));
}

const OnboardingFlow = () => {
  const steps = [
    { title: 'Welcome', subtitle: 'Get started in 2 minutes' },
    { title: 'Connect', subtitle: 'Link your accounts' },
    { title: 'Customize', subtitle: 'Personalize your experience' },
    { title: 'Explore', subtitle: 'See what’s possible' },
    { title: 'Done!', subtitle: 'You’re all set ✨' }
  ];
  
  return (
    <div className="max-w-md mx-auto p-8">
      {/* Progress dots, step content, back/next CTAs */}
    </div>
  );
};