diff --git a/packages/react/src/components/Skeleton/next/Skeleton.stories.js b/packages/react/src/components/Skeleton/next/Skeleton.stories.js
deleted file mode 100644
index fedceb323bf4..000000000000
--- a/packages/react/src/components/Skeleton/next/Skeleton.stories.js
+++ /dev/null
@@ -1,82 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2018
- *
- * 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 React from 'react';
-import SkeletonText from '../../SkeletonText';
-import SkeletonPlaceholder from '../../SkeletonPlaceholder';
-import { withKnobs, select, boolean, number } from '@storybook/addon-knobs';
-
-const classNames = {
-  'my--skeleton__placeholder--small': 'my--skeleton__placeholder--small',
-  'my--skeleton__placeholder--medium': 'my--skeleton__placeholder--medium',
-  'my--skeleton__placeholder--large': 'my--skeleton__placeholder--large',
-};
-
-const placeholderProps = () => ({
-  className: select('Classes with different sizes', classNames),
-});
-
-const widths = {
-  '100%': '100%',
-  '250px': '250px',
-};
-
-const textProps = () => ({
-  heading: boolean('Skeleton text at a larger size (heading)'),
-  paragraph: boolean('Use multiple lines of text (paragraph)'),
-  lineCount: number('The number of lines in a paragraph (lineCount)', 3),
-  width: select(
-    'Width (in px or %) of single line of text or max-width of paragraph lines (width)',
-    widths,
-    '100%'
-  ),
-});
-
-export default {
-  title: 'Components/Skeleton',
-  component: SkeletonText,
-  decorators: [withKnobs],
-  subcomponents: {
-    SkeletonPlaceholder,
-  },
-};
-
-export const _SkeletonPlaceholder = () => {
-  return (
-    <div style={{ height: '250px', width: '250px' }}>
-      <style
-        dangerouslySetInnerHTML={{
-          __html: `
-      .my--skeleton__placeholder--small {
-        height: 100px;
-        width: 100px;
-      }
-
-      .my--skeleton__placeholder--medium {
-        height: 150px;
-        width: 150px;
-      }
-
-      .my--skeleton__placeholder--large {
-        height: 250px;
-        width: 250px;
-      }
-    `,
-        }}
-      />
-      <SkeletonPlaceholder {...placeholderProps()} />
-    </div>
-  );
-};
-
-export const _SkeletonText = () => {
-  return (
-    <div style={{ width: '300px' }}>
-      <SkeletonText {...textProps()} />
-    </div>
-  );
-};
diff --git a/packages/react/src/components/SkeletonIcon/SkeletonIcon-story.js b/packages/react/src/components/SkeletonIcon/SkeletonIcon.stories.js
similarity index 93%
rename from packages/react/src/components/SkeletonIcon/SkeletonIcon-story.js
rename to packages/react/src/components/SkeletonIcon/SkeletonIcon.stories.js
index 2e0c53df571d..9df544045cc1 100644
--- a/packages/react/src/components/SkeletonIcon/SkeletonIcon-story.js
+++ b/packages/react/src/components/SkeletonIcon/SkeletonIcon.stories.js
@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import SkeletonIcon from '../SkeletonIcon';
+import SkeletonIcon from '.';
 
 const propsSkeleton = {
   style: {
diff --git a/packages/react/src/components/SkeletonPlaceholder/SkeletonPlaceholder-story.js b/packages/react/src/components/SkeletonPlaceholder/SkeletonPlaceholder-story.js
deleted file mode 100644
index f633c0b07323..000000000000
--- a/packages/react/src/components/SkeletonPlaceholder/SkeletonPlaceholder-story.js
+++ /dev/null
@@ -1,61 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2018
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/* eslint-disable no-console */
-
-import React from 'react';
-
-import { withKnobs, select } from '@storybook/addon-knobs';
-import SkeletonPlaceholder from '../SkeletonPlaceholder';
-import mdx from './SkeletonPlaceholder.mdx';
-
-const classNames = {
-  'my--skeleton__placeholder--small': 'my--skeleton__placeholder--small',
-  'my--skeleton__placeholder--medium': 'my--skeleton__placeholder--medium',
-  'my--skeleton__placeholder--large': 'my--skeleton__placeholder--large',
-};
-
-const props = () => ({
-  className: select('Classes with different sizes', classNames),
-});
-
-export default {
-  title: 'Components/Skeleton/SkeletonPlaceholder',
-  component: SkeletonPlaceholder,
-  decorators: [withKnobs],
-  parameters: {
-    docs: {
-      page: mdx,
-    },
-  },
-};
-
-export const Default = () => (
-  <div style={{ height: '250px', width: '250px' }}>
-    <style
-      dangerouslySetInnerHTML={{
-        __html: `
-      .my--skeleton__placeholder--small {
-        height: 100px;
-        width: 100px;
-      }
-
-      .my--skeleton__placeholder--medium {
-        height: 150px;
-        width: 150px;
-      }
-
-      .my--skeleton__placeholder--large {
-        height: 250px;
-        width: 250px;
-      }
-    `,
-      }}
-    />
-    <SkeletonPlaceholder {...props()} />
-  </div>
-);
diff --git a/packages/react/src/components/SkeletonPlaceholder/SkeletonPlaceholder.js b/packages/react/src/components/SkeletonPlaceholder/SkeletonPlaceholder.js
index f727d76ff63e..25476067ef07 100644
--- a/packages/react/src/components/SkeletonPlaceholder/SkeletonPlaceholder.js
+++ b/packages/react/src/components/SkeletonPlaceholder/SkeletonPlaceholder.js
@@ -22,7 +22,8 @@ const SkeletonPlaceholder = ({ className, ...other }) => {
 
 SkeletonPlaceholder.propTypes = {
   /**
-   * the class to be applied to the component
+   * Add a custom class to the component
+   * to set the height and width
    */
   className: PropTypes.string,
 };
diff --git a/packages/react/src/components/SkeletonPlaceholder/SkeletonPlaceholder.mdx b/packages/react/src/components/SkeletonPlaceholder/SkeletonPlaceholder.mdx
index 2339e16f81e1..e471aaa083a6 100644
--- a/packages/react/src/components/SkeletonPlaceholder/SkeletonPlaceholder.mdx
+++ b/packages/react/src/components/SkeletonPlaceholder/SkeletonPlaceholder.mdx
@@ -1,4 +1,4 @@
-import { Props } from '@storybook/addon-docs';
+import { Story, Props, Preview } from '@storybook/addon-docs';
 
 # SkeletonPlaceholder
 
@@ -10,6 +10,10 @@ import { Props } from '@storybook/addon-docs';
 
 ## Overview
 
+<Preview>
+  <Story id="components-skeleton-skeletonplaceholder--default" />
+</Preview>
+
 ## Component API
 
 <Props />
diff --git a/packages/react/src/components/SkeletonPlaceholder/SkeletonPlaceholder.stories.js b/packages/react/src/components/SkeletonPlaceholder/SkeletonPlaceholder.stories.js
new file mode 100644
index 000000000000..ae180b24bdb0
--- /dev/null
+++ b/packages/react/src/components/SkeletonPlaceholder/SkeletonPlaceholder.stories.js
@@ -0,0 +1,25 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/* eslint-disable no-console */
+
+import React from 'react';
+
+import SkeletonPlaceholder from '.';
+import mdx from './SkeletonPlaceholder.mdx';
+
+export default {
+  title: 'Components/Skeleton/SkeletonPlaceholder',
+  component: SkeletonPlaceholder,
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
+};
+
+export const Default = () => <SkeletonPlaceholder />;
diff --git a/packages/react/src/components/SkeletonText/SkeletonText-story.js b/packages/react/src/components/SkeletonText/SkeletonText-story.js
deleted file mode 100644
index 3fb2f800e799..000000000000
--- a/packages/react/src/components/SkeletonText/SkeletonText-story.js
+++ /dev/null
@@ -1,47 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2018
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/* eslint-disable no-console */
-
-import React from 'react';
-
-import { withKnobs, boolean, number, select } from '@storybook/addon-knobs';
-import SkeletonText from '../SkeletonText';
-import mdx from './SkeletonText.mdx';
-
-const widths = {
-  '100%': '100%',
-  '250px': '250px',
-};
-
-const props = () => ({
-  heading: boolean('Skeleton text at a larger size (heading)'),
-  paragraph: boolean('Use multiple lines of text (paragraph)'),
-  lineCount: number('The number of lines in a paragraph (lineCount)', 3),
-  width: select(
-    'Width (in px or %) of single line of text or max-width of paragraph lines (width)',
-    widths,
-    '100%'
-  ),
-});
-
-export default {
-  title: 'Components/Skeleton/SkeletonText',
-  component: SkeletonText,
-  decorators: [withKnobs],
-  parameters: {
-    docs: {
-      page: mdx,
-    },
-  },
-};
-
-export const Default = () => (
-  <div style={{ width: '300px' }}>
-    <SkeletonText {...props()} />
-  </div>
-);
diff --git a/packages/react/src/components/SkeletonText/SkeletonText.js b/packages/react/src/components/SkeletonText/SkeletonText.js
index 64b600825a60..236fc26bdfa9 100644
--- a/packages/react/src/components/SkeletonText/SkeletonText.js
+++ b/packages/react/src/components/SkeletonText/SkeletonText.js
@@ -83,7 +83,7 @@ SkeletonText.propTypes = {
    */
   heading: PropTypes.bool,
   /**
-   * the number of lines in a paragraph
+   * the number of lines shown if paragraph is true
    */
   lineCount: PropTypes.number,
   /**
diff --git a/packages/react/src/components/SkeletonText/SkeletonText.mdx b/packages/react/src/components/SkeletonText/SkeletonText.mdx
index 1998e728e43b..b0ebe6a32e2f 100644
--- a/packages/react/src/components/SkeletonText/SkeletonText.mdx
+++ b/packages/react/src/components/SkeletonText/SkeletonText.mdx
@@ -1,4 +1,4 @@
-import { Props } from '@storybook/addon-docs';
+import { Story, Props, Preview } from '@storybook/addon-docs';
 
 # SkeletonText
 
@@ -10,6 +10,10 @@ import { Props } from '@storybook/addon-docs';
 
 ## Overview
 
+<Preview>
+  <Story id="components-skeleton-skeletontext--default" />
+</Preview>
+
 ## Component API
 
 <Props />
diff --git a/packages/react/src/components/SkeletonText/SkeletonText.stories.js b/packages/react/src/components/SkeletonText/SkeletonText.stories.js
new file mode 100644
index 000000000000..086d79118ff4
--- /dev/null
+++ b/packages/react/src/components/SkeletonText/SkeletonText.stories.js
@@ -0,0 +1,57 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/* eslint-disable no-console */
+
+import React from 'react';
+
+import SkeletonText from '.';
+import mdx from './SkeletonText.mdx';
+
+export default {
+  title: 'Components/Skeleton/SkeletonText',
+  component: SkeletonText,
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
+};
+
+export const Default = () => <SkeletonText />;
+
+export const Playground = (args) => <SkeletonText {...args} />;
+
+Playground.argTypes = {
+  className: {
+    control: false,
+  },
+  heading: {
+    control: {
+      type: 'boolean',
+    },
+    defaultValue: false,
+  },
+  paragraph: {
+    control: {
+      type: 'boolean',
+    },
+    defaultValue: false,
+  },
+  width: {
+    control: {
+      type: 'text',
+    },
+    defaultValue: '100%',
+  },
+  lineCount: {
+    control: {
+      type: 'number',
+    },
+    defaultValue: 3,
+  },
+};