ui: centralize skeleton primitives

frontend/src/components/ui/DesignSystemStyles.astro

@@ -289,6 +289,47 @@
     flex: 1;
   }
 
+  .list-skeleton {
+    display: grid;
+    gap: 1rem;
+  }
+
+  .skeleton-card {
+    height: var(--ui-skeleton-card-h, 120px);
+    border-radius: 14px;
+    border: 1px solid var(--color-border);
+    background: linear-gradient(
+      90deg,
+      rgba(255, 255, 255, 0.03) 0%,
+      rgba(255, 255, 255, 0.06) 50%,
+      rgba(255, 255, 255, 0.03) 100%
+    );
+    background-size: 200% 100%;
+    animation: ui-shimmer 1.2s ease-in-out infinite;
+  }
+
+  .is-skeleton {
+    border-color: rgba(255, 255, 255, 0.08);
+    box-shadow: none;
+  }
+
+  .skel {
+    border-radius: 10px;
+    background: linear-gradient(90deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.09) 35%, rgba(255,255,255,0.05) 70%);
+    background-size: 200% 100%;
+    animation: ui-shimmer-reverse 1.1s ease-in-out infinite;
+  }
+
+  @keyframes ui-shimmer {
+    0% { background-position: 0% 0%; }
+    100% { background-position: 200% 0%; }
+  }
+
+  @keyframes ui-shimmer-reverse {
+    0% { background-position: 0% 0%; }
+    100% { background-position: -200% 0%; }
+  }
+
   .ui-page-title h1 {
     font-size: 2rem;
     font-weight: 700;

frontend/src/pages/communities.astro

@@ -363,25 +363,8 @@ import { API_BASE as apiBase } from '../lib/api';
     margin: 0;
   }
 
-  .is-skeleton {
-    border-color: rgba(255, 255, 255, 0.08);
-    box-shadow: none;
-  }
-
-  .skel {
-    border-radius: 10px;
-    background: linear-gradient(90deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.09) 35%, rgba(255,255,255,0.05) 70%);
-    background-size: 200% 100%;
-    animation: shimmer 1.1s ease-in-out infinite;
-  }
-
   .skel-title { height: 18px; width: 68%; }
   .skel-slug { height: 12px; width: 36%; }
   .skel-desc { height: 12px; width: 100%; margin-top: 0.75rem; }
   .skel-desc.short { width: 78%; margin-top: 0.5rem; }
-
-  @keyframes shimmer {
-    0% { background-position: 0% 0%; }
-    100% { background-position: -200% 0%; }
-  }
 </style>

frontend/src/pages/communities/[slug]/proposals/index.astro

@@ -363,27 +363,7 @@ const { slug } = Astro.params;
     color: var(--color-text-muted);
   }
 
-  .list-skeleton {
+  .list-skeleton .skeleton-card {
-    display: grid;
+    --ui-skeleton-card-h: 92px;
-    gap: 1rem;
-  }
-
-  .skeleton-card {
-    height: 92px;
-    border-radius: 14px;
-    border: 1px solid var(--color-border);
-    background: linear-gradient(
-      90deg,
-      rgba(255, 255, 255, 0.03) 0%,
-      rgba(255, 255, 255, 0.06) 50%,
-      rgba(255, 255, 255, 0.03) 100%
-    );
-    background-size: 200% 100%;
-    animation: shimmer 1.2s ease-in-out infinite;
-  }
-
-  @keyframes shimmer {
-    0% { background-position: 0% 0%; }
-    100% { background-position: 200% 0%; }
   }
 </style>

frontend/src/pages/dashboard.astro

@@ -379,28 +379,4 @@ import { API_BASE as apiBase } from '../lib/api';
   .status-discussion { background: var(--color-info); color: var(--color-on-primary); }
   .status-voting { background: var(--color-success); color: var(--color-on-primary); }
   .status-closed { background: var(--color-neutral); color: var(--color-on-primary); }
-
-  .list-skeleton {
-    display: grid;
-    gap: 1rem;
-  }
-
-  .skeleton-card {
-    height: 120px;
-    border-radius: 14px;
-    border: 1px solid var(--color-border);
-    background: linear-gradient(
-      90deg,
-      rgba(255, 255, 255, 0.03) 0%,
-      rgba(255, 255, 255, 0.06) 50%,
-      rgba(255, 255, 255, 0.03) 100%
-    );
-    background-size: 200% 100%;
-    animation: shimmer 1.2s ease-in-out infinite;
-  }
-
-  @keyframes shimmer {
-    0% { background-position: 0% 0%; }
-    100% { background-position: 200% 0%; }
-  }
 </style>