@vc-shell/vc-app-skill 2.0.0-alpha.33 → 2.0.0-alpha.34

package/runtime/knowledge/docs/ui/components/atoms/vc-label/vc-label.docs.md

@@ -22,31 +22,31 @@ A form field label component with support for required indicators, info tooltips
 
 ## Key Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `required` | `boolean` | `false` | Shows a red asterisk after the label text |
-| `error` | `boolean` | `false` | Renders the label in error state (danger color) |
-| `htmlFor` | `string` | -- | Links the label to an input; when set, renders as `<label for="...">` |
-| `tooltipIcon` | `string` | `"lucide-info"` | Icon used for the tooltip trigger |
-| `multilanguage` | `boolean` | `false` | Shows a language indicator badge |
-| `currentLanguage` | `string` | -- | Language code displayed in the badge (e.g. `"EN"`, `"DE"`) |
+| Prop              | Type      | Default         | Description                                                           |
+| ----------------- | --------- | --------------- | --------------------------------------------------------------------- |
+| `required`        | `boolean` | `false`         | Shows a red asterisk after the label text                             |
+| `error`           | `boolean` | `false`         | Renders the label in error state (danger color)                       |
+| `htmlFor`         | `string`  | --              | Links the label to an input; when set, renders as `<label for="...">` |
+| `tooltipIcon`     | `string`  | `"lucide-info"` | Icon used for the tooltip trigger                                     |
+| `multilanguage`   | `boolean` | `false`         | Shows a language indicator badge                                      |
+| `currentLanguage` | `string`  | --              | Language code displayed in the badge (e.g. `"EN"`, `"DE"`)            |
 
 ## Slots
 
-| Slot | Description |
-|------|-------------|
-| `default` | Label text content |
+| Slot      | Description                                  |
+| --------- | -------------------------------------------- |
+| `default` | Label text content                           |
 | `tooltip` | Content displayed inside the tooltip popover |
 
 ## CSS Custom Properties
 
-| Variable | Default | Description |
-|---|---|---|
-| `--label-text-color` | `var(--neutrals-700)` | Default text color |
-| `--label-required-color` | `var(--danger-500)` | Color of the required asterisk |
-| `--label-tooltip-color` | `var(--neutrals-400)` | Tooltip icon color |
-| `--label-lang-color` | `var(--neutrals-500)` | Language badge text color |
-| `--label-error-color` | `var(--danger-500)` | Text color in error state |
+| Variable                 | Default               | Description                    |
+| ------------------------ | --------------------- | ------------------------------ |
+| `--label-text-color`     | `var(--neutrals-700)` | Default text color             |
+| `--label-required-color` | `var(--danger-500)`   | Color of the required asterisk |
+| `--label-tooltip-color`  | `var(--neutrals-400)` | Tooltip icon color             |
+| `--label-lang-color`     | `var(--neutrals-500)` | Language badge text color      |
+| `--label-error-color`    | `var(--danger-500)`   | Text color in error state      |
 
 ## Common Patterns
 
@@ -92,11 +92,13 @@ Compose VcLabel, an input, and VcHint into a reusable field pattern:
 ```vue
 <template>
   <div class="tw-space-y-1">
-    <VcLabel html-for="slug" required :error="!!slugError">
+    <VcLabel
+      html-for="slug"
+      required
+      :error="!!slugError"
+    >
       URL Slug
-      <template #tooltip>
-        The URL-friendly identifier for this page. Auto-generated from the title if left blank.
-      </template>
+      <template #tooltip> The URL-friendly identifier for this page. Auto-generated from the title if left blank. </template>
     </VcLabel>
     <VcInput
       id="slug"
@@ -105,8 +107,11 @@ Compose VcLabel, an input, and VcHint into a reusable field pattern:
       aria-describedby="slug-hint"
       aria-required="true"
     />
-    <VcHint id="slug-hint" :error="!!slugError">
-      {{ slugError || 'Lowercase letters, numbers, and hyphens only.' }}
+    <VcHint
+      id="slug-hint"
+      :error="!!slugError"
+    >
+      {{ slugError || "Lowercase letters, numbers, and hyphens only." }}
     </VcHint>
   </div>
 </template>

package/runtime/knowledge/docs/ui/components/atoms/vc-link/vc-link.docs.md

@@ -27,16 +27,16 @@ function openDetails() {
 
 ## Key Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `active` | `boolean` | `false` | Highlights the link as currently selected |
+| Prop       | Type      | Default | Description                                    |
+| ---------- | --------- | ------- | ---------------------------------------------- |
+| `active`   | `boolean` | `false` | Highlights the link as currently selected      |
 | `disabled` | `boolean` | `false` | Prevents interaction and applies muted styling |
 
 ## Events
 
-| Event | Payload | Description |
-|-------|---------|-------------|
-| `click` | none | Fired when the link is clicked (suppressed when `disabled`) |
+| Event   | Payload | Description                                                 |
+| ------- | ------- | ----------------------------------------------------------- |
+| `click` | none    | Fired when the link is clicked (suppressed when `disabled`) |
 
 ## Common Patterns
 
@@ -45,8 +45,16 @@ function openDetails() {
 ```vue
 <template>
   <div class="tw-flex tw-gap-4">
-    <VcLink :active="currentTab === 'home'" @click="currentTab = 'home'">Home</VcLink>
-    <VcLink :active="currentTab === 'products'" @click="currentTab = 'products'">Products</VcLink>
+    <VcLink
+      :active="currentTab === 'home'"
+      @click="currentTab = 'home'"
+      >Home</VcLink
+    >
+    <VcLink
+      :active="currentTab === 'products'"
+      @click="currentTab = 'products'"
+      >Products</VcLink
+    >
     <VcLink disabled>Admin</VcLink>
   </div>
 </template>
@@ -105,13 +113,13 @@ const activeTab = ref("Overview");
 
 ## CSS Custom Properties
 
-| Variable | Default | Description |
-|---|---|---|
-| `--link-text-color` | `var(--primary-500)` | Default text color |
-| `--link-text-color-hover` | `var(--primary-400)` | Text color on hover |
-| `--link-text-color-active` | `var(--primary-700)` | Text color in active state |
-| `--link-text-color-disabled` | `var(--neutrals-300)` | Text color when disabled |
-| `--link-focus-ring-color` | `primary-500 at 30%` | Focus ring color |
+| Variable                     | Default               | Description                |
+| ---------------------------- | --------------------- | -------------------------- |
+| `--link-text-color`          | `var(--primary-500)`  | Default text color         |
+| `--link-text-color-hover`    | `var(--primary-400)`  | Text color on hover        |
+| `--link-text-color-active`   | `var(--primary-700)`  | Text color in active state |
+| `--link-text-color-disabled` | `var(--neutrals-300)` | Text color when disabled   |
+| `--link-focus-ring-color`    | `primary-500 at 30%`  | Focus ring color           |
 
 ## Tips
 

package/runtime/knowledge/docs/ui/components/atoms/vc-loading/vc-loading.docs.md

@@ -31,20 +31,20 @@ const isLoading = ref(true);
 
 ## Key Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
+| Prop     | Type      | Default | Description                 |
+| -------- | --------- | ------- | --------------------------- |
 | `active` | `boolean` | `false` | Controls overlay visibility |
 
 ## CSS Custom Properties
 
-| Variable | Default | Description |
-|---|---|---|
-| `--loading-bar-color` | `var(--primary-500)` | Progress bar fill color |
-| `--loading-bar-track` | `var(--primary-100)` | Progress bar track background |
-| `--loading-overlay-bg` | `rgba(255,255,255,0.6)` | Overlay background color |
-| `--loading-bar-width` | `140px` | Width of the progress bar |
-| `--loading-bar-height` | `4px` | Height of the progress bar |
-| `--loading-z-index` | `9998` | Z-index of the overlay layer |
+| Variable               | Default                 | Description                   |
+| ---------------------- | ----------------------- | ----------------------------- |
+| `--loading-bar-color`  | `var(--primary-500)`    | Progress bar fill color       |
+| `--loading-bar-track`  | `var(--primary-100)`    | Progress bar track background |
+| `--loading-overlay-bg` | `rgba(255,255,255,0.6)` | Overlay background color      |
+| `--loading-bar-width`  | `140px`                 | Width of the progress bar     |
+| `--loading-bar-height` | `4px`                   | Height of the progress bar    |
+| `--loading-z-index`    | `9998`                  | Z-index of the overlay layer  |
 
 ## Recipe: Loading State in a Blade
 
@@ -55,11 +55,17 @@ Blades have a built-in loading mechanism, but you can use VcLoading to cover a s
   <VcBlade title="Product Details">
     <div class="tw-relative tw-min-h-[200px]">
       <VcLoading :active="isLoadingChart" />
-      <RevenueChart v-if="chartData" :data="chartData" />
+      <RevenueChart
+        v-if="chartData"
+        :data="chartData"
+      />
     </div>
 
     <!-- The rest of the blade loads independently -->
-    <VcInput v-model="product.name" label="Name" />
+    <VcInput
+      v-model="product.name"
+      label="Name"
+    />
   </VcBlade>
 </template>
 ```
@@ -89,7 +95,10 @@ Override the bar color to match a specific status or brand theme:
 
 ```vue
 <template>
-  <div class="tw-relative tw-h-40" style="--loading-bar-color: var(--success-500); --loading-bar-track: var(--success-100);">
+  <div
+    class="tw-relative tw-h-40"
+    style="--loading-bar-color: var(--success-500); --loading-bar-track: var(--success-100);"
+  >
     <VcLoading :active="isSaving" />
     <span>Saving changes...</span>
   </div>

package/runtime/knowledge/docs/ui/components/atoms/vc-progress/vc-progress.docs.md

@@ -26,11 +26,11 @@ const uploadPercent = ref(45);
 
 ## Key Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `value` | `number` | `0` | Current progress (0--100). Clamped automatically. |
-| `variant` | `"default" \| "striped"` | `"default"` | Visual style; `striped` adds an animated diagonal pattern |
-| `ariaLabel` | `string` | `"Progress"` | Accessible label describing what the bar represents |
+| Prop        | Type                     | Default      | Description                                               |
+| ----------- | ------------------------ | ------------ | --------------------------------------------------------- |
+| `value`     | `number`                 | `0`          | Current progress (0--100). Clamped automatically.         |
+| `variant`   | `"default" \| "striped"` | `"default"`  | Visual style; `striped` adds an animated diagonal pattern |
+| `ariaLabel` | `string`                 | `"Progress"` | Accessible label describing what the bar represents       |
 
 ## Common Patterns
 
@@ -43,7 +43,10 @@ const uploadPercent = ref(45);
       <span>Importing catalog...</span>
       <span>{{ progress }}%</span>
     </div>
-    <VcProgress :value="progress" :variant="progress === 100 ? 'striped' : 'default'" />
+    <VcProgress
+      :value="progress"
+      :variant="progress === 100 ? 'striped' : 'default'"
+    />
   </div>
 </template>
 ```
@@ -53,7 +56,10 @@ const uploadPercent = ref(45);
 ```vue
 <template>
   <div class="tw-space-y-4">
-    <div v-for="stage in stages" :key="stage.label">
+    <div
+      v-for="stage in stages"
+      :key="stage.label"
+    >
       <span class="tw-text-sm">{{ stage.label }}</span>
       <VcProgress :value="stage.value" />
     </div>
@@ -74,7 +80,10 @@ const uploadPercent = ref(45);
       :value="(usedGB / totalGB) * 100"
       aria-label="Storage usage"
     />
-    <VcHint v-if="usedGB / totalGB > 0.9" error>
+    <VcHint
+      v-if="usedGB / totalGB > 0.9"
+      error
+    >
       You are running low on storage.
     </VcHint>
   </div>
@@ -105,11 +114,17 @@ async function handleUpload(files: FileList) {
 
 <template>
   <VcBlade title="Import Products">
-    <VcButton :disabled="isUploading" @click="triggerUpload">
-      {{ isUploading ? 'Uploading...' : 'Select File' }}
+    <VcButton
+      :disabled="isUploading"
+      @click="triggerUpload"
+    >
+      {{ isUploading ? "Uploading..." : "Select File" }}
     </VcButton>
 
-    <div v-if="isUploading" class="tw-mt-4">
+    <div
+      v-if="isUploading"
+      class="tw-mt-4"
+    >
       <VcProgress
         :value="uploadProgress"
         variant="striped"
@@ -123,13 +138,13 @@ async function handleUpload(files: FileList) {
 
 ## CSS Custom Properties
 
-| Variable | Default | Description |
-|---|---|---|
-| `--progressbar-height` | `8px` | Bar height |
-| `--progressbar-border-radius` | `9999px` | Border radius (pill shape) |
-| `--progressbar-background-color` | `var(--neutrals-200)` | Track background |
-| `--progressbar-foreground-color` | `var(--primary-500)` | Fill color |
-| `--progressbar-striped-bg` | gradient | Striped variant background |
+| Variable                         | Default               | Description                |
+| -------------------------------- | --------------------- | -------------------------- |
+| `--progressbar-height`           | `8px`                 | Bar height                 |
+| `--progressbar-border-radius`    | `9999px`              | Border radius (pill shape) |
+| `--progressbar-background-color` | `var(--neutrals-200)` | Track background           |
+| `--progressbar-foreground-color` | `var(--primary-500)`  | Fill color                 |
+| `--progressbar-striped-bg`       | gradient              | Striped variant background |
 
 ## Tips
 

package/runtime/knowledge/docs/ui/components/atoms/vc-row/vc-row.docs.md

@@ -14,9 +14,18 @@ A simple layout primitive that arranges child elements in a horizontal flexbox r
 ```vue
 <template>
   <VcRow>
-    <VcImage src="/img/a.jpg" size="xl" />
-    <VcImage src="/img/b.jpg" size="xl" />
-    <VcImage src="/img/c.jpg" size="xl" />
+    <VcImage
+      src="/img/a.jpg"
+      size="xl"
+    />
+    <VcImage
+      src="/img/b.jpg"
+      size="xl"
+    />
+    <VcImage
+      src="/img/c.jpg"
+      size="xl"
+    />
   </VcRow>
 </template>
 
@@ -38,7 +47,11 @@ The `--row-gap` CSS variable (default `0`) controls spacing. You can also overri
 ```vue
 <template>
   <VcRow class="tw-gap-4">
-    <div v-for="i in 4" :key="i" class="tw-p-4 tw-bg-gray-100 tw-rounded">
+    <div
+      v-for="i in 4"
+      :key="i"
+      class="tw-p-4 tw-bg-gray-100 tw-rounded"
+    >
       Item {{ i }}
     </div>
   </VcRow>
@@ -50,7 +63,11 @@ The `--row-gap` CSS variable (default `0`) controls spacing. You can also overri
 ```vue
 <template>
   <VcRow class="tw-gap-4">
-    <div v-for="card in cards" :key="card.id" class="tw-w-64 tw-p-4 tw-border tw-rounded tw-shadow-sm">
+    <div
+      v-for="card in cards"
+      :key="card.id"
+      class="tw-w-64 tw-p-4 tw-border tw-rounded tw-shadow-sm"
+    >
       <h3 class="tw-font-medium">{{ card.title }}</h3>
       <p class="tw-text-sm tw-text-gray-600">{{ card.description }}</p>
     </div>
@@ -64,11 +81,20 @@ The `--row-gap` CSS variable (default `0`) controls spacing. You can also overri
 <template>
   <VcRow class="tw-gap-6">
     <VcCol :size="1">
-      <VcImage :src="product.imageUrl" size="xl" />
+      <VcImage
+        :src="product.imageUrl"
+        size="xl"
+      />
     </VcCol>
     <VcCol :size="2">
-      <VcInput label="Product Name" v-model="product.name" />
-      <VcInput label="SKU" v-model="product.sku" />
+      <VcInput
+        label="Product Name"
+        v-model="product.name"
+      />
+      <VcInput
+        label="SKU"
+        v-model="product.sku"
+      />
     </VcCol>
   </VcRow>
 </template>
@@ -84,10 +110,25 @@ Use VcRow to place a section label next to a group of fields in a blade detail v
     <VcCol :size="1">
       <span class="tw-font-medium tw-text-sm tw-text-gray-700">Pricing</span>
     </VcCol>
-    <VcCol :size="3" class="tw-gap-3">
-      <VcInput label="List Price" v-model="form.listPrice" type="number" />
-      <VcInput label="Sale Price" v-model="form.salePrice" type="number" />
-      <VcSelect label="Currency" v-model="form.currency" :options="currencies" />
+    <VcCol
+      :size="3"
+      class="tw-gap-3"
+    >
+      <VcInput
+        label="List Price"
+        v-model="form.listPrice"
+        type="number"
+      />
+      <VcInput
+        label="Sale Price"
+        v-model="form.salePrice"
+        type="number"
+      />
+      <VcSelect
+        label="Currency"
+        v-model="form.currency"
+        :options="currencies"
+      />
     </VcCol>
   </VcRow>
 </template>
@@ -95,9 +136,9 @@ Use VcRow to place a section label next to a group of fields in a blade detail v
 
 ## CSS Custom Properties
 
-| Variable | Default | Description |
-|---|---|---|
-| `--row-gap` | `0` | Gap between child elements |
+| Variable    | Default | Description                |
+| ----------- | ------- | -------------------------- |
+| `--row-gap` | `0`     | Gap between child elements |
 
 ## Tips
 

package/runtime/knowledge/docs/ui/components/atoms/vc-scrollable-container/vc-scrollable-container.docs.md

@@ -14,7 +14,11 @@ A container component that wraps overflowing content with auto-hiding scroll arr
 ```vue
 <template>
   <VcScrollableContainer style="height: 200px;">
-    <div v-for="i in 30" :key="i" class="tw-px-3 tw-py-2">
+    <div
+      v-for="i in 30"
+      :key="i"
+      class="tw-px-3 tw-py-2"
+    >
       Item {{ i }}
     </div>
   </VcScrollableContainer>
@@ -27,24 +31,24 @@ import { VcScrollableContainer } from "@vc-shell/framework";
 
 ## Key Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `speed` | `number` | `2` | Scroll speed in px/frame. Captured once at mount (not reactive). |
+| Prop    | Type     | Default | Description                                                      |
+| ------- | -------- | ------- | ---------------------------------------------------------------- |
+| `speed` | `number` | `2`     | Scroll speed in px/frame. Captured once at mount (not reactive). |
 
 ## Slots
 
-| Slot | Description |
-|------|-------------|
-| `default` | Content rendered inside the scrollable viewport |
-| `arrow-up` | Custom up-arrow indicator (replaces default chevron) |
+| Slot         | Description                                            |
+| ------------ | ------------------------------------------------------ |
+| `default`    | Content rendered inside the scrollable viewport        |
+| `arrow-up`   | Custom up-arrow indicator (replaces default chevron)   |
 | `arrow-down` | Custom down-arrow indicator (replaces default chevron) |
 
 ## Exposed
 
-| Property | Type | Description |
-|----------|------|-------------|
-| `viewportRef` | `Ref<HTMLElement \| null>` | Direct reference to the viewport DOM element |
-| `updateScrollState` | `() => void` | Manually recalculate arrow visibility |
+| Property            | Type                       | Description                                  |
+| ------------------- | -------------------------- | -------------------------------------------- |
+| `viewportRef`       | `Ref<HTMLElement \| null>` | Direct reference to the viewport DOM element |
+| `updateScrollState` | `() => void`               | Manually recalculate arrow visibility        |
 
 ## Recipe: Sidebar Filter List in a Blade
 
@@ -52,13 +56,19 @@ import { VcScrollableContainer } from "@vc-shell/framework";
 <template>
   <div class="tw-w-64 tw-border-r tw-border-gray-200">
     <h3 class="tw-px-3 tw-py-2 tw-font-semibold tw-text-sm">Filters</h3>
-    <VcScrollableContainer style="max-height: 320px;" :speed="3">
+    <VcScrollableContainer
+      style="max-height: 320px;"
+      :speed="3"
+    >
       <label
         v-for="filter in filters"
         :key="filter.id"
         class="tw-flex tw-items-center tw-gap-2 tw-px-3 tw-py-1.5 hover:tw-bg-gray-50 tw-cursor-pointer"
       >
-        <input type="checkbox" v-model="filter.active" />
+        <input
+          type="checkbox"
+          v-model="filter.active"
+        />
         <span class="tw-text-sm">{{ filter.label }}</span>
       </label>
     </VcScrollableContainer>
@@ -83,7 +93,10 @@ watch(activeCategory, () => {
 </script>
 
 <template>
-  <VcScrollableContainer ref="scrollContainer" style="height: 300px;">
+  <VcScrollableContainer
+    ref="scrollContainer"
+    style="height: 300px;"
+  >
     <ItemList :category="activeCategory" />
   </VcScrollableContainer>
 </template>

package/runtime/knowledge/docs/ui/components/atoms/vc-skeleton/vc-skeleton.docs.md

@@ -22,14 +22,14 @@ import { VcSkeleton } from "@vc-shell/framework";
 
 ## Key Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `variant` | `"text" \| "circle" \| "block"` | `"text"` | Shape variant: text rows, circular, or rectangular |
-| `rows` | `number` | `1` | Number of text rows (only for `variant="text"`) |
-| `width` | `string \| number` | -- | Custom width for circle/block (number = px) |
-| `height` | `string \| number` | -- | Custom height for circle/block (number = px) |
-| `animated` | `boolean` | `true` | Enables pulse animation |
-| `ariaLabel` | `string` | `"Loading..."` | Screen reader announcement |
+| Prop        | Type                            | Default        | Description                                        |
+| ----------- | ------------------------------- | -------------- | -------------------------------------------------- |
+| `variant`   | `"text" \| "circle" \| "block"` | `"text"`       | Shape variant: text rows, circular, or rectangular |
+| `rows`      | `number`                        | `1`            | Number of text rows (only for `variant="text"`)    |
+| `width`     | `string \| number`              | --             | Custom width for circle/block (number = px)        |
+| `height`    | `string \| number`              | --             | Custom height for circle/block (number = px)       |
+| `animated`  | `boolean`                       | `true`         | Enables pulse animation                            |
+| `ariaLabel` | `string`                        | `"Loading..."` | Screen reader announcement                         |
 
 ## Common Patterns
 
@@ -52,9 +52,17 @@ The last row automatically renders at 60% width for a natural paragraph feel.
 ```vue
 <template>
   <div class="tw-border tw-rounded-lg tw-overflow-hidden tw-shadow-sm">
-    <VcSkeleton variant="block" width="100%" height="200px" />
+    <VcSkeleton
+      variant="block"
+      width="100%"
+      height="200px"
+    />
     <div class="tw-p-4">
-      <VcSkeleton variant="block" width="60%" height="20px" />
+      <VcSkeleton
+        variant="block"
+        width="60%"
+        height="20px"
+      />
       <div class="tw-mt-3">
         <VcSkeleton :rows="3" />
       </div>
@@ -68,10 +76,22 @@ The last row automatically renders at 60% width for a natural paragraph feel.
 ```vue
 <template>
   <div class="tw-space-y-4">
-    <div v-for="i in 3" :key="i" class="tw-flex tw-gap-4 tw-items-center">
-      <VcSkeleton variant="circle" :width="40" :height="40" />
+    <div
+      v-for="i in 3"
+      :key="i"
+      class="tw-flex tw-gap-4 tw-items-center"
+    >
+      <VcSkeleton
+        variant="circle"
+        :width="40"
+        :height="40"
+      />
       <div class="tw-flex-1">
-        <VcSkeleton variant="block" width="40%" height="14px" />
+        <VcSkeleton
+          variant="block"
+          width="40%"
+          height="14px"
+        />
         <div class="tw-mt-2">
           <VcSkeleton :rows="1" />
         </div>
@@ -83,13 +103,13 @@ The last row automatically renders at 60% width for a natural paragraph feel.
 
 ## CSS Custom Properties
 
-| Variable | Default | Description |
-|---|---|---|
-| `--vc-skeleton-bg` | `var(--neutrals-200)` | Shape background color |
-| `--vc-skeleton-highlight` | `var(--neutrals-300)` | Highlight color (for future shimmer) |
-| `--vc-skeleton-border-radius` | `6px` | Corner radius for text rows and blocks |
-| `--vc-skeleton-row-height` | `16px` | Height of each text row |
-| `--vc-skeleton-row-gap` | `12px` | Vertical gap between text rows |
+| Variable                      | Default               | Description                            |
+| ----------------------------- | --------------------- | -------------------------------------- |
+| `--vc-skeleton-bg`            | `var(--neutrals-200)` | Shape background color                 |
+| `--vc-skeleton-highlight`     | `var(--neutrals-300)` | Highlight color (for future shimmer)   |
+| `--vc-skeleton-border-radius` | `6px`                 | Corner radius for text rows and blocks |
+| `--vc-skeleton-row-height`    | `16px`                | Height of each text row                |
+| `--vc-skeleton-row-gap`       | `12px`                | Vertical gap between text rows         |
 
 ## Accessibility