diff --git a/.storybook/storybook.css b/.storybook/storybook.css
index f870b171..d84fe58b 100644
--- a/.storybook/storybook.css
+++ b/.storybook/storybook.css
@@ -402,6 +402,45 @@ h3.sbdocs.sbdocs-h3 {
   background-image: url("https://vtexhelp.vtexassets.com/assets/docs/src/refinements___ca4c7814b2771e84601f4a6d457612fd.png");
 }
 
+/* Skeletons */
+
+.canvas-skeletons [data-fs-skeleton-variant="text"] {
+  max-width: 300px;
+}
+
+.canvas-skeletons [data-fs-skeleton-variant="badge"] {
+  max-width: 100px;
+}
+
+.canvas-skeletons [data-fs-skeleton-variant="image"] {
+  max-width: 12.188rem;
+}
+
+.canvas-filter-skeleton [data-fs-filter-skeleton] {
+  max-width: 350px;
+}
+
+.canvas-product-card-skeleton [data-fs-product-card-skeleton] {
+  max-width: 280px;
+}
+
+.sbdocs-skeletons .sbdocs-li > .sbdocs-div {
+  min-height: 420px;
+  background-color: #f7f7f7;
+}
+
+.sbdocs-skeletons .sbdocs-li > .sbdocs-div [data-fs-skeleton] {
+  width: 200px;
+}
+
+.sbdocs-skeletons .sbdocs-li > .sbdocs-div [data-fs-skeleton-variant="badge"] {
+  width: 120px;
+}
+
+.sbdocs-skeletons .sbdocs-li > .sbdocs-div [data-fs-skeleton-variant="button"] {
+  width: 90px;
+}
+
 /* Hero Section */
 
 .sbdocs-content > header.sbdocs-hero {
diff --git a/CHANGELOG.md b/CHANGELOG.md
index c8604bfc..0d4810ce 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,13 @@ All notable changes to this project will be documented in this file.
 The format is based on [Conventional Changelog](https://github.com/conventional-changelog/conventional-changelog),
 and this project adheres to [Calendar Versioning](https://calver.org/).
 
+## [22.30.0](https://github.com/vtex-sites/gatsby.store/compare/22.29.5...22.30.0) (2022-08-01)
+
+
+### Features
+
+* Adds new tokens to `Skeleton` [FS-269] ([#162](https://github.com/vtex-sites/gatsby.store/issues/162)) ([8423be3](https://github.com/vtex-sites/gatsby.store/commit/8423be3df7da4dc04d84f1b89fc4f6564ca476ba)), closes [#171](https://github.com/vtex-sites/gatsby.store/issues/171)
+
 ### [22.29.5](https://github.com/vtex-sites/gatsby.store/compare/22.29.4...22.29.5) (2022-07-28)
 
 ### Chores
diff --git a/package.json b/package.json
index 39805f46..56c66479 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "gatsby.store",
   "private": true,
-  "version": "22.29.5",
+  "version": "22.30.0",
   "license": "MIT",
   "browserslist": "supports es6-module and not dead",
   "scripts": {
diff --git a/src/components/sections/ProductGallery/ProductGallery.tsx b/src/components/sections/ProductGallery/ProductGallery.tsx
index b804f1eb..f4d9d5b2 100644
--- a/src/components/sections/ProductGallery/ProductGallery.tsx
+++ b/src/components/sections/ProductGallery/ProductGallery.tsx
@@ -6,7 +6,7 @@ import Filter from 'src/components/search/Filter'
 import Sort from 'src/components/search/Sort'
 import FilterSkeleton from 'src/components/skeletons/FilterSkeleton'
 import ProductGridSkeleton from 'src/components/skeletons/ProductGridSkeleton'
-import SkeletonElement from 'src/components/skeletons/SkeletonElement'
+import Skeleton from 'src/components/skeletons/Skeleton'
 import Button, { ButtonLink } from 'src/components/ui/Button'
 import Icon from 'src/components/ui/Icon'
 import { mark } from 'src/sdk/tests/mark'
@@ -73,17 +73,32 @@ function ProductGallery({ title, searchTerm }: Props) {
         </div>
 
         <div data-fs-product-listing-results-count data-count={totalCount}>
-          <SkeletonElement shimmer type="text" loading={!data}>
+          <Skeleton
+            shimmer
+            variant="text"
+            loading={!data}
+            data-fs-product-listing-results-count-skeleton
+          >
             <h2 data-testid="total-product-count">{totalCount} Results</h2>
-          </SkeletonElement>
+          </Skeleton>
         </div>
 
         <div data-fs-product-listing-sort>
-          <SkeletonElement shimmer type="text" loading={facets?.length === 0}>
+          <Skeleton
+            shimmer
+            variant="text"
+            loading={facets?.length === 0}
+            data-fs-product-listing-sort-skeleton
+          >
             <Sort />
-          </SkeletonElement>
+          </Skeleton>
 
-          <SkeletonElement shimmer type="button" loading={facets?.length === 0}>
+          <Skeleton
+            shimmer
+            variant="button"
+            loading={facets?.length === 0}
+            data-fs-product-listing-filter-button-skeleton
+          >
             <Button
               variant="tertiary"
               data-testid="open-filter-button"
@@ -94,7 +109,7 @@ function ProductGallery({ title, searchTerm }: Props) {
             >
               Filters
             </Button>
-          </SkeletonElement>
+          </Skeleton>
         </div>
 
         <div data-fs-product-listing-results>
diff --git a/src/components/sections/ProductGallery/product-gallery.module.scss b/src/components/sections/ProductGallery/product-gallery.module.scss
index 17986ce2..3c9c3369 100644
--- a/src/components/sections/ProductGallery/product-gallery.module.scss
+++ b/src/components/sections/ProductGallery/product-gallery.module.scss
@@ -72,7 +72,7 @@
     padding: var(--fs-spacing-1) var(--fs-spacing-3) var(--fs-spacing-2);
     background-color: var(--fs-color-body-bkg);
 
-    [data-element-variant="text"] {
+    [data-fs-product-listing-sort-skeleton] {
       min-width: rem(225px);
       min-height: var(--fs-spacing-5);
     }
@@ -88,7 +88,7 @@
         display: none;
       }
 
-      [data-element-variant="button"] {
+      [data-fs-product-listing-filter-button-skeleton] {
         display: none;
       }
     }
@@ -112,7 +112,7 @@
       background-color: unset;
     }
 
-    [data-element-variant="text"] {
+    [data-fs-product-listing-results-count-skeleton] {
       min-width: rem(130px);
     }
   }
diff --git a/src/components/sections/ProductShelf/ProductShelf.tsx b/src/components/sections/ProductShelf/ProductShelf.tsx
index 17dcc0db..8a273d61 100644
--- a/src/components/sections/ProductShelf/ProductShelf.tsx
+++ b/src/components/sections/ProductShelf/ProductShelf.tsx
@@ -4,6 +4,7 @@ import type { ProductsQueryQueryVariables } from '@generated/graphql'
 
 import ProductCard from '../../product/ProductCard'
 import Section from '../Section'
+import styles from './product-shelf.module.scss'
 
 interface ProductShelfProps extends Partial<ProductsQueryQueryVariables> {
   title: string | JSX.Element
@@ -26,7 +27,7 @@ function ProductShelf({
       className={`layout__section ${withDivisor ? 'section__divisor' : ''}`}
     >
       <h2 className="text__title-section layout__content">{title}</h2>
-      <div data-fs-product-shelf>
+      <div className={styles.fsProductShelf} data-fs-product-shelf>
         <ProductShelfSkeleton loading={products === undefined}>
           <ul data-fs-product-shelf-items className="layout__content">
             {products?.edges.map((product, idx) => (
diff --git a/src/components/sections/ProductShelf/product-shelf.scss b/src/components/sections/ProductShelf/product-shelf.module.scss
similarity index 54%
rename from src/components/sections/ProductShelf/product-shelf.scss
rename to src/components/sections/ProductShelf/product-shelf.module.scss
index 8e3cca96..bb5c1686 100644
--- a/src/components/sections/ProductShelf/product-shelf.scss
+++ b/src/components/sections/ProductShelf/product-shelf.module.scss
@@ -1,6 +1,6 @@
 @import "src/styles/scaffold";
 
-[data-fs-product-shelf] {
+.fs-product-shelf {
   // --------------------------------------------------------
   // Design Tokens for Product Shelf
   // --------------------------------------------------------
@@ -17,23 +17,25 @@
   // Structural Styles
   // --------------------------------------------------------
 
-  min-height: var(--fs-product-shelf-min-height);
-}
-
-[data-fs-product-shelf-items] {
-  display: flex;
-  align-items: stretch;
-  overflow-x: scroll;
-
-  li {
-    width: 100%;
-    &:first-child { margin-left: var(--fs-product-shelf-first-item-margin-left); }
+  &[data-fs-product-shelf] {
+    min-height: var(--fs-product-shelf-min-height);
   }
 
-  @include media(">=tablet") {
-    column-gap: var(--fs-product-shelf-items-gap);
-    padding-top: var(--fs-product-shelf-items-padding-top);
-    padding-bottom: var(--fs-product-shelf-items-padding-bottom);
-    overflow-x: auto;
+  [data-fs-product-shelf-items] {
+    display: flex;
+    align-items: stretch;
+    overflow-x: scroll;
+
+    li {
+      width: 100%;
+      &:first-child { margin-left: var(--fs-product-shelf-first-item-margin-left); }
+    }
+
+    @include media(">=tablet") {
+      column-gap: var(--fs-product-shelf-items-gap);
+      padding-top: var(--fs-product-shelf-items-padding-top);
+      padding-bottom: var(--fs-product-shelf-items-padding-bottom);
+      overflow-x: auto;
+    }
   }
 }
diff --git a/src/components/skeletons/FilterSkeleton/FilterSkeleton.stories.mdx b/src/components/skeletons/FilterSkeleton/FilterSkeleton.stories.mdx
new file mode 100644
index 00000000..754dc4f0
--- /dev/null
+++ b/src/components/skeletons/FilterSkeleton/FilterSkeleton.stories.mdx
@@ -0,0 +1,97 @@
+import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
+import {
+  TokenTable,
+  TokenRow,
+  TokenDivider,
+} from 'src/../.storybook/components'
+import FilterSkeleton from '.'
+
+<Meta
+  component={FilterSkeleton}
+  title="Features/Skeletons/FilterSkeleton"
+  argTypes={{
+    loading: {
+      control: 'boolean',
+      table: { type: 'boolean', summary: true },
+    },
+  }}
+/>
+
+export const TemplateFilterSkeleton = ({ ...args }) => (
+  <FilterSkeleton {...args} />
+)
+
+<header>
+
+# Filter Skeleton
+
+The loading placeholder for the <code>Filter</code> component used in PLP.
+
+</header>
+
+## Overview
+
+The `FilterSkeleton` component is part of [Skeletons](?path=/docs/features-skeletons-overview--usage) feature.
+
+---
+
+## Usage
+
+`import FilterSkeleton from 'src/components/skeletons/FilterSkeleton'`
+
+<Canvas className="canvas-filter-skeleton">
+  <Story name="Usage" args={{ loading: true }}>
+    {TemplateFilterSkeleton.bind({})}
+  </Story>
+</Canvas>
+
+<ArgsTable story="Usage" />
+
+---
+
+<TokenTable>
+  <TokenRow
+    token="--fs-filter-skeleton-margin-top"
+    value="var(--fs-spacing-1)"
+  />
+</TokenTable>
+
+### Title
+
+<TokenTable>
+  <TokenRow token="--fs-filter-skeleton-title-max-width" value="30%" />
+  <TokenRow
+    token="--fs-filter-skeleton-title-margin-bottom"
+    value="var(--fs-spacing-2)"
+  />
+</TokenTable>
+
+### Content
+
+<TokenTable>
+  <TokenRow
+    token="--fs-filter-skeleton-content-min-height"
+    value="var(--fs-spacing-8)"
+  />
+  <TokenRow
+    token="--fs-filter-skeleton-content-margin-bottom"
+    value="var(--fs-spacing-0)"
+  />
+  <TokenRow
+    token="--fs-filter-skeleton-content-padding"
+    value="var(--fs-spacing-1) var(--fs-spacing-1) var(--fs-spacing-0)"
+  />
+  <TokenRow
+    token="--fs-filter-skeleton-content-border-width"
+    value="var(--fs-border-width)"
+  />
+  <TokenRow
+    token="--fs-filter-skeleton-content-border-color"
+    value="var(--fs-border-color-light)"
+    isColor
+  />
+  <TokenRow
+    token="--fs-filter-skeleton-content-border-radius"
+    value="var(--fs-border-radius)"
+  />
+</TokenTable>
diff --git a/src/components/skeletons/FilterSkeleton/FilterSkeleton.tsx b/src/components/skeletons/FilterSkeleton/FilterSkeleton.tsx
index b95d1297..26b998c7 100644
--- a/src/components/skeletons/FilterSkeleton/FilterSkeleton.tsx
+++ b/src/components/skeletons/FilterSkeleton/FilterSkeleton.tsx
@@ -1,24 +1,28 @@
 import type { PropsWithChildren } from 'react'
 
 import Shimmer from '../Shimmer'
-import SkeletonElement from '../SkeletonElement'
+import Skeleton from '../Skeleton'
+import styles from './filter-skeleton.module.scss'
 
-interface Props {
+interface FilterSkeletonProps {
+  /**
+   * Control whether skeleton should be visible or not.
+   */
   loading?: boolean
 }
 
 function FilterSkeleton({
   children,
   loading = true,
-}: PropsWithChildren<Props>) {
+}: PropsWithChildren<FilterSkeletonProps>) {
   return loading ? (
-    <div data-store-filter-skeleton>
-      <SkeletonElement shimmer type="text" />
+    <div className={styles.fsFilterSkeleton} data-fs-filter-skeleton>
+      <Skeleton shimmer variant="text" />
 
-      <div data-filter-skeleton-content>
-        <SkeletonElement type="text" />
-        <SkeletonElement type="text" />
-        <SkeletonElement type="text" />
+      <div data-fs-filter-skeleton-content>
+        <Skeleton variant="text" />
+        <Skeleton variant="text" />
+        <Skeleton variant="text" />
         <Shimmer />
       </div>
     </div>
diff --git a/src/components/skeletons/FilterSkeleton/filter-skeleton.module.scss b/src/components/skeletons/FilterSkeleton/filter-skeleton.module.scss
new file mode 100644
index 00000000..1ec1e184
--- /dev/null
+++ b/src/components/skeletons/FilterSkeleton/filter-skeleton.module.scss
@@ -0,0 +1,51 @@
+@import "src/styles/scaffold";
+
+.fs-filter-skeleton {
+  // --------------------------------------------------------
+  // Design Tokens for Filter Skeleton
+  // --------------------------------------------------------
+
+  // Default properties
+  --fs-filter-skeleton-margin-top            : var(--fs-spacing-1);
+
+  // Title
+  --fs-filter-skeleton-title-max-width       : 30%;
+  --fs-filter-skeleton-title-margin-bottom   : var(--fs-spacing-2);
+
+  // Content
+  --fs-filter-skeleton-content-min-height    : var(--fs-spacing-8);
+  --fs-filter-skeleton-content-margin-bottom : var(--fs-spacing-0);
+  --fs-filter-skeleton-content-padding       : var(--fs-spacing-1) var(--fs-spacing-1) var(--fs-spacing-0);
+  --fs-filter-skeleton-content-border-color  : var(--fs-border-color-light);
+  --fs-filter-skeleton-content-border-width  : var(--fs-border-width);
+  --fs-filter-skeleton-content-border-radius : var(--fs-border-radius);
+
+  // --------------------------------------------------------
+  // Structural Styles
+  // --------------------------------------------------------
+
+  margin-top: var(--fs-filter-skeleton-margin-top);
+
+  @include media("<notebook") { display: none; }
+
+  [data-fs-skeleton-variant="text"] {
+    max-width: var(--fs-filter-skeleton-title-max-width);
+    margin-bottom: var(--fs-filter-skeleton-title-margin-bottom);
+  }
+
+  [data-fs-filter-skeleton-content] {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    padding: var(--fs-filter-skeleton-content-padding);
+    overflow: hidden;
+    border: var(--fs-filter-skeleton-content-border-width) solid var(--fs-filter-skeleton-content-border-color);
+    border-radius: var(--fs-filter-skeleton-content-border-radius);
+
+    [data-fs-skeleton-variant="text"] {
+      min-width: 100%;
+      min-height: var(--fs-filter-skeleton-content-min-height);
+      margin-bottom: var(--fs-filter-skeleton-content-margin-bottom);
+    }
+  }
+}
diff --git a/src/components/skeletons/FilterSkeleton/filter-skeleton.scss b/src/components/skeletons/FilterSkeleton/filter-skeleton.scss
deleted file mode 100644
index f74477fb..00000000
--- a/src/components/skeletons/FilterSkeleton/filter-skeleton.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-@import "src/styles/scaffold";
-
-[data-store-filter-skeleton] {
-  margin-top: var(--fs-spacing-1);
-
-  @include media("<notebook") { display: none; }
-
-  [data-filter-skeleton-content] {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    padding: var(--fs-spacing-1) var(--fs-spacing-1) var(--fs-spacing-0);
-    overflow: hidden;
-    border: var(--fs-border-width) solid var(--fs-border-color-light);
-    border-radius: var(--fs-border-radius);
-
-    [data-element-variant="text"] {
-      min-width: 100%;
-      min-height: var(--fs-spacing-8);
-      margin-bottom: var(--fs-spacing-0);
-    }
-  }
-
-  [data-element-variant="text"] {
-    max-width: 30%;
-    margin-bottom: var(--fs-spacing-2);
-  }
-}
diff --git a/src/components/skeletons/ProductCardSkeleton/ProductCardSkeleton.stories.mdx b/src/components/skeletons/ProductCardSkeleton/ProductCardSkeleton.stories.mdx
new file mode 100644
index 00000000..74cec5ff
--- /dev/null
+++ b/src/components/skeletons/ProductCardSkeleton/ProductCardSkeleton.stories.mdx
@@ -0,0 +1,176 @@
+import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
+import {
+  TokenTable,
+  TokenRow,
+  TokenDivider,
+} from 'src/../.storybook/components'
+import ProductCardSkeleton from '.'
+
+<Meta
+  component={ProductCardSkeleton}
+  title="Features/Skeletons/ProductCardSkeleton"
+  argTypes={{
+    bordered: {
+      control: 'boolean',
+      table: { type: 'boolean' },
+    },
+    sectioned: {
+      control: 'boolean',
+      table: { type: 'boolean' },
+    },
+    displayButton: {
+      control: 'boolean',
+      table: { type: 'boolean' },
+    },
+  }}
+/>
+
+export const TemplateProductCardSkeleton = ({ ...args }) => (
+  <ProductCardSkeleton {...args} />
+)
+
+<header>
+
+# Product Card Skeleton
+
+The loading placeholder for the <code>ProductCard</code> used in several sections of the store.
+
+</header>
+
+## Overview
+
+The `ProductCardSkeleton` component is part of [Skeletons](?path=/docs/features-skeletons-overview--usage) feature.
+
+---
+
+## Usage
+
+`import ProductCardSkeleton from 'src/components/skeletons/ProductCardSkeleton'`
+
+<Canvas className="canvas-product-card-skeleton">
+  <Story
+    name="Usage"
+    args={{
+      bordered: false,
+      sectioned: false,
+      variant: 'default',
+      displayButton: false,
+    }}
+  >
+    {TemplateProductCardSkeleton.bind({})}
+  </Story>
+</Canvas>
+
+<ArgsTable story="Usage" />
+
+<TokenTable>
+  <TokenRow
+    token="--fs-product-card-skeleton-padding"
+    value="var(--fs-spacing-1) var(--fs-spacing-1) var(--fs-spacing-2)"
+  />
+  <TokenRow
+    token="--fs-product-card-skeleton-border-width"
+    value="var(--fs-border-width)"
+  />
+  <TokenRow
+    token="--fs-product-card-skeleton-border-color"
+    value="transparent"
+    isColor
+  />
+  <TokenRow
+    token="--fs-product-card-skeleton-border-radius"
+    value="var(--fs-border-radius)"
+  />
+</TokenTable>
+
+### Content
+
+<TokenTable>
+  <TokenRow token="--fs-product-card-skeleton-content-height" value="20%" />
+  <TokenRow
+    token="--fs-product-card-skeleton-content-margin-top"
+    value="var(--fs-spacing-2)"
+  />
+</TokenTable>
+
+### Button
+
+<TokenTable>
+  <TokenRow
+    token="--fs-product-card-skeleton-button-margin-top"
+    value="var(--fs-spacing-4)"
+  />
+</TokenTable>
+
+### Text
+
+<TokenTable>
+  <TokenRow
+    token="--fs-product-card-skeleton-text-margin-bottom"
+    value="var(--fs-product-card-skeleton-content-margin-top)"
+  />
+</TokenTable>
+
+### Badge
+
+<TokenTable>
+  <TokenRow
+    token="--fs-product-card-skeleton-badge-min-height"
+    value="var(--fs-spacing-5)"
+  />
+  <TokenRow
+    token="--fs-product-card-skeleton-badge-margin-top"
+    value="var(--fs-product-card-skeleton-text-margin-top)"
+  />
+  <TokenRow
+    token="--fs-product-card-skeleton-badge-max-width"
+    value="var(--fs-product-card-skeleton-content-height)"
+  />
+  <TokenRow
+    token="--fs-product-card-skeleton-badge-min-width-mobile"
+    value="30%"
+  />
+  <TokenRow
+    token="--fs-product-card-skeleton-badge-min-width-tablet"
+    value="var(--fs-product-card-skeleton-content-height)"
+  />
+</TokenTable>
+
+---
+
+## Variants
+
+### Sectioned
+
+<Canvas className="canvas-product-card-skeleton">
+  <Story name="Sectioned" args={{ sectioned: true }}>
+    {TemplateProductCardSkeleton.bind({})}
+  </Story>
+</Canvas>
+
+<TokenTable>
+  <TokenRow
+    token="--fs-product-card-skeleton-sectioned-image-min-width"
+    value="13rem"
+  />
+  <TokenRow
+    token="--fs-product-card-skeleton-sectioned-image-height"
+    value="var(--fs-product-card-skeleton-image-height-desktop)"
+  />
+</TokenTable>
+
+### Bordered
+
+<Canvas className="canvas-product-card-skeleton">
+  <Story name="Bordered" args={{ bordered: true }}>
+    {TemplateProductCardSkeleton.bind({})}
+  </Story>
+</Canvas>
+
+<TokenTable>
+  <TokenRow token="--fs-product-card-skeleton-bordered-mobile" value="none" />
+  <TokenRow
+    token="--fs-product-card-skeleton-bordered-desktop"
+    value="var(--fs-border-width) solid var(--fs-border-color-light)"
+  />
+</TokenTable>
diff --git a/src/components/skeletons/ProductCardSkeleton/ProductCardSkeleton.tsx b/src/components/skeletons/ProductCardSkeleton/ProductCardSkeleton.tsx
index caef0cea..5932df8b 100644
--- a/src/components/skeletons/ProductCardSkeleton/ProductCardSkeleton.tsx
+++ b/src/components/skeletons/ProductCardSkeleton/ProductCardSkeleton.tsx
@@ -1,33 +1,48 @@
 import Shimmer from '../Shimmer'
-import SkeletonElement from '../SkeletonElement'
+import Skeleton from '../Skeleton'
+import styles from './product-card-skeleton.module.scss'
 
-interface Props {
+interface ProductCardSkeletonProps {
+  /**
+   * Specifies if the component should have a preset border.
+   */
   bordered?: boolean
+  /**
+   * Specifies if the component is displayed in a section.
+   */
   sectioned?: boolean
-  showActions?: boolean
-  variant?: 'wide' | 'default'
+  /**
+   * Control whether the button should be displayed.
+   */
+  displayButton?: boolean
+  /**
+   * Specifies the component variant.
+   */
+  variant?: 'default' | 'wide'
 }
 
 function ProductCardSkeleton({
   bordered,
-  sectioned = false,
-  showActions = false,
+  sectioned,
+  displayButton,
   variant = 'default',
-}: Props) {
+}: ProductCardSkeletonProps) {
   return (
     <div
-      data-store-product-card-skeleton
-      data-bordered={bordered}
-      data-variant={variant}
+      className={styles.fsProductCardSkeleton}
+      data-fs-product-card-skeleton
+      data-fs-product-card-skeleton-variant={variant}
+      data-fs-product-card-skeleton-bordered={bordered}
+      data-fs-product-card-skeleton-sectioned={sectioned}
     >
-      <div data-product-card-skeleton-image data-sectioned={sectioned}>
-        <SkeletonElement type="image" />
+      <div data-fs-product-card-skeleton-image>
+        <Skeleton variant="image" />
       </div>
-      <div data-product-card-skeleton-content>
-        <SkeletonElement type="text" />
-        <SkeletonElement type="text" />
-        <SkeletonElement type="badge" />
-        {showActions && <SkeletonElement type="button" />}
+      <div data-fs-product-card-skeleton-content>
+        <Skeleton variant="text" />
+        <Skeleton variant="text" />
+        <Skeleton variant="badge" />
+        {displayButton && <Skeleton variant="button" />}
       </div>
       <Shimmer />
     </div>
diff --git a/src/components/skeletons/ProductCardSkeleton/product-card-skeleton.module.scss b/src/components/skeletons/ProductCardSkeleton/product-card-skeleton.module.scss
new file mode 100644
index 00000000..550b9c24
--- /dev/null
+++ b/src/components/skeletons/ProductCardSkeleton/product-card-skeleton.module.scss
@@ -0,0 +1,97 @@
+@import "src/styles/scaffold";
+
+.fs-product-card-skeleton {
+  // --------------------------------------------------------
+  // Design Tokens for Product Card Skeleton
+  // --------------------------------------------------------
+
+  // Default properties
+  --fs-product-card-skeleton-padding                   : var(--fs-spacing-1) var(--fs-spacing-1) var(--fs-spacing-2);
+  --fs-product-card-skeleton-border-width              : var(--fs-border-width);
+  --fs-product-card-skeleton-border-color              : transparent;
+  --fs-product-card-skeleton-border-radius             : var(--fs-border-radius);
+
+  // Content
+  --fs-product-card-skeleton-content-height            : 20%;
+  --fs-product-card-skeleton-content-margin-top        : var(--fs-spacing-2);
+
+  // Button
+  --fs-product-card-skeleton-button-margin-top         : var(--fs-spacing-4);
+
+  // Text
+  --fs-product-card-skeleton-text-margin-bottom        : var(--fs-product-card-skeleton-content-margin-top);
+
+  // Badge
+  --fs-product-card-skeleton-badge-min-height          : var(--fs-spacing-5);
+  --fs-product-card-skeleton-badge-margin-top          : var(--fs-product-card-skeleton-text-margin-top);
+  --fs-product-card-skeleton-badge-max-width           : var(--fs-product-card-skeleton-content-height);
+  --fs-product-card-skeleton-badge-min-width-mobile    : 30%;
+  --fs-product-card-skeleton-badge-min-width-tablet    : var(--fs-product-card-skeleton-content-height);
+
+  // Sectioned
+  --fs-product-card-skeleton-sectioned-image-min-width : 13rem;
+  --fs-product-card-skeleton-sectioned-image-height    : 12.188rem;
+
+  // Bordered
+  --fs-product-card-skeleton-bordered-mobile           : none;
+  --fs-product-card-skeleton-bordered-desktop          : var(--fs-border-width) solid var(--fs-border-color-light);
+
+  // --------------------------------------------------------
+  // Structural Styles
+  // --------------------------------------------------------
+
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-width: 14vw;
+  height: 100%;
+  padding: var(--fs-product-card-skeleton-padding);
+  overflow: hidden;
+  border: var(--fs-product-card-skeleton-border-width) solid var(--fs-product-card-skeleton-border-color);
+  border-radius: var(--fs-product-card-skeleton-border-radius);
+
+  @include media(">=notebook") { min-width: 12rem; }
+
+  [data-fs-product-card-skeleton-content] {
+    position: relative;
+    height: var(--fs-product-card-skeleton-content-height);
+    margin-top: var(--fs-product-card-skeleton-content-margin-top);
+
+    [data-fs-skeleton-variant="text"] { margin-bottom: var(--fs-product-card-skeleton-text-margin-bottom); }
+
+    [data-fs-skeleton-variant="button"] { margin-top: var(--fs-product-card-skeleton-button-margin-top); }
+
+    [data-fs-skeleton-variant="badge"] {
+      min-width: var(--fs-product-card-skeleton-badge-min-width-mobile);
+
+      @include media(">=notebook") {
+        min-height: var(--fs-product-card-skeleton-badge-min-height);
+        margin-top: var(--fs-product-card-skeleton-badge-margin-top);
+      }
+
+      @include media(">=tablet") {
+        min-width: var(--fs-product-card-skeleton-badge-min-width-tablet);
+        max-width: var(--fs-product-card-skeleton-badge-max-width);
+      }
+    }
+  }
+
+  // --------------------------------------------------------
+  // Variants Styles
+  // --------------------------------------------------------
+
+  &[data-fs-product-card-skeleton-sectioned="true"] {
+    [data-fs-skeleton-variant="image"] {
+      min-width: var(--fs-product-card-skeleton-sectioned-image-min-width);
+      min-height: var(--fs-product-card-skeleton-sectioned-image-height);
+    }
+  }
+
+  &[data-fs-product-card-skeleton-bordered="true"] {
+    border: var(--fs-product-card-skeleton-bordered-mobile);
+
+    @include media(">=notebook") {
+      border: var(--fs-product-card-skeleton-bordered-desktop);
+    }
+  }
+}
diff --git a/src/components/skeletons/ProductCardSkeleton/product-card-skeleton.scss b/src/components/skeletons/ProductCardSkeleton/product-card-skeleton.scss
deleted file mode 100644
index b26a2e8a..00000000
--- a/src/components/skeletons/ProductCardSkeleton/product-card-skeleton.scss
+++ /dev/null
@@ -1,64 +0,0 @@
-@import "src/styles/scaffold";
-
-[data-store-product-card-skeleton] {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  min-width: 14vw;
-  height: 100%;
-  padding: var(--fs-spacing-1) var(--fs-spacing-1) var(--fs-spacing-2);
-  overflow: hidden;
-  border: var(--fs-border-width) solid transparent;
-  border-radius: var(--fs-border-radius);
-
-  @include media(">=notebook") { min-width: 12rem; }
-
-  &[data-bordered="true"] {
-    border: none;
-
-    @include media(">=notebook") {
-      border: var(--fs-border-width) solid var(--fs-border-color-light);
-    }
-  }
-
-  [data-product-card-skeleton-image] {
-    [data-element-variant="image"] {
-      height: 45vw;
-
-      @include media(">=notebook") {
-        height: rem(195px);
-      }
-    }
-
-    &[data-sectioned="true"] {
-      [data-element-variant="image"] {
-        min-width: 13rem;
-        height: rem(195px);
-      }
-    }
-  }
-
-  [data-product-card-skeleton-content] {
-    position: relative;
-    height: 20%;
-    margin-top: var(--fs-spacing-2);
-
-    [data-element-variant="text"] { margin-bottom: var(--fs-spacing-2); }
-
-    [data-element-variant="button"] { margin-top: var(--fs-spacing-4); }
-
-    [data-element-variant="badge"] {
-      min-width: 30%;
-
-      @include media(">=notebook") {
-        min-height: var(--fs-spacing-5);
-        margin-top: var(--fs-spacing-4);
-      }
-
-      @include media(">=tablet") {
-        min-width: 20%;
-        max-width: 20%;
-      }
-    }
-  }
-}
diff --git a/src/components/skeletons/ProductGridSkeleton/ProductGridSkeleton.tsx b/src/components/skeletons/ProductGridSkeleton/ProductGridSkeleton.tsx
index 09ab9a7a..76a30b7d 100644
--- a/src/components/skeletons/ProductGridSkeleton/ProductGridSkeleton.tsx
+++ b/src/components/skeletons/ProductGridSkeleton/ProductGridSkeleton.tsx
@@ -1,17 +1,17 @@
-import { ITEMS_PER_PAGE } from 'src/constants'
 import type { PropsWithChildren } from 'react'
+import { ITEMS_PER_PAGE } from 'src/constants'
 import styles from 'src/components/product/ProductGrid/product-grid.module.scss'
 
 import ProductCardSkeleton from '../ProductCardSkeleton'
 
-interface Props {
+interface ProductGridSkeletonProps {
   loading?: boolean
 }
 
 function ProductGridSkeleton({
   children,
   loading = true,
-}: PropsWithChildren<Props>) {
+}: PropsWithChildren<ProductGridSkeletonProps>) {
   return loading ? (
     <ul className={styles.fsProductGrid}>
       {Array.from({ length: ITEMS_PER_PAGE }, (_, index) => (
diff --git a/src/components/skeletons/ProductShelfSkeleton/ProductShelfSkeleton.tsx b/src/components/skeletons/ProductShelfSkeleton/ProductShelfSkeleton.tsx
index 01205583..3bb48026 100644
--- a/src/components/skeletons/ProductShelfSkeleton/ProductShelfSkeleton.tsx
+++ b/src/components/skeletons/ProductShelfSkeleton/ProductShelfSkeleton.tsx
@@ -1,5 +1,6 @@
-import { ITEMS_PER_SECTION } from 'src/constants'
 import type { PropsWithChildren } from 'react'
+import { ITEMS_PER_SECTION } from 'src/constants'
+import styles from 'src/components/sections/ProductShelf/product-shelf.module.scss'
 
 import ProductCardSkeleton from '../ProductCardSkeleton'
 
@@ -12,7 +13,10 @@ function ProductShelfSkeleton({
   loading = true,
 }: PropsWithChildren<Props>) {
   return loading ? (
-    <ul data-fs-product-shelf-items className="layout__content">
+    <ul
+      data-fs-product-shelf-items
+      className={`layout__content ${styles.fsProductShelf}`}
+    >
       {Array.from({ length: ITEMS_PER_SECTION }, (_, index) => (
         <li key={String(index)}>
           <ProductCardSkeleton sectioned />
diff --git a/src/components/skeletons/ProductTilesSkeleton/ProductTileSkeleton/ProductTileSkeleton.tsx b/src/components/skeletons/ProductTilesSkeleton/ProductTileSkeleton/ProductTileSkeleton.tsx
index 4289ce56..f1dda7be 100644
--- a/src/components/skeletons/ProductTilesSkeleton/ProductTileSkeleton/ProductTileSkeleton.tsx
+++ b/src/components/skeletons/ProductTilesSkeleton/ProductTileSkeleton/ProductTileSkeleton.tsx
@@ -1,37 +1,52 @@
+import Skeleton from 'src/components/skeletons/Skeleton'
 import Shimmer from 'src/components/skeletons/Shimmer'
-import SkeletonElement from 'src/components/skeletons/SkeletonElement'
 
-interface Props {
-  tileIndex: number
+import styles from './product-tile-skeleton.module.scss'
+
+interface ProductTileSkeletonProps {
+  index: number
   bordered?: boolean
   variant?: 'wide' | 'default'
 }
 
 function ProductTileSkeleton({
-  tileIndex,
+  index,
   bordered,
   variant = 'default',
-}: Props) {
+}: ProductTileSkeletonProps) {
   return (
     <div
-      data-store-product-tile-skeleton
-      data-tile-index={tileIndex}
-      data-bordered={bordered}
-      data-variant={variant}
+      data-fs-product-tile-skeleton
+      className={styles.fsProductTileSkeleton}
+      data-fs-product-tile-skeleton-index={index}
+      data-fs-product-tile-skeleton-variant={variant}
+      data-fs-product-tile-skeleton-bordered={bordered}
     >
-      <div data-product-tile-skeleton-image data-tile-index={tileIndex}>
-        <SkeletonElement type="image" />
+      <div
+        data-fs-product-tile-skeleton-image
+        data-fs-product-tile-skeleton-index={index}
+      >
+        <Skeleton variant="image" />
       </div>
-      <div data-product-tile-skeleton-content data-tile-index={tileIndex}>
-        <div data-product-tile-skeleton-text data-tile-index={tileIndex}>
-          <SkeletonElement type="text" />
-          <div data-product-tile-skeleton-price>
-            <SkeletonElement type="text" />
+      <div
+        data-fs-product-tile-skeleton-content
+        data-fs-product-tile-skeleton-index={index}
+      >
+        <div
+          data-fs-product-tile-skeleton-text
+          data-fs-product-tile-skeleton-index={index}
+        >
+          <Skeleton variant="text" />
+          <div data-fs-product-tile-skeleton-price>
+            <Skeleton variant="text" />
           </div>
         </div>
 
-        <div data-product-tile-skeleton-badge data-tile-index={tileIndex}>
-          <SkeletonElement type="badge" />
+        <div
+          data-fs-product-tile-skeleton-badge
+          data-fs-product-tile-skeleton-index={index}
+        >
+          <Skeleton variant="badge" />
         </div>
       </div>
       <Shimmer />
diff --git a/src/components/skeletons/ProductTilesSkeleton/ProductTileSkeleton/product-tile-skeleton.module.scss b/src/components/skeletons/ProductTilesSkeleton/ProductTileSkeleton/product-tile-skeleton.module.scss
new file mode 100644
index 00000000..0ec63cbf
--- /dev/null
+++ b/src/components/skeletons/ProductTilesSkeleton/ProductTileSkeleton/product-tile-skeleton.module.scss
@@ -0,0 +1,218 @@
+@import "src/styles/scaffold";
+
+.fs-product-tile-skeleton {
+  // --------------------------------------------------------
+  // Design Tokens for Product Tile Skeleton
+  // --------------------------------------------------------
+
+  // Image
+  --fs-product-tile-skeleton-image-height-mobile                : 60%;
+  --fs-product-tile-skeleton-image-min-height-mobile            : var(--fs-product-tile-skeleton-image-height-mobile);
+  --fs-product-tile-skeleton-image-height-tablet                : 70%;
+  --fs-product-tile-skeleton-image-min-height-tablet            : var(--fs-product-tile-skeleton-image-height-tablet);
+  --fs-product-tile-skeleton-image-height-desktop               : 80%;
+  --fs-product-tile-skeleton-image-min-height-desktop           : var(--fs-product-tile-skeleton-image-height-desktop);
+  --fs-product-tile-skeleton-image-border-radius                : var(--fs-border-radius) var(--fs-border-radius) 0 0;
+
+  // Content
+  --fs-product-tile-skeleton-content-height-mobile              : 40%;
+  --fs-product-tile-skeleton-content-height-tablet              : 30%;
+  --fs-product-tile-skeleton-content-height-desktop             : 20%;
+  --fs-product-tile-skeleton-content-padding                    : var(--fs-spacing-3);
+  --fs-product-tile-skeleton-content-border-bottom-left-radius  : var(--fs-border-radius);
+  --fs-product-tile-skeleton-content-border-bottom-right-radius : var(--fs-product-tile-skeleton-content-border-bottom-left-radius);
+
+  // Text
+  --fs-product-tile-skeleton-text-width-mobile                  : 70%;
+  --fs-product-tile-skeleton-text-width-tablet                  : 50%;
+  --fs-product-tile-skeleton-text-width-desktop                 : 60%;
+  --fs-product-tile-skeleton-text-margin-bottom                 : var(--fs-spacing-1);
+
+  // Price
+  --fs-product-tile-skeleton-price-width-mobile                 : 60%;
+  --fs-product-tile-skeleton-price-width-tablet                 : 100%;
+
+  // Badge
+  --fs-product-tile-skeleton-badge-width-mobile                 : 20%;
+  --fs-product-tile-skeleton-badge-width-tablet                 : var(--fs-product-tile-skeleton-badge-width-mobile);
+  --fs-product-tile-skeleton-badge-position-right               : var(--fs-product-tile-skeleton-text-margin-bottom);
+
+  // Wide
+  --fs-product-tile-skeleton-wide-padding                       : var(--fs-spacing-2) var(--fs-spacing-3) var(--fs-spacing-3);
+  --fs-product-tile-skeleton-wide-bkg-color                     : var(--fs-color-neutral-bkg);
+
+  // --------------------------------------------------------
+  // Structural Styles
+  // --------------------------------------------------------
+
+  position: relative;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  overflow: hidden;
+
+  &[data-fs-product-tile-skeleton-index="1"] {
+    min-width: 9rem;
+    height: 24rem;
+
+    @include media(">=tablet") { height: 28rem; }
+  }
+
+  [data-fs-product-tile-skeleton-image] {
+    height: var(--fs-product-tile-skeleton-image-height-mobile);
+    min-height: var(--fs-product-tile-skeleton-image-min-height-mobile);
+    border-radius: var(--fs-product-tile-skeleton-image-border-radius);
+
+    @include media(">=tablet") {
+      height: var(--fs-product-tile-skeleton-image-height-tablet);
+      min-height: var(--fs-product-tile-skeleton-image-min-height-tablet);
+    }
+
+    @include media(">=notebook") {
+      height: var(--fs-product-tile-skeleton-image-height-desktop);
+      min-height: var(--fs-product-tile-skeleton-image-min-height-desktop);
+    }
+
+    &[data-fs-product-tile-skeleton-index="1"] {
+      height: 80%;
+
+      @include media(">=tablet") {
+        height: 70%;
+        min-height: 70%;
+      }
+
+      @include media(">=notebook") {
+        height: 80%;
+        min-height: 80%;
+      }
+    }
+
+    [data-fs-skeleton-wrapper] { height: 100%; }
+
+    [data-fs-skeleton-variant="image"] {
+      width: 100%;
+      height: 100%;
+      border-bottom-right-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+  }
+
+  [data-fs-product-tile-skeleton-content] {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    height: var(--fs-product-tile-skeleton-content-height-mobile);
+    padding: var(--fs-product-tile-skeleton-content-padding);
+    border-bottom-right-radius: var(--fs-product-tile-skeleton-content-border-bottom-right-radius);
+    border-bottom-left-radius: var(--fs-product-tile-skeleton-content-border-bottom-left-radius);
+
+    @include media(">=tablet") {
+      flex-flow: row wrap;
+      height: var(--fs-product-tile-skeleton-content-height-tablet);
+    }
+
+    @include media(">=notebook") {
+      flex-flow: row wrap;
+      height: var(--fs-product-tile-skeleton-content-height-desktop);
+    }
+
+    &[data-fs-product-tile-skeleton-index="1"] {
+      height: 20%;
+      padding: var(--fs-spacing-2) var(--fs-spacing-3);
+
+      @include media(">=tablet") {
+        flex-flow: row wrap;
+        height: 30%;
+      }
+
+      @include media(">=notebook") { height: 20%; }
+    }
+
+    [data-fs-product-tile-skeleton-text] {
+      width: var(--fs-product-tile-skeleton-text-width-mobile);
+
+      @include media(">=tablet") {
+        width: var(--fs-product-tile-skeleton-text-width-tablet);
+
+        &[data-fs-product-tile-skeleton-index="2"],
+        &[data-fs-product-tile-skeleton-index="3"] { width: 100%; }
+      }
+
+      @include media(">=notebook") {
+        width: var(--fs-product-tile-skeleton-text-width-desktop);
+
+        &[data-fs-product-tile-skeleton-index="2"],
+        &[data-fs-product-tile-skeleton-index="3"] { width: 60%; }
+      }
+
+      [data-fs-skeleton-variant="text"] {
+        margin-bottom: var(--fs-product-tile-skeleton-text-margin-bottom);
+      }
+
+      [data-fs-product-tile-skeleton-price] {
+        width: var(--fs-product-tile-skeleton-price-width-mobile);
+
+        @include media(">=tablet") { width: var(--fs-product-tile-skeleton-price-width-tablet); }
+      }
+    }
+
+    [data-fs-product-tile-skeleton-badge] {
+      position: absolute;
+      right: var(--fs-product-tile-skeleton-badge-position-right);
+      width: var(--fs-product-tile-skeleton-badge-width-mobile);
+
+      @include media(">=tablet") { width: var(--fs-product-tile-skeleton-badge-width-tablet); }
+
+      &[data-fs-product-tile-skeleton-index="2"],
+      &[data-fs-product-tile-skeleton-index="3"] {
+        bottom: var(--fs-spacing-2);
+        left: var(--fs-spacing-3);
+        width: 30%;
+
+        @include media(">=tablet") {
+          position: relative;
+          bottom: 0;
+          left: var(--fs-spacing-2);
+          width: 50%;
+        }
+
+        @include media(">=notebook") {
+          position: absolute;
+          right: var(--fs-spacing-1);
+          bottom: unset;
+          left: unset;
+          width: 30%;
+        }
+      }
+
+      [data-fs-skeleton-variant="badge"] {
+        width: 100%;
+        height: var(--fs-spacing-4);
+
+        @include media(">=tablet") {
+          position: absolute;
+          right: var(--fs-spacing-1);
+        }
+
+        @include media(">=notebook") {
+          position: relative;
+          right: var(--fs-spacing-0);
+        }
+      }
+    }
+  }
+
+  // --------------------------------------------------------
+  // Variants Styles
+  // --------------------------------------------------------
+
+  &[data-fs-product-tile-skeleton-variant="wide"] {
+    [data-fs-product-tile-skeleton-content] {
+      background-color: var(--fs-product-tile-skeleton-wide-bkg-color);
+
+      @include media(">=tablet") {
+        padding: var(--fs-product-tile-skeleton-wide-padding);
+      }
+    }
+  }
+}
diff --git a/src/components/skeletons/ProductTilesSkeleton/ProductTileSkeleton/product-tile-skeleton.scss b/src/components/skeletons/ProductTilesSkeleton/ProductTileSkeleton/product-tile-skeleton.scss
deleted file mode 100644
index 25153ce4..00000000
--- a/src/components/skeletons/ProductTilesSkeleton/ProductTileSkeleton/product-tile-skeleton.scss
+++ /dev/null
@@ -1,170 +0,0 @@
-@import "src/styles/scaffold";
-
-[data-store-product-tile-skeleton] {
-  position: relative;
-  width: 100%;
-  min-width: 100%;
-  max-width: 100%;
-  height: 100%;
-  padding: 0;
-  overflow: hidden;
-
-  &[data-tile-index="1"] {
-    min-width: 9rem;
-    height: 24rem;
-
-    @include media(">=tablet") { height: 28rem; }
-  }
-
-  &[data-variant="wide"] {
-    [data-product-tile-skeleton-content] {
-      background-color: var(--fs-color-neutral-bkg);
-
-      @include media(">=tablet") {
-        padding: var(--fs-spacing-2) var(--fs-spacing-3) var(--fs-spacing-3);
-      }
-    }
-  }
-
-  [data-product-tile-skeleton-image] {
-    height: 60%;
-    min-height: 60%;
-    border-radius: var(--fs-border-radius) var(--fs-border-radius) 0 0;
-
-    @include media(">=tablet") {
-      height: 70%;
-      min-height: 70%;
-    }
-
-    @include media(">=notebook") {
-      height: 80%;
-      min-height: 80%;
-    }
-
-    &[data-tile-index="1"] {
-      height: 80%;
-
-      @include media(">=tablet") {
-        height: 70%;
-        min-height: 70%;
-      }
-
-      @include media(">=notebook") {
-        height: 80%;
-        min-height: 80%;
-      }
-    }
-
-    [data-store-skeleton-element] { height: 100%; }
-
-    [data-element-variant="image"] {
-      width: 100%;
-      height: 100%;
-      border-bottom-right-radius: 0;
-      border-bottom-left-radius: 0;
-    }
-  }
-
-  [data-product-tile-skeleton-content] {
-    display: flex;
-    flex-direction: row;
-    align-items: flex-start;
-    height: 40%;
-    padding: var(--fs-spacing-3);
-    border-bottom-right-radius: var(--fs-border-radius);
-    border-bottom-left-radius: var(--fs-border-radius);
-
-    @include media(">=tablet") {
-      flex-flow: row wrap;
-      height: 30%;
-    }
-
-    @include media(">=notebook") {
-      flex-flow: row wrap;
-      height: 20%;
-    }
-
-    &[data-tile-index="1"] {
-      height: 20%;
-      padding: var(--fs-spacing-2) var(--fs-spacing-3);
-
-      @include media(">=tablet") {
-        flex-flow: row wrap;
-        height: 30%;
-      }
-
-      @include media(">=notebook") { height: 20%; }
-    }
-
-    [data-product-tile-skeleton-text] {
-      width: 70%;
-
-      @include media(">=tablet") {
-        width: 50%;
-
-        &[data-tile-index="2"],
-        &[data-tile-index="3"] { width: 100%; }
-      }
-
-      @include media(">=notebook") {
-        width: 60%;
-
-        &[data-tile-index="2"],
-        &[data-tile-index="3"] { width: 60%; }
-      }
-
-      [data-element-variant="text"] { margin-bottom: var(--fs-spacing-1); }
-
-      [data-product-tile-skeleton-price] {
-        width: 60%;
-
-        @include media(">=tablet") { width: 100%; }
-      }
-    }
-
-    [data-product-tile-skeleton-badge] {
-      position: absolute;
-      right: var(--fs-spacing-1);
-      width: 20%;
-
-      @include media(">=tablet") { width: 20%; }
-
-      &[data-tile-index="2"],
-      &[data-tile-index="3"] {
-        bottom: var(--fs-spacing-2);
-        left: var(--fs-spacing-3);
-        width: 30%;
-
-        @include media(">=tablet") {
-          position: relative;
-          bottom: 0;
-          left: var(--fs-spacing-2);
-          width: 50%;
-        }
-
-        @include media(">=notebook") {
-          position: absolute;
-          right: var(--fs-spacing-1);
-          bottom: unset;
-          left: unset;
-          width: 30%;
-        }
-      }
-
-      [data-element-variant="badge"] {
-        width: 100%;
-        height: var(--fs-spacing-4);
-
-        @include media(">=tablet") {
-          position: absolute;
-          right: var(--fs-spacing-1);
-        }
-
-        @include media(">=notebook") {
-          position: relative;
-          right: var(--fs-spacing-0);
-        }
-      }
-    }
-  }
-}
diff --git a/src/components/skeletons/ProductTilesSkeleton/ProductTilesSkeleton.tsx b/src/components/skeletons/ProductTilesSkeleton/ProductTilesSkeleton.tsx
index efaf0492..15d3d526 100644
--- a/src/components/skeletons/ProductTilesSkeleton/ProductTilesSkeleton.tsx
+++ b/src/components/skeletons/ProductTilesSkeleton/ProductTilesSkeleton.tsx
@@ -1,12 +1,12 @@
 import type { PropsWithChildren } from 'react'
 import Tiles, { Tile } from 'src/components/ui/Tiles'
 
-import ProductTileSkeleton from './ProductTileSkeleton'
+import { ProductTileSkeleton } from '.'
 
 // TODO: // Replace it when items number become dynamically defined
 const DEFAULT_ITEMS_NUMBER = 3
 
-interface Props {
+interface ProductTilesSkeletonProps {
   loading?: boolean
   variant?: 'wide' | 'default'
 }
@@ -15,12 +15,12 @@ function ProductTilesSkeleton({
   children,
   loading = true,
   variant = 'default',
-}: PropsWithChildren<Props>) {
+}: PropsWithChildren<ProductTilesSkeletonProps>) {
   return loading ? (
     <Tiles>
       {Array.from({ length: DEFAULT_ITEMS_NUMBER }, (_, index) => (
         <Tile key={String(index)}>
-          <ProductTileSkeleton tileIndex={index + 1} variant={variant} />
+          <ProductTileSkeleton index={index + 1} variant={variant} />
         </Tile>
       ))}
     </Tiles>
diff --git a/src/components/skeletons/ProductTilesSkeleton/index.ts b/src/components/skeletons/ProductTilesSkeleton/index.ts
index 556abc08..2c291ac1 100644
--- a/src/components/skeletons/ProductTilesSkeleton/index.ts
+++ b/src/components/skeletons/ProductTilesSkeleton/index.ts
@@ -1 +1,2 @@
 export { default } from './ProductTilesSkeleton'
+export { default as ProductTileSkeleton } from './ProductTileSkeleton'
diff --git a/src/components/skeletons/Shimmer/Shimmer.tsx b/src/components/skeletons/Shimmer/Shimmer.tsx
index 5213d98a..172fe1cd 100644
--- a/src/components/skeletons/Shimmer/Shimmer.tsx
+++ b/src/components/skeletons/Shimmer/Shimmer.tsx
@@ -1,7 +1,9 @@
+import styles from './shimmer.module.scss'
+
 function Shimmer() {
   return (
-    <div data-store-shimmer>
-      <div data-shimmer />
+    <div className={styles.fsShimmer} data-fs-shimmer-wrapper>
+      <div data-fs-shimmer />
     </div>
   )
 }
diff --git a/src/components/skeletons/Shimmer/shimmer.module.scss b/src/components/skeletons/Shimmer/shimmer.module.scss
new file mode 100644
index 00000000..d1b00280
--- /dev/null
+++ b/src/components/skeletons/Shimmer/shimmer.module.scss
@@ -0,0 +1,43 @@
+.fs-shimmer {
+  // --------------------------------------------------------
+  // Design Tokens for Shimmer
+  // --------------------------------------------------------
+
+  // Default properties
+  --fs-shimmer-wrapper-transition-timing    : 850ms;
+  --fs-shimmer-wrapper-transition-function  : linear;
+  --fs-shimmer-wrapper-transition-iteration : infinite;
+
+  // Shimmer
+  --fs-shimmer-width                        : 50%;
+  --fs-shimmer-height                       : 100%;
+  --fs-shimmer-bkg-color                    : rgb(255 255 255 / 20%);
+  --fs-shimmer-box-shadow                   : 0 0 var(--fs-spacing-5) var(--fs-spacing-5) rgb(255 255 255 / 20%);
+
+  // --------------------------------------------------------
+  // Structural Styles
+  // --------------------------------------------------------
+
+  /*
+   * Parent must have `position: relative` and `overflow: hidden`
+   * in order to the effect to work properly.
+   */
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100%;
+  animation: loading var(--fs-shimmer-wrapper-transition-timing) var(--fs-shimmer-wrapper-transition-iteration) var(--fs-shimmer-wrapper-transition-function);
+
+  [data-fs-shimmer] {
+    width: var(--fs-shimmer-width);
+    height: var(--fs-shimmer-height);
+    background: var(--fs-shimmer-bkg-color);
+    box-shadow: var(--fs-shimmer-box-shadow);
+  }
+}
+
+@keyframes loading {
+  0% { transform: translate3d(-50vw, 0, 0); }
+  100% { transform: translate3d(0, 0, 0); }
+}
diff --git a/src/components/skeletons/Shimmer/shimmer.scss b/src/components/skeletons/Shimmer/shimmer.scss
deleted file mode 100644
index 873079cf..00000000
--- a/src/components/skeletons/Shimmer/shimmer.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-[data-store-shimmer] {
-  /*
-   * Parent must have `position: relative` and `overflow: hidden`
-   * in order to the effect to work properly.
-   */
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100%;
-  animation: loading 800ms infinite linear;
-
-  [data-shimmer] {
-    width: 50%;
-    height: 100%;
-    background: rgb(255 255 255 / 20%);
-    box-shadow: 0 0 var(--fs-spacing-5) var(--fs-spacing-5) rgb(255 255 255 / 20%);
-  }
-}
-
-@keyframes loading {
-  0% { transform: translate3d(-50vw, 0, 0); }
-  100% { transform: translate3d(0, 0, 0); }
-}
diff --git a/src/components/skeletons/Skeleton/Skeleton.tsx b/src/components/skeletons/Skeleton/Skeleton.tsx
new file mode 100644
index 00000000..02e013e6
--- /dev/null
+++ b/src/components/skeletons/Skeleton/Skeleton.tsx
@@ -0,0 +1,49 @@
+import type { PropsWithChildren } from 'react'
+import { Skeleton as UISkeleton } from '@faststore/ui'
+
+import Shimmer from '../Shimmer'
+import styles from './skeleton.module.scss'
+
+type Variant = 'text' | 'button' | 'image' | 'badge'
+
+interface SkeletonProps {
+  /**
+   * Control whether skeleton should be visible or not.
+   */
+  loading?: boolean
+  /**
+   * Control whether the shimmer effect should be displayed or not.
+   */
+  shimmer?: boolean
+  /**
+   * Specifies the skeleton element variant.
+   */
+  variant: Variant
+}
+
+function Skeleton({
+  variant,
+  children,
+  loading = true,
+  shimmer = false,
+  ...otherProps
+}: PropsWithChildren<SkeletonProps>) {
+  return loading ? (
+    <div
+      data-fs-skeleton-wrapper
+      className={styles.fsSkeleton}
+      data-fs-skeleton-shimmer={shimmer}
+    >
+      <UISkeleton
+        data-fs-skeleton
+        data-fs-skeleton-variant={variant}
+        {...otherProps}
+      />
+      {shimmer && <Shimmer />}
+    </div>
+  ) : (
+    <>{children}</>
+  )
+}
+
+export default Skeleton
diff --git a/src/components/skeletons/Skeleton/index.ts b/src/components/skeletons/Skeleton/index.ts
new file mode 100644
index 00000000..3ec6c003
--- /dev/null
+++ b/src/components/skeletons/Skeleton/index.ts
@@ -0,0 +1 @@
+export { default } from './Skeleton'
diff --git a/src/components/skeletons/Skeleton/skeleton.module.scss b/src/components/skeletons/Skeleton/skeleton.module.scss
new file mode 100644
index 00000000..173846be
--- /dev/null
+++ b/src/components/skeletons/Skeleton/skeleton.module.scss
@@ -0,0 +1,77 @@
+@import "src/styles/scaffold";
+
+.fs-skeleton {
+  // --------------------------------------------------------
+  // Design Tokens for Skeleton
+  // --------------------------------------------------------
+
+  // Default properties
+  --fs-skeleton-bkg-color            : var(--fs-color-disabled-bkg);
+  --fs-skeleton-border-radius        : var(--fs-border-radius);
+
+  // Text
+  --fs-skeleton-text-width           : 100%;
+  --fs-skeleton-text-height          : var(--fs-spacing-4);
+
+  // Button
+  --fs-skeleton-button-width         : var(--fs-spacing-13);
+  --fs-skeleton-button-height        : var(--fs-spacing-5);
+  --fs-skeleton-button-gap           : var(--fs-spacing-2);
+  --fs-skeleton-button-border-radius : var(--fs-skeleton-border-radius);
+
+  // Image
+  --fs-skeleton-image-height-mobile  : 45vw;
+  --fs-skeleton-image-height-desktop : 12.188rem;
+  --fs-skeleton-image-border-radius  : var(--fs-skeleton-border-radius);
+
+  // Badge
+  --fs-skeleton-badge-width          : 40%;
+  --fs-skeleton-badge-height         : var(--fs-spacing-5);
+  --fs-skeleton-badge-border-radius  : var(--fs-border-radius-pill);
+
+  // --------------------------------------------------------
+  // Structural Styles
+  // --------------------------------------------------------
+
+  &[data-fs-skeleton-shimmer="true"] {
+    position: relative;
+    overflow: hidden;
+  }
+
+  [data-fs-skeleton] {
+    overflow: hidden;
+    background: var(--fs-skeleton-bkg-color);
+    border-radius: var(--fs-skeleton-border-radius);
+
+    // --------------------------------------------------------
+    // Variants Styles
+    // --------------------------------------------------------
+
+    &[data-fs-skeleton-variant="text"] {
+      width: var(--fs-skeleton-text-width);
+      height: var(--fs-skeleton-text-height);
+    }
+
+    &[data-fs-skeleton-variant="button"] {
+      column-gap: var(--fs-skeleton-button-gap);
+      width: var(--fs-skeleton-button-width);
+      height: var(--fs-skeleton-button-height);
+      border-radius: var(--fs-skeleton-button-border-radius);
+    }
+
+    &[data-fs-skeleton-variant="image"] {
+      height: var(--fs-skeleton-image-height-mobile);
+      border-radius: var(--fs-skeleton-image-border-radius);
+
+      @include media(">=notebook") {
+        height: var(--fs-skeleton-image-height-desktop);
+      }
+    }
+
+    &[data-fs-skeleton-variant="badge"] {
+      width: var(--fs-skeleton-badge-width);
+      height: var(--fs-skeleton-badge-height);
+      border-radius: var(--fs-skeleton-badge-border-radius);
+    }
+  }
+}
diff --git a/src/components/skeletons/SkeletonElement/SkeletonElement.tsx b/src/components/skeletons/SkeletonElement/SkeletonElement.tsx
deleted file mode 100644
index 3b250550..00000000
--- a/src/components/skeletons/SkeletonElement/SkeletonElement.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import type { PropsWithChildren } from 'react'
-
-import Shimmer from '../Shimmer'
-
-type ElementVariant = 'text' | 'button' | 'image' | 'badge'
-
-interface Props {
-  loading?: boolean
-  shimmer?: boolean
-  type: ElementVariant
-}
-
-function SkeletonElement({
-  type,
-  children,
-  loading = true,
-  shimmer = false,
-}: PropsWithChildren<Props>) {
-  return loading ? (
-    <div data-store-skeleton-element data-shimmer={shimmer}>
-      <div data-skeleton-element-content data-element-variant={type} />
-      {shimmer && <Shimmer />}
-    </div>
-  ) : (
-    <>{children}</>
-  )
-}
-
-export default SkeletonElement
diff --git a/src/components/skeletons/SkeletonElement/index.ts b/src/components/skeletons/SkeletonElement/index.ts
deleted file mode 100644
index 762fcb8f..00000000
--- a/src/components/skeletons/SkeletonElement/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './SkeletonElement'
diff --git a/src/components/skeletons/SkeletonElement/skeleton-element.scss b/src/components/skeletons/SkeletonElement/skeleton-element.scss
deleted file mode 100644
index b9b8e925..00000000
--- a/src/components/skeletons/SkeletonElement/skeleton-element.scss
+++ /dev/null
@@ -1,34 +0,0 @@
-[data-store-skeleton-element] {
-  &[data-shimmer="true"] {
-    position: relative;
-    overflow: hidden;
-  }
-
-  [data-skeleton-element-content] {
-    overflow: hidden;
-    background: var(--fs-color-disabled-bkg);
-    border-radius: var(--fs-border-radius);
-
-    &[data-element-variant="text"] {
-      width: 100%;
-      height: var(--fs-spacing-4);
-    }
-
-    &[data-element-variant="button"] {
-      column-gap: var(--fs-spacing-2);
-      width: var(--fs-spacing-13);
-      min-height: var(--fs-spacing-5);
-      border-radius: var(--fs-border-radius);
-    }
-
-    &[data-element-variant="image"] {
-      border-radius: var(--fs-border-radius);
-    }
-
-    &[data-element-variant="badge"] {
-      width: 40%;
-      height: var(--fs-spacing-5);
-      border-radius: var(--fs-border-radius-pill);
-    }
-  }
-}
diff --git a/src/components/skeletons/Skeletons.stories.mdx b/src/components/skeletons/Skeletons.stories.mdx
new file mode 100644
index 00000000..63be1a3f
--- /dev/null
+++ b/src/components/skeletons/Skeletons.stories.mdx
@@ -0,0 +1,178 @@
+import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
+
+import { TokenTable, TokenRow } from 'src/../.storybook/components'
+import { SectionList, SectionItem } from 'src/../.storybook/components'
+
+import Skeleton from './Skeleton'
+import FilterSkeleton from './FilterSkeleton'
+import ProductCardSkeleton from './ProductCardSkeleton'
+
+import Icon from 'src/components/ui/Icon'
+import ButtonLink from 'src/components/ui/Icon'
+
+export const TemplateSkeleton = ({ ...args }) => <Skeleton {...args} />
+
+<Meta
+  component={Skeleton}
+  title="Features/Skeletons/Overview"
+  argTypes={{
+    loading: {
+      control: 'boolean',
+      table: { type: 'boolean', summary: true },
+    },
+    shimmer: {
+      control: 'boolean',
+      table: { type: 'boolean', summary: false },
+    },
+  }}
+/>
+
+<header>
+
+# Skeletons
+
+This feature improves the store's experience and perceived performance through loading placeholders.
+
+</header>
+
+## Overview
+
+`Skeletons` are like an element's or section's wireframe. It's a placeholder
+that simulates the layout of these elements/sections while data is being loaded.
+
+Instead of showing a blank page, displaying `Skeletons` while loading content makes the user feel like the store is more responsive and faster.
+
+Also by using `Skeletons` the store will be less likely to experience [Cumulative Layout Shilf (or CLS)](https://web.dev/i18n/en/cls/).
+
+---
+
+## Usage
+
+The `Skeleton` component is used as placeholder for the primitive elements (e.g. texts, buttons), being part of the related components.
+
+`import Skeleton from 'src/components/skeletons/Skeleton'`
+
+<Canvas className="canvas-skeletons">
+  <Story name="Usage" args={{ loading: true, shimmer: false, variant: 'text' }}>
+    {TemplateSkeleton.bind({})}
+  </Story>
+</Canvas>
+
+<ArgsTable story="Usage" />
+
+<TokenTable>
+  <TokenRow
+    token="--fs-skeleton-bkg-color"
+    value="var(--fs-color-disabled-bkg)"
+    isColor
+  />
+  <TokenRow
+    token="--fs-skeleton-border-radius"
+    value="var(--fs-border-radius)"
+  />
+</TokenTable>
+
+---
+
+## Variants
+
+### Text
+
+<Canvas className="canvas-skeletons">
+  <Story name="Text" args={{ loading: true, shimmer: true, variant: 'text' }}>
+    {TemplateSkeleton.bind({})}
+  </Story>
+</Canvas>
+
+<TokenTable>
+  <TokenRow token="--fs-skeleton-text-width" value="100%" />
+  <TokenRow token="--fs-skeleton-text-height" value="var(--fs-spacing-4)" />
+</TokenTable>
+
+### Button
+
+<Canvas className="canvas-skeletons">
+  <Story
+    name="Button"
+    args={{ loading: true, shimmer: true, variant: 'button' }}
+  >
+    {TemplateSkeleton.bind({})}
+  </Story>
+</Canvas>
+
+<TokenTable>
+  <TokenRow token="--fs-skeleton-button-width" value="var(--fs-spacing-13)" />
+  <TokenRow token="--fs-skeleton-button-height" value="var(--fs-spacing-5)" />
+  <TokenRow token="--fs-skeleton-button-gap" value="var(--fs-spacing-2)" />
+  <TokenRow
+    token="--fs-skeleton-button-border-radius"
+    value="var(--fs-skeleton-border-radius)"
+  />
+</TokenTable>
+
+### Image
+
+<Canvas className="canvas-skeletons">
+  <Story name="Image" args={{ loading: true, shimmer: true, variant: 'image' }}>
+    {TemplateSkeleton.bind({})}
+  </Story>
+</Canvas>
+
+<TokenTable>
+  <TokenRow token="--fs-skeleton-image-height-mobile" value="45vw" />
+  <TokenRow token="--fs-skeleton-image-height-desktop" value="12.188rem" />
+  <TokenRow
+    token="--fs-skeleton-image-border-radius"
+    value="var(--fs-skeleton-border-radius)"
+  />
+</TokenTable>
+
+### Badge
+
+<Canvas className="canvas-skeletons">
+  <Story name="Badge" args={{ loading: true, shimmer: true, variant: 'badge' }}>
+    {TemplateSkeleton.bind({})}
+  </Story>
+</Canvas>
+
+<TokenTable>
+  <TokenRow token="--fs-skeleton-badge-height-mobile" value="45%" />
+  <TokenRow
+    token="--fs-skeleton-badge-height-desktop"
+    value="var(--fs-spacing-5)"
+  />
+  <TokenRow
+    token="--fs-skeleton-badge-border-radius"
+    value="var(--fs-skeleton-border-radius)"
+  />
+</TokenTable>
+
+---
+
+## Components
+
+<SectionList grid="grid" classes="sbdocs-skeletons">
+  <SectionItem
+    title="Filter Skeleton"
+    actionPath="../?path=/docs/features-skeletons-filterskeleton--usage"
+    description={
+      <>
+        Loading placeholder for the <code>Filter</code> used in PLP.
+      </>
+    }
+  >
+    <FilterSkeleton loading />
+  </SectionItem>
+  <SectionItem
+    title="Product Card Skeleton"
+    actionPath="../?path=/docs/features-skeletons-productcardskeleton--usage"
+    description={
+      <>
+        Loading placeholder for the <code>ProductCard</code> used in several
+        sections of the store.
+      </>
+    }
+  >
+    <ProductCardSkeleton variant="wide" displayButton />
+  </SectionItem>
+</SectionList>
diff --git a/src/styles/global/storybook-components.scss b/src/styles/global/storybook-components.scss
index da7001ec..5811a50f 100644
--- a/src/styles/global/storybook-components.scss
+++ b/src/styles/global/storybook-components.scss
@@ -10,17 +10,9 @@
 @import "src/components/sections/Breadcrumb/breadcrumb.scss";
 @import "src/components/sections/Hero/hero.scss";
 @import "src/components/sections/ProductDetails/product-details.scss";
-@import "src/components/sections/ProductShelf/product-shelf.scss";
 @import "src/components/sections/ScrollToTopButton/scroll-to-top-button.scss";
 @import "src/components/sections/Section/section.scss";
 
-// Skeletons
-@import "src/components/skeletons/FilterSkeleton/filter-skeleton.scss";
-@import "src/components/skeletons/ProductCardSkeleton/product-card-skeleton.scss";
-@import "src/components/skeletons/ProductTilesSkeleton/ProductTileSkeleton/product-tile-skeleton.scss";
-@import "src/components/skeletons/Shimmer/shimmer.scss";
-@import "src/components/skeletons/SkeletonElement/skeleton-element.scss";
-
 // UI
 @import "src/components/ui/Badge/badge.scss";
 @import "src/components/ui/InputText/input-text.scss";
diff --git a/src/styles/pages/homepage.scss b/src/styles/pages/homepage.scss
index a245bd8f..e0362e41 100644
--- a/src/styles/pages/homepage.scss
+++ b/src/styles/pages/homepage.scss
@@ -1,11 +1,4 @@
 // Sections
 @import "src/components/sections/BannerText/banner-text.scss";
 @import "src/components/sections/Hero/hero.scss";
-@import "src/components/sections/ProductShelf/product-shelf.scss";
 @import "src/components/sections/Section/section.scss";
-
-// Skeletons
-@import "src/components/skeletons/ProductCardSkeleton/product-card-skeleton.scss";
-@import "src/components/skeletons/ProductTilesSkeleton/ProductTileSkeleton/product-tile-skeleton.scss";
-@import "src/components/skeletons/Shimmer/shimmer.scss";
-@import "src/components/skeletons/SkeletonElement/skeleton-element.scss";
diff --git a/src/styles/pages/pdp.scss b/src/styles/pages/pdp.scss
index c583848e..264fdc02 100644
--- a/src/styles/pages/pdp.scss
+++ b/src/styles/pages/pdp.scss
@@ -1,9 +1,3 @@
 // Sections
 @import "src/components/sections/ProductDetails/product-details.scss";
-@import "src/components/sections/ProductShelf/product-shelf.scss";
 @import "src/components/sections/Section/section.scss";
-
-// Skeletons
-@import "src/components/skeletons/ProductCardSkeleton/product-card-skeleton.scss";
-@import "src/components/skeletons/Shimmer/shimmer.scss";
-@import "src/components/skeletons/SkeletonElement/skeleton-element.scss";
diff --git a/src/styles/pages/plp.scss b/src/styles/pages/plp.scss
index c2f91955..b2cd2276 100644
--- a/src/styles/pages/plp.scss
+++ b/src/styles/pages/plp.scss
@@ -1,12 +1,5 @@
 // Sections
 @import "src/components/sections/Breadcrumb/breadcrumb.scss";
 @import "src/components/sections/Hero/hero.scss";
-@import "src/components/sections/ProductShelf/product-shelf.scss";
 @import "src/components/sections/ScrollToTopButton/scroll-to-top-button.scss";
 @import "src/components/sections/Section/section.scss";
-
-// Skeletons
-@import "src/components/skeletons/FilterSkeleton/filter-skeleton.scss";
-@import "src/components/skeletons/ProductCardSkeleton/product-card-skeleton.scss";
-@import "src/components/skeletons/Shimmer/shimmer.scss";
-@import "src/components/skeletons/SkeletonElement/skeleton-element.scss";
diff --git a/src/styles/pages/search.scss b/src/styles/pages/search.scss
index 12b613f9..fe05f342 100644
--- a/src/styles/pages/search.scss
+++ b/src/styles/pages/search.scss
@@ -1,9 +1,3 @@
 // Sections
 @import "src/components/sections/Breadcrumb/breadcrumb.scss";
 @import "src/components/sections/Section/section.scss";
-
-// Skeletons
-@import "src/components/skeletons/FilterSkeleton/filter-skeleton.scss";
-@import "src/components/skeletons/ProductCardSkeleton/product-card-skeleton.scss";
-@import "src/components/skeletons/Shimmer/shimmer.scss";
-@import "src/components/skeletons/SkeletonElement/skeleton-element.scss";