diff --git a/web-components/packages/carbon-web-components/.storybook/main.ts b/web-components/packages/carbon-web-components/.storybook/main.ts
index 50b8e33defe9..c11b69c19395 100644
--- a/web-components/packages/carbon-web-components/.storybook/main.ts
+++ b/web-components/packages/carbon-web-components/.storybook/main.ts
@@ -26,6 +26,10 @@ const stories = glob.sync(
     '../src/**/file-uploader.stories.ts',
     '../src/**/overflow-menu.mdx',
     '../src/**/overflow-menu.stories.ts',
+    '../src/**/skeleton-placeholder.mdx',
+    '../src/**/skeleton-placeholder.stories.ts',
+    '../src/**/skeleton-text.mdx',
+    '../src/**/skeleton-text.stories.ts',
     '../src/**/skip-to-content.mdx',
     '../src/**/skip-to-content.stories.ts',
     '../src/**/slider.mdx',
diff --git a/web-components/packages/carbon-web-components/src/components/skeleton-placeholder/skeleton-placeholder-story.ts b/web-components/packages/carbon-web-components/src/components/skeleton-placeholder/skeleton-placeholder-story.ts
deleted file mode 100644
index 9cb37821bdf0..000000000000
--- a/web-components/packages/carbon-web-components/src/components/skeleton-placeholder/skeleton-placeholder-story.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2019, 2023
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { html } from 'lit';
-import './skeleton-placeholder';
-import storyDocs from './skeleton-placeholder-story.mdx';
-
-export const Default = () =>
-  html`<cds-skeleton-placeholder></cds-skeleton-placeholder>`;
-
-Default.storyName = 'Default';
-
-Default.parameters = {
-  percy: {
-    skip: true,
-  },
-};
-
-export default {
-  title: 'Components/Skeleton/Skeleton placeholder',
-  parameters: {
-    ...storyDocs.parameters,
-  },
-};
diff --git a/web-components/packages/carbon-web-components/src/components/skeleton-placeholder/skeleton-placeholder-story.mdx b/web-components/packages/carbon-web-components/src/components/skeleton-placeholder/skeleton-placeholder.mdx
similarity index 72%
rename from web-components/packages/carbon-web-components/src/components/skeleton-placeholder/skeleton-placeholder-story.mdx
rename to web-components/packages/carbon-web-components/src/components/skeleton-placeholder/skeleton-placeholder.mdx
index fcb3bf9676e9..ef10759a074e 100644
--- a/web-components/packages/carbon-web-components/src/components/skeleton-placeholder/skeleton-placeholder-story.mdx
+++ b/web-components/packages/carbon-web-components/src/components/skeleton-placeholder/skeleton-placeholder.mdx
@@ -1,5 +1,8 @@
-import { Props, Description } from '@storybook/addon-docs/blocks';
+import { ArgsTable, Meta, Markdown } from '@storybook/addon-docs/blocks';
 import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
+import * as SkeletonPlaceholderStories from './skeleton-placeholder.stories';
+
+<Meta of={SkeletonPlaceholderStories} />
 
 # Skeleton placeholder
 
@@ -19,8 +22,8 @@ Here's a quick example to get you started.
 import '@carbon/web-components/es/components/skeleton-placeholder/index.js';
 ```
 
-<Description markdown={`${cdnJs({ components: ['skeleton-placeholder'] })}`} />
-<Description markdown={`${cdnCss()}`} />
+<Markdown>{`${cdnJs({ components: ['skeleton-placeholder'] })}`}</Markdown>
+<Markdown>{`${cdnCss()}`}</Markdown>
 
 ### HTML
 
@@ -30,4 +33,4 @@ import '@carbon/web-components/es/components/skeleton-placeholder/index.js';
 
 ## `<cds-skeleton-placeholder>` attributes, properties and events
 
-<Props of="cds-skeleton-placeholder" />
+<ArgsTable of="cds-skeleton-placeholder" />
diff --git a/web-components/packages/carbon-web-components/src/components/skeleton-placeholder/skeleton-placeholder.stories.ts b/web-components/packages/carbon-web-components/src/components/skeleton-placeholder/skeleton-placeholder.stories.ts
new file mode 100644
index 000000000000..0d455f997b1e
--- /dev/null
+++ b/web-components/packages/carbon-web-components/src/components/skeleton-placeholder/skeleton-placeholder.stories.ts
@@ -0,0 +1,32 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { html } from 'lit';
+import './skeleton-placeholder';
+import storyDocs from './skeleton-placeholder.mdx';
+
+export const Default = {
+  parameters: {
+    percy: {
+      skip: true,
+    },
+  },
+  render: () => html`<cds-skeleton-placeholder></cds-skeleton-placeholder>`,
+};
+
+const meta = {
+  title: 'Components/Skeleton/Skeleton Placeholder',
+  parameters: {
+    docs: {
+      page: storyDocs,
+    },
+  },
+};
+
+export default meta;
diff --git a/web-components/packages/carbon-web-components/src/components/skeleton-text/skeleton-text-story.ts b/web-components/packages/carbon-web-components/src/components/skeleton-text/skeleton-text-story.ts
deleted file mode 100644
index 032c03c4dbc1..000000000000
--- a/web-components/packages/carbon-web-components/src/components/skeleton-text/skeleton-text-story.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2019, 2023
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { html } from 'lit';
-import { boolean, number, select, text } from '@storybook/addon-knobs';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import { prefix } from '../../globals/settings';
-import { SKELETON_TEXT_TYPE } from './skeleton-text';
-import storyDocs from './skeleton-text-story.mdx';
-
-const types = {
-  Regular: null,
-  [`Heading (${SKELETON_TEXT_TYPE.HEADING})`]: SKELETON_TEXT_TYPE.HEADING,
-};
-
-export const Default = () => html` <cds-skeleton-text></cds-skeleton-text>`;
-
-Default.storyName = 'Default';
-
-Default.parameters = {
-  percy: {
-    skip: true,
-  },
-};
-
-export const Playground = (args) => {
-  const { type, paragraph, lineCount, width } =
-    args?.[`${prefix}-skeleton-text`] ?? {};
-  return html`
-    <cds-skeleton-text
-      type="${ifDefined(type)}"
-      ?paragraph="${paragraph}"
-      lineCount="${lineCount}"
-      width="${width}">
-    </cds-skeleton-text>
-  `;
-};
-
-Playground.parameters = {
-  knobs: {
-    [`${prefix}-skeleton-text`]: () => ({
-      type: select('Skeleton text type (type)', types, null),
-      paragraph: boolean('Use multiple lines of text (paragraph)', true),
-      lineCount: number('The number of lines in a paragraph (lineCount)', 3),
-      width: text(
-        'Width (in px or %) of single line of text or max-width of paragraph lines (width)',
-        '100%'
-      ),
-    }),
-  },
-};
-
-export default {
-  title: 'Components/Skeleton/Skeleton text',
-  parameters: {
-    ...storyDocs.parameters,
-    percy: {
-      skip: true,
-    },
-  },
-};
diff --git a/web-components/packages/carbon-web-components/src/components/skeleton-text/skeleton-text-story.mdx b/web-components/packages/carbon-web-components/src/components/skeleton-text/skeleton-text.mdx
similarity index 78%
rename from web-components/packages/carbon-web-components/src/components/skeleton-text/skeleton-text-story.mdx
rename to web-components/packages/carbon-web-components/src/components/skeleton-text/skeleton-text.mdx
index 860c3aee9939..6a5239002349 100644
--- a/web-components/packages/carbon-web-components/src/components/skeleton-text/skeleton-text-story.mdx
+++ b/web-components/packages/carbon-web-components/src/components/skeleton-text/skeleton-text.mdx
@@ -1,5 +1,8 @@
-import { Props, Description } from '@storybook/addon-docs/blocks';
+import { ArgsTable, Meta, Markdown } from '@storybook/addon-docs/blocks';
 import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
+import * as SkeletonTextStories from './skeleton-text.stories';
+
+<Meta of={SkeletonTextStories} />
 
 # Skeleton text
 
@@ -19,8 +22,8 @@ Here's a quick example to get you started.
 import '@carbon/web-components/es/components/skeleton-text/index.js';
 ```
 
-<Description markdown={`${cdnJs({ components: ['skeleton-text'] })}`} />
-<Description markdown={`${cdnCss()}`} />
+<Markdown>{`${cdnJs({ components: ['skeleton-text'] })}`}</Markdown>
+<Markdown>{`${cdnCss()}`}</Markdown>
 
 ### HTML
 
@@ -41,4 +44,4 @@ multiple instances of `<cds-skeleton-text>`.
 
 ## `<cds-skeleton-text>` attributes and properties
 
-<Props of="cds-skeleton-text" />
+<ArgsTable of="cds-skeleton-text" />
diff --git a/web-components/packages/carbon-web-components/src/components/skeleton-text/skeleton-text.stories.ts b/web-components/packages/carbon-web-components/src/components/skeleton-text/skeleton-text.stories.ts
new file mode 100644
index 000000000000..107efa685ff3
--- /dev/null
+++ b/web-components/packages/carbon-web-components/src/components/skeleton-text/skeleton-text.stories.ts
@@ -0,0 +1,85 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { SKELETON_TEXT_TYPE } from './skeleton-text';
+import storyDocs from './skeleton-text.mdx';
+
+const types = {
+  Regular: null,
+  [`Heading (${SKELETON_TEXT_TYPE.HEADING})`]: SKELETON_TEXT_TYPE.HEADING,
+};
+
+const args = {
+  type: null,
+  paragraph: true,
+  lineCount: 3,
+  width: '100%',
+};
+
+const argTypes = {
+  type: {
+    control: 'select',
+    description: 'Indicate the type of skeleton text, heading or regular.',
+    options: types,
+  },
+  paragraph: {
+    control: 'boolean',
+    description: 'Set this to true to generate multiple lines of text.',
+  },
+  lineCount: {
+    control: 'number',
+    description: 'The number of lines shown if paragraph is true.',
+  },
+  width: {
+    control: 'text',
+    description:
+      'Width (in px or %) of single line of text or max-width of paragraph lines.',
+  },
+};
+
+export const Default = {
+  parameters: {
+    percy: {
+      skip: true,
+    },
+  },
+  render: () => html`<cds-skeleton-text></cds-skeleton-text>`,
+};
+
+export const Playground = {
+  args,
+  argTypes,
+  render: (args) => {
+    const { type, paragraph, lineCount, width } = args ?? {};
+    return html`
+      <cds-skeleton-text
+        type="${ifDefined(type)}"
+        ?paragraph="${paragraph}"
+        lineCount="${lineCount}"
+        width="${width}">
+      </cds-skeleton-text>
+    `;
+  },
+};
+
+const meta = {
+  title: 'Components/Skeleton/Skeleton Text',
+  parameters: {
+    docs: {
+      page: storyDocs,
+    },
+    percy: {
+      skip: true,
+    },
+  },
+};
+
+export default meta;