website refactor

apps/website/ui/Skeleton.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Box } from './primitives/Box';
 
 interface SkeletonProps {
   width?: string | number;
@@ -8,17 +9,13 @@ interface SkeletonProps {
 }
 
 export function Skeleton({ width, height, circle, className = '' }: SkeletonProps) {
-  const style: React.CSSProperties = {
-    width: width,
-    height: height,
-    borderRadius: circle ? '9999px' : '0.375rem',
-    backgroundColor: 'rgba(38, 38, 38, 0.4)',
-  };
-
   return (
-    <div 
+    <Box 
+      w={width}
+      h={height}
+      rounded={circle ? 'full' : 'md'}
+      bg="bg-white/5"
       className={`animate-pulse ${className}`} 
-      style={style}
       role="status"
       aria-label="Loading..."
     />