Add `s-skeleton` loading component

[auswm85]

Problem

When content is loading, users need visual placeholders to indicate where content will appear. Skeleton screens improve perceived performance and reduce layout shift.

Proposed Solution

Add an s-skeleton component for loading placeholders:

<!-- Basic skeleton line -->
<div s-skeleton></div>

<!-- Skeleton with specific dimensions -->
<div s-skeleton style="width: 200px; height: 20px;"></div>

<!-- Circle (for avatars) -->
<div s-skeleton="circle" style="width: 48px; height: 48px;"></div>

<!-- Card skeleton -->
<div s-card>
  <div s-skeleton="circle" style="width: 48px; height: 48px;"></div>
  <div s-skeleton style="width: 60%; height: 1rem; margin-top: 1rem;"></div>
  <div s-skeleton style="width: 80%; height: 1rem; margin-top: 0.5rem;"></div>
  <div s-skeleton style="width: 40%; height: 1rem; margin-top: 0.5rem;"></div>
</div>

<!-- Text block helper -->
<div s-skeleton="text" data-lines="3"></div>

Features:

• Subtle shimmer animation (gradient moving left to right)
• Neutral background color from token palette
• border-radius matching design system
• Circle variant for avatar placeholders
• Respects prefers-reduced-motion
• Works in light and dark mode

Animation approach:

@keyframes s-skeleton-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

[s-skeleton] {
  background: linear-gradient(
    90deg,
    var(--s-neutral-200) 25%,
    var(--s-neutral-100) 50%,
    var(--s-neutral-200) 75%
  );
  background-size: 200% 100%;
  animation: s-skeleton-shimmer 1.5s infinite;
}

Alternatives Considered

• Static gray boxes (no motion feedback)
• Spinner only (doesn't show content structure)

Additional Context

Keep the animation subtle. Disable animation for prefers-reduced-motion: reduce.

Suggested location: packages/core/src/components/skeleton.css