diff --git a/packages/carbon-web-components/.storybook/main.ts b/packages/carbon-web-components/.storybook/main.ts
index 4de8d6d55cc..50b8e33defe 100644
--- a/packages/carbon-web-components/.storybook/main.ts
+++ b/packages/carbon-web-components/.storybook/main.ts
@@ -26,6 +26,8 @@ const stories = glob.sync(
     '../src/**/file-uploader.stories.ts',
     '../src/**/overflow-menu.mdx',
     '../src/**/overflow-menu.stories.ts',
+    '../src/**/skip-to-content.mdx',
+    '../src/**/skip-to-content.stories.ts',
     '../src/**/slider.mdx',
     '../src/**/slider.stories.ts',
   ],
diff --git a/packages/carbon-web-components/src/components/skip-to-content/skip-to-content-story.ts b/packages/carbon-web-components/src/components/skip-to-content/skip-to-content-story.ts
deleted file mode 100644
index 58484d45702..00000000000
--- a/packages/carbon-web-components/src/components/skip-to-content/skip-to-content-story.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2020, 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 './skip-to-content';
-import styles from './skip-to-content-story.scss?lit';
-import storyDocs from './skip-to-content-story.mdx';
-import { prefix } from '../../globals/settings';
-
-export const Default = () => html`
-  <style>
-    ${styles}
-  </style>
-  <div class="${prefix}--content ${prefix}--grid">
-    <div class="${prefix}--row">
-      <div class="${prefix}--col-lg-13">
-        <h2>Purpose and function</h2>
-        <p>
-          The shell is perhaps the most crucial piece of any UI built with
-          Carbon. It contains the shared navigation framework for the entire
-          design system and ties the products in IBM’s portfolio together in a
-          cohesive and elegant way. The shell is the home of the topmost
-          navigation, where users can quickly and dependably gain their bearings
-          and move between pages.
-          <br />
-          <br />
-          The shell was designed with maximum flexibility built in, to serve the
-          needs of a broad range of products and users. Adopting the shell
-          ensures compliance with IBM design standards, simplifies development
-          efforts, and provides great user experiences. All IBM products built
-          with Carbon are required to use the shell’s header.
-          <br />
-          <br />
-          To better understand the purpose and function of the UI shell,
-          consider the “shell” of MacOS, which contains the Apple menu,
-          top-level navigation, and universal, OS-level controls at the top of
-          the screen, as well as a universal dock along the bottom or side of
-          the screen. The Carbon UI shell is roughly analogous in function to
-          these parts of the Mac UI. For example, the app switcher portion of
-          the shell can be compared to the dock in MacOS.
-        </p>
-        <h2>Header responsive behavior</h2>
-        <p>
-          As a header scales down to fit smaller screen sizes, headers with
-          persistent side nav menus should have the side nav collapse into
-          “hamburger” menu. See the example to better understand responsive
-          behavior of the header.
-        </p>
-        <h2>Secondary navigation</h2>
-        <p>
-          The side-nav contains secondary navigation and fits below the header.
-          It can be configured to be either fixed-width or flexible, with only
-          one level of nested items allowed. Both links and category lists can
-          be used in the side-nav and may be mixed together. There are several
-          configurations of the side-nav, but only one configuration should be
-          used per product section. If tabs are needed on a page when using a
-          side-nav, then the tabs are secondary in hierarchy to the side-nav.
-        </p>
-      </div>
-    </div>
-  </div>
-`;
-
-export default {
-  title: 'Components/Skip to content',
-  parameters: {
-    ...storyDocs.parameters,
-  },
-};
diff --git a/packages/carbon-web-components/src/components/skip-to-content/skip-to-content-story.mdx b/packages/carbon-web-components/src/components/skip-to-content/skip-to-content.mdx
similarity index 70%
rename from packages/carbon-web-components/src/components/skip-to-content/skip-to-content-story.mdx
rename to packages/carbon-web-components/src/components/skip-to-content/skip-to-content.mdx
index 93c22b66d17..6c53a070adf 100644
--- a/packages/carbon-web-components/src/components/skip-to-content/skip-to-content-story.mdx
+++ b/packages/carbon-web-components/src/components/skip-to-content/skip-to-content.mdx
@@ -1,4 +1,8 @@
-import { Props } from '@storybook/addon-docs/blocks';
+import { ArgsTable, Meta, Markdown } from '@storybook/addon-docs/blocks';
+import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
+import * as SkipToContentStories from './skip-to-content.stories';
+
+<Meta of={SkipToContentStories} />
 
 # Skip to content
 
@@ -21,8 +25,8 @@ Here's a quick example to get you started.
 import '@carbon/web-components/es/components/skip-to-content/index.js';
 ```
 
-<Description markdown={`${cdnJs({ components: ['skip-to-content'] })}`} />
-<Description markdown={`${cdnCss()}`} />
+<Markdown>{`${cdnJs({ components: ['skip-to-content'] })}`}</Markdown>
+<Markdown>{`${cdnCss()}`}</Markdown>
 
 ### HTML
 
@@ -32,4 +36,4 @@ import '@carbon/web-components/es/components/skip-to-content/index.js';
 
 ## `<cds-skip-to-content>` attributes and properties
 
-<Props of="cds-skip-to-content" />
+<ArgsTable of="cds-skip-to-content" />
diff --git a/packages/carbon-web-components/src/components/skip-to-content/skip-to-content.stories.ts b/packages/carbon-web-components/src/components/skip-to-content/skip-to-content.stories.ts
new file mode 100644
index 00000000000..1b653a4f272
--- /dev/null
+++ b/packages/carbon-web-components/src/components/skip-to-content/skip-to-content.stories.ts
@@ -0,0 +1,82 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2020, 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 './skip-to-content';
+import styles from './skip-to-content-story.scss?lit';
+import storyDocs from './skip-to-content.mdx';
+import { prefix } from '../../globals/settings';
+
+export const Default = {
+  render: () => html`
+    <style>
+      ${styles}
+    </style>
+    <div class="${prefix}--content ${prefix}--grid">
+      <div class="${prefix}--row">
+        <div class="${prefix}--col-lg-13">
+          <h2>Purpose and function</h2>
+          <p>
+            The shell is perhaps the most crucial piece of any UI built with
+            Carbon. It contains the shared navigation framework for the entire
+            design system and ties the products in IBM’s portfolio together in a
+            cohesive and elegant way. The shell is the home of the topmost
+            navigation, where users can quickly and dependably gain their
+            bearings and move between pages.
+            <br />
+            <br />
+            The shell was designed with maximum flexibility built in, to serve
+            the needs of a broad range of products and users. Adopting the shell
+            ensures compliance with IBM design standards, simplifies development
+            efforts, and provides great user experiences. All IBM products built
+            with Carbon are required to use the shell’s header.
+            <br />
+            <br />
+            To better understand the purpose and function of the UI shell,
+            consider the “shell” of MacOS, which contains the Apple menu,
+            top-level navigation, and universal, OS-level controls at the top of
+            the screen, as well as a universal dock along the bottom or side of
+            the screen. The Carbon UI shell is roughly analogous in function to
+            these parts of the Mac UI. For example, the app switcher portion of
+            the shell can be compared to the dock in MacOS.
+          </p>
+          <h2>Header responsive behavior</h2>
+          <p>
+            As a header scales down to fit smaller screen sizes, headers with
+            persistent side nav menus should have the side nav collapse into
+            “hamburger” menu. See the example to better understand responsive
+            behavior of the header.
+          </p>
+          <h2>Secondary navigation</h2>
+          <p>
+            The side-nav contains secondary navigation and fits below the
+            header. It can be configured to be either fixed-width or flexible,
+            with only one level of nested items allowed. Both links and category
+            lists can be used in the side-nav and may be mixed together. There
+            are several configurations of the side-nav, but only one
+            configuration should be used per product section. If tabs are needed
+            on a page when using a side-nav, then the tabs are secondary in
+            hierarchy to the side-nav.
+          </p>
+        </div>
+      </div>
+    </div>
+  `,
+};
+
+const meta = {
+  title: 'Components/Skip To Content',
+  parameters: {
+    docs: {
+      page: storyDocs,
+    },
+  },
+};
+
+export default meta;