diff --git a/__fixtures__/test-project/api/db/migrations/20220824103905_create_post_user/migration.sql b/__fixtures__/test-project/api/db/migrations/20220825122936_create_post_user/migration.sql
similarity index 100%
rename from __fixtures__/test-project/api/db/migrations/20220824103905_create_post_user/migration.sql
rename to __fixtures__/test-project/api/db/migrations/20220825122936_create_post_user/migration.sql
diff --git a/__fixtures__/test-project/api/db/migrations/20220824103915_create_contact/migration.sql b/__fixtures__/test-project/api/db/migrations/20220825122945_create_contact/migration.sql
similarity index 100%
rename from __fixtures__/test-project/api/db/migrations/20220824103915_create_contact/migration.sql
rename to __fixtures__/test-project/api/db/migrations/20220825122945_create_contact/migration.sql
diff --git a/__fixtures__/test-project/api/src/services/posts/posts.scenarios.ts b/__fixtures__/test-project/api/src/services/posts/posts.scenarios.ts
index afb9543b7f26..bd3c0b974eac 100644
--- a/__fixtures__/test-project/api/src/services/posts/posts.scenarios.ts
+++ b/__fixtures__/test-project/api/src/services/posts/posts.scenarios.ts
@@ -10,7 +10,7 @@ export const standard = defineScenario<Prisma.PostCreateArgs>({
         body: 'String',
         author: {
           create: {
-            email: 'String1013854',
+            email: 'String1880855',
             hashedPassword: 'String',
             fullName: 'String',
             salt: 'String',
@@ -24,7 +24,7 @@ export const standard = defineScenario<Prisma.PostCreateArgs>({
         body: 'String',
         author: {
           create: {
-            email: 'String3666736',
+            email: 'String3103243',
             hashedPassword: 'String',
             fullName: 'String',
             salt: 'String',
diff --git a/__fixtures__/test-project/api/src/services/users/users.scenarios.ts b/__fixtures__/test-project/api/src/services/users/users.scenarios.ts
index e1e46789056c..d151d78d968b 100644
--- a/__fixtures__/test-project/api/src/services/users/users.scenarios.ts
+++ b/__fixtures__/test-project/api/src/services/users/users.scenarios.ts
@@ -6,7 +6,7 @@ export const standard = defineScenario<Prisma.UserCreateArgs>({
   user: {
     one: {
       data: {
-        email: 'String7334627',
+        email: 'String8646974',
         hashedPassword: 'String',
         fullName: 'String',
         salt: 'String',
@@ -14,7 +14,7 @@ export const standard = defineScenario<Prisma.UserCreateArgs>({
     },
     two: {
       data: {
-        email: 'String8778585',
+        email: 'String1817344',
         hashedPassword: 'String',
         fullName: 'String',
         salt: 'String',
diff --git a/__fixtures__/test-project/web/src/components/Author/Author.stories.tsx b/__fixtures__/test-project/web/src/components/Author/Author.stories.tsx
index 5ac869588a81..b24aa4b0ce6e 100644
--- a/__fixtures__/test-project/web/src/components/Author/Author.stories.tsx
+++ b/__fixtures__/test-project/web/src/components/Author/Author.stories.tsx
@@ -1,3 +1,18 @@
+// When you've added props to your component,
+// pass Storybook's `args` through this story to control it from the addons panel:
+//
+// ```tsx
+// import type { ComponentStory } from '@storybook/react'
+//
+// export const generated: ComponentStory<typeof Author> = (args) => {
+//   return <Author {...args} />
+// }
+// ```
+//
+// See https://storybook.js.org/docs/react/writing-stories/args.
+
+import type { ComponentMeta } from '@storybook/react'
+
 import Author from './Author'
 
 const author = {
@@ -5,8 +20,11 @@ const author = {
   fullName: 'Story User',
 }
 
-export const generated = (args) => {
-  return <Author {...args} author={author} />
+export const generated = () => {
+  return <Author author={author} />
 }
 
-export default { title: 'Components/Author' }
+export default {
+  title: 'Components/Author',
+  component: Author,
+} as ComponentMeta<typeof Author>
diff --git a/__fixtures__/test-project/web/src/components/AuthorCell/AuthorCell.stories.tsx b/__fixtures__/test-project/web/src/components/AuthorCell/AuthorCell.stories.tsx
index 9c42eec4b8c5..bdd190cfd63b 100644
--- a/__fixtures__/test-project/web/src/components/AuthorCell/AuthorCell.stories.tsx
+++ b/__fixtures__/test-project/web/src/components/AuthorCell/AuthorCell.stories.tsx
@@ -1,20 +1,22 @@
+import type { ComponentStory } from '@storybook/react'
+
 import { Loading, Empty, Failure, Success } from './AuthorCell'
 import { standard } from './AuthorCell.mock'
 
-export const loading = (args) => {
-  return Loading ? <Loading {...args} /> : null
+export const loading = () => {
+  return Loading ? <Loading /> : <></>
 }
 
-export const empty = (args) => {
-  return Empty ? <Empty {...args} /> : null
+export const empty = () => {
+  return Empty ? <Empty /> : <></>
 }
 
-export const failure = (args) => {
-  return Failure ? <Failure error={new Error('Oh no')} {...args} /> : null
+export const failure: ComponentStory<typeof Failure> = (args) => {
+  return Failure ? <Failure error={new Error('Oh no')} {...args} /> : <></>
 }
 
-export const success = (args) => {
-  return Success ? <Success {...standard()} {...args} /> : null
+export const success: ComponentStory<typeof Success> = (args) => {
+  return Success ? <Success {...standard()} {...args} /> : <></>
 }
 
 export default { title: 'Cells/AuthorCell' }
diff --git a/__fixtures__/test-project/web/src/components/BlogPost/BlogPost.stories.tsx b/__fixtures__/test-project/web/src/components/BlogPost/BlogPost.stories.tsx
index f9ef7bfd1931..edc63e839ae3 100644
--- a/__fixtures__/test-project/web/src/components/BlogPost/BlogPost.stories.tsx
+++ b/__fixtures__/test-project/web/src/components/BlogPost/BlogPost.stories.tsx
@@ -1,7 +1,25 @@
+// When you've added props to your component,
+// pass Storybook's `args` through this story to control it from the addons panel:
+//
+// ```tsx
+// import type { ComponentStory } from '@storybook/react'
+//
+// export const generated: ComponentStory<typeof BlogPost> = (args) => {
+//   return <BlogPost {...args} />
+// }
+// ```
+//
+// See https://storybook.js.org/docs/react/writing-stories/args.
+
+import type { ComponentMeta } from '@storybook/react'
+
 import BlogPost from './BlogPost'
 
-export const generated = (args) => {
-  return <BlogPost {...args} />
+export const generated = () => {
+  return <BlogPost />
 }
 
-export default { title: 'Components/BlogPost' }
+export default {
+  title: 'Components/BlogPost',
+  component: BlogPost,
+} as ComponentMeta<typeof BlogPost>
diff --git a/__fixtures__/test-project/web/src/components/BlogPostCell/BlogPostCell.stories.tsx b/__fixtures__/test-project/web/src/components/BlogPostCell/BlogPostCell.stories.tsx
index 435aa4da7682..73927aa1c44b 100644
--- a/__fixtures__/test-project/web/src/components/BlogPostCell/BlogPostCell.stories.tsx
+++ b/__fixtures__/test-project/web/src/components/BlogPostCell/BlogPostCell.stories.tsx
@@ -1,20 +1,22 @@
+import type { ComponentStory } from '@storybook/react'
+
 import { Loading, Empty, Failure, Success } from './BlogPostCell'
 import { standard } from './BlogPostCell.mock'
 
-export const loading = (args) => {
-  return Loading ? <Loading {...args} /> : null
+export const loading = () => {
+  return Loading ? <Loading /> : <></>
 }
 
-export const empty = (args) => {
-  return Empty ? <Empty {...args} /> : null
+export const empty = () => {
+  return Empty ? <Empty /> : <></>
 }
 
-export const failure = (args) => {
-  return Failure ? <Failure error={new Error('Oh no')} {...args} /> : null
+export const failure: ComponentStory<typeof Failure> = (args) => {
+  return Failure ? <Failure error={new Error('Oh no')} {...args} /> : <></>
 }
 
-export const success = (args) => {
-  return Success ? <Success {...standard()} {...args} /> : null
+export const success: ComponentStory<typeof Success> = (args) => {
+  return Success ? <Success {...standard()} {...args} /> : <></>
 }
 
 export default { title: 'Cells/BlogPostCell' }
diff --git a/__fixtures__/test-project/web/src/components/BlogPostsCell/BlogPostsCell.stories.tsx b/__fixtures__/test-project/web/src/components/BlogPostsCell/BlogPostsCell.stories.tsx
index 4b55b86498b1..d8514e3246ea 100644
--- a/__fixtures__/test-project/web/src/components/BlogPostsCell/BlogPostsCell.stories.tsx
+++ b/__fixtures__/test-project/web/src/components/BlogPostsCell/BlogPostsCell.stories.tsx
@@ -1,20 +1,22 @@
+import type { ComponentStory } from '@storybook/react'
+
 import { Loading, Empty, Failure, Success } from './BlogPostsCell'
 import { standard } from './BlogPostsCell.mock'
 
-export const loading = (args) => {
-  return Loading ? <Loading {...args} /> : null
+export const loading = () => {
+  return Loading ? <Loading /> : <></>
 }
 
-export const empty = (args) => {
-  return Empty ? <Empty {...args} /> : null
+export const empty = () => {
+  return Empty ? <Empty /> : <></>
 }
 
-export const failure = (args) => {
-  return Failure ? <Failure error={new Error('Oh no')} {...args} /> : null
+export const failure: ComponentStory<typeof Failure> = (args) => {
+  return Failure ? <Failure error={new Error('Oh no')} {...args} /> : <></>
 }
 
-export const success = (args) => {
-  return Success ? <Success {...standard()} {...args} /> : null
+export const success: ComponentStory<typeof Success> = (args) => {
+  return Success ? <Success {...standard()} {...args} /> : <></>
 }
 
 export default { title: 'Cells/BlogPostsCell' }
diff --git a/__fixtures__/test-project/web/src/components/WaterfallBlogPostCell/WaterfallBlogPostCell.stories.tsx b/__fixtures__/test-project/web/src/components/WaterfallBlogPostCell/WaterfallBlogPostCell.stories.tsx
index 6b50ba1f8bd8..6b81da804167 100644
--- a/__fixtures__/test-project/web/src/components/WaterfallBlogPostCell/WaterfallBlogPostCell.stories.tsx
+++ b/__fixtures__/test-project/web/src/components/WaterfallBlogPostCell/WaterfallBlogPostCell.stories.tsx
@@ -1,20 +1,22 @@
+import type { ComponentStory } from '@storybook/react'
+
 import { Loading, Empty, Failure, Success } from './WaterfallBlogPostCell'
 import { standard } from './WaterfallBlogPostCell.mock'
 
-export const loading = (args) => {
-  return Loading ? <Loading {...args} /> : null
+export const loading = () => {
+  return Loading ? <Loading /> : <></>
 }
 
-export const empty = (args) => {
-  return Empty ? <Empty {...args} /> : null
+export const empty = () => {
+  return Empty ? <Empty /> : <></>
 }
 
-export const failure = (args) => {
-  return Failure ? <Failure error={new Error('Oh no')} {...args} /> : null
+export const failure: ComponentStory<typeof Failure> = (args) => {
+  return Failure ? <Failure error={new Error('Oh no')} {...args} /> : <></>
 }
 
-export const success = (args) => {
-  return Success ? <Success {...standard()} {...args} /> : null
+export const success: ComponentStory<typeof Success> = (args) => {
+  return Success ? <Success {...standard()} {...args} /> : <></>
 }
 
 export default { title: 'Cells/WaterfallBlogPostCell' }
diff --git a/__fixtures__/test-project/web/src/layouts/BlogLayout/BlogLayout.stories.tsx b/__fixtures__/test-project/web/src/layouts/BlogLayout/BlogLayout.stories.tsx
index b91683deb8b6..31d60bea6fc1 100644
--- a/__fixtures__/test-project/web/src/layouts/BlogLayout/BlogLayout.stories.tsx
+++ b/__fixtures__/test-project/web/src/layouts/BlogLayout/BlogLayout.stories.tsx
@@ -1,7 +1,12 @@
+import type { ComponentMeta, ComponentStory } from '@storybook/react'
+
 import BlogLayout from './BlogLayout'
 
-export const generated = (args) => {
+export const generated: ComponentStory<typeof BlogLayout> = (args) => {
   return <BlogLayout {...args} />
 }
 
-export default { title: 'Layouts/BlogLayout' }
+export default {
+  title: 'Layouts/BlogLayout',
+  component: BlogLayout,
+} as ComponentMeta<typeof BlogLayout>
diff --git a/__fixtures__/test-project/web/src/pages/AboutPage/AboutPage.stories.tsx b/__fixtures__/test-project/web/src/pages/AboutPage/AboutPage.stories.tsx
index 9274428984f6..2444531e1920 100644
--- a/__fixtures__/test-project/web/src/pages/AboutPage/AboutPage.stories.tsx
+++ b/__fixtures__/test-project/web/src/pages/AboutPage/AboutPage.stories.tsx
@@ -1,7 +1,12 @@
+import type { ComponentMeta } from '@storybook/react'
+
 import AboutPage from './AboutPage'
 
-export const generated = (args) => {
-  return <AboutPage {...args} />
+export const generated = () => {
+  return <AboutPage />
 }
 
-export default { title: 'Pages/AboutPage' }
+export default {
+  title: 'Pages/AboutPage',
+  component: AboutPage,
+} as ComponentMeta<typeof AboutPage>
diff --git a/__fixtures__/test-project/web/src/pages/BlogPostPage/BlogPostPage.stories.tsx b/__fixtures__/test-project/web/src/pages/BlogPostPage/BlogPostPage.stories.tsx
index c77901cde092..38a632256e47 100644
--- a/__fixtures__/test-project/web/src/pages/BlogPostPage/BlogPostPage.stories.tsx
+++ b/__fixtures__/test-project/web/src/pages/BlogPostPage/BlogPostPage.stories.tsx
@@ -1,7 +1,12 @@
+import type { ComponentMeta, ComponentStory } from '@storybook/react'
+
 import BlogPostPage from './BlogPostPage'
 
-export const generated = (args) => {
+export const generated: ComponentStory<typeof BlogPostPage> = (args) => {
   return <BlogPostPage id={42} {...args} />
 }
 
-export default { title: 'Pages/BlogPostPage' }
+export default {
+  title: 'Pages/BlogPostPage',
+  component: BlogPostPage,
+} as ComponentMeta<typeof BlogPostPage>
diff --git a/__fixtures__/test-project/web/src/pages/ContactPage/ContactPage.stories.tsx b/__fixtures__/test-project/web/src/pages/ContactPage/ContactPage.stories.tsx
index 131c7ac4c866..740aaca7063d 100644
--- a/__fixtures__/test-project/web/src/pages/ContactPage/ContactPage.stories.tsx
+++ b/__fixtures__/test-project/web/src/pages/ContactPage/ContactPage.stories.tsx
@@ -1,7 +1,12 @@
+import type { ComponentMeta } from '@storybook/react'
+
 import ContactPage from './ContactPage'
 
-export const generated = (args) => {
-  return <ContactPage {...args} />
+export const generated = () => {
+  return <ContactPage />
 }
 
-export default { title: 'Pages/ContactPage' }
+export default {
+  title: 'Pages/ContactPage',
+  component: ContactPage,
+} as ComponentMeta<typeof ContactPage>
diff --git a/__fixtures__/test-project/web/src/pages/HomePage/HomePage.stories.tsx b/__fixtures__/test-project/web/src/pages/HomePage/HomePage.stories.tsx
index 81bf2d53e6ac..fbfa6b08dd69 100644
--- a/__fixtures__/test-project/web/src/pages/HomePage/HomePage.stories.tsx
+++ b/__fixtures__/test-project/web/src/pages/HomePage/HomePage.stories.tsx
@@ -1,7 +1,12 @@
+import type { ComponentMeta } from '@storybook/react'
+
 import HomePage from './HomePage'
 
-export const generated = (args) => {
-  return <HomePage {...args} />
+export const generated = () => {
+  return <HomePage />
 }
 
-export default { title: 'Pages/HomePage' }
+export default {
+  title: 'Pages/HomePage',
+  component: HomePage,
+} as ComponentMeta<typeof HomePage>
diff --git a/__fixtures__/test-project/web/src/pages/ProfilePage/ProfilePage.stories.tsx b/__fixtures__/test-project/web/src/pages/ProfilePage/ProfilePage.stories.tsx
index 4dcf57d6b8a7..a8a31f99dfc2 100644
--- a/__fixtures__/test-project/web/src/pages/ProfilePage/ProfilePage.stories.tsx
+++ b/__fixtures__/test-project/web/src/pages/ProfilePage/ProfilePage.stories.tsx
@@ -1,7 +1,12 @@
+import type { ComponentMeta } from '@storybook/react'
+
 import ProfilePage from './ProfilePage'
 
-export const generated = (args) => {
-  return <ProfilePage {...args} />
+export const generated = () => {
+  return <ProfilePage />
 }
 
-export default { title: 'Pages/ProfilePage' }
+export default {
+  title: 'Pages/ProfilePage',
+  component: ProfilePage,
+} as ComponentMeta<typeof ProfilePage>
diff --git a/__fixtures__/test-project/web/src/pages/WaterfallPage/WaterfallPage.stories.tsx b/__fixtures__/test-project/web/src/pages/WaterfallPage/WaterfallPage.stories.tsx
index 634d0b253867..db5e86567d8f 100644
--- a/__fixtures__/test-project/web/src/pages/WaterfallPage/WaterfallPage.stories.tsx
+++ b/__fixtures__/test-project/web/src/pages/WaterfallPage/WaterfallPage.stories.tsx
@@ -1,7 +1,12 @@
+import type { ComponentMeta, ComponentStory } from '@storybook/react'
+
 import WaterfallPage from './WaterfallPage'
 
-export const generated = (args) => {
+export const generated: ComponentStory<typeof WaterfallPage> = (args) => {
   return <WaterfallPage id={42} {...args} />
 }
 
-export default { title: 'Pages/WaterfallPage' }
+export default {
+  title: 'Pages/WaterfallPage',
+  component: WaterfallPage,
+} as ComponentMeta<typeof WaterfallPage>
diff --git a/packages/cli/src/commands/generate/cell/__tests__/__snapshots__/cell.test.js.snap b/packages/cli/src/commands/generate/cell/__tests__/__snapshots__/cell.test.js.snap
index d3d2199d33a2..8b4cdb4fb344 100644
--- a/packages/cli/src/commands/generate/cell/__tests__/__snapshots__/cell.test.js.snap
+++ b/packages/cli/src/commands/generate/cell/__tests__/__snapshots__/cell.test.js.snap
@@ -128,23 +128,25 @@ describe('BazingaCell', () => {
 `;
 
 exports[`TypeScript: generates list cells if list flag passed in 3`] = `
-"import { Loading, Empty, Failure, Success } from './BazingaCell'
+"import type { ComponentStory } from '@storybook/react'
+
+import { Loading, Empty, Failure, Success } from './BazingaCell'
 import { standard } from './BazingaCell.mock'
 
-export const loading = (args) => {
-  return Loading ? <Loading {...args} /> : null
+export const loading = () => {
+  return Loading ? <Loading /> : <></>
 }
 
-export const empty = (args) => {
-  return Empty ? <Empty {...args} /> : null
+export const empty = () => {
+  return Empty ? <Empty /> : <></>
 }
 
-export const failure = (args) => {
-  return Failure ? <Failure error={new Error('Oh no')} {...args} /> : null
+export const failure: ComponentStory<typeof Failure> = (args) => {
+  return Failure ? <Failure error={new Error('Oh no')} {...args} /> : <></>
 }
 
-export const success = (args) => {
-  return Success ? <Success {...standard()} {...args} /> : null
+export const success: ComponentStory<typeof Success> = (args) => {
+  return Success ? <Success {...standard()} {...args} /> : <></>
 }
 
 export default { title: 'Cells/BazingaCell' }
@@ -363,20 +365,20 @@ exports[`creates a cell stories with a camelCase word name 1`] = `
 "import { Loading, Empty, Failure, Success } from './UserProfileCell'
 import { standard } from './UserProfileCell.mock'
 
-export const loading = (args) => {
-  return Loading ? <Loading {...args} /> : null
+export const loading = () => {
+  return Loading ? <Loading /> : <></>
 }
 
-export const empty = (args) => {
-  return Empty ? <Empty {...args} /> : null
+export const empty = () => {
+  return Empty ? <Empty /> : <></>
 }
 
 export const failure = (args) => {
-  return Failure ? <Failure error={new Error('Oh no')} {...args} /> : null
+  return Failure ? <Failure error={new Error('Oh no')} {...args} /> : <></>
 }
 
 export const success = (args) => {
-  return Success ? <Success {...standard()} {...args} /> : null
+  return Success ? <Success {...standard()} {...args} /> : <></>
 }
 
 export default { title: 'Cells/UserProfileCell' }
@@ -387,20 +389,20 @@ exports[`creates a cell stories with a kebabCase word name 1`] = `
 "import { Loading, Empty, Failure, Success } from './UserProfileCell'
 import { standard } from './UserProfileCell.mock'
 
-export const loading = (args) => {
-  return Loading ? <Loading {...args} /> : null
+export const loading = () => {
+  return Loading ? <Loading /> : <></>
 }
 
-export const empty = (args) => {
-  return Empty ? <Empty {...args} /> : null
+export const empty = () => {
+  return Empty ? <Empty /> : <></>
 }
 
 export const failure = (args) => {
-  return Failure ? <Failure error={new Error('Oh no')} {...args} /> : null
+  return Failure ? <Failure error={new Error('Oh no')} {...args} /> : <></>
 }
 
 export const success = (args) => {
-  return Success ? <Success {...standard()} {...args} /> : null
+  return Success ? <Success {...standard()} {...args} /> : <></>
 }
 
 export default { title: 'Cells/UserProfileCell' }
@@ -411,20 +413,20 @@ exports[`creates a cell stories with a multi word name 1`] = `
 "import { Loading, Empty, Failure, Success } from './UserProfileCell'
 import { standard } from './UserProfileCell.mock'
 
-export const loading = (args) => {
-  return Loading ? <Loading {...args} /> : null
+export const loading = () => {
+  return Loading ? <Loading /> : <></>
 }
 
-export const empty = (args) => {
-  return Empty ? <Empty {...args} /> : null
+export const empty = () => {
+  return Empty ? <Empty /> : <></>
 }
 
 export const failure = (args) => {
-  return Failure ? <Failure error={new Error('Oh no')} {...args} /> : null
+  return Failure ? <Failure error={new Error('Oh no')} {...args} /> : <></>
 }
 
 export const success = (args) => {
-  return Success ? <Success {...standard()} {...args} /> : null
+  return Success ? <Success {...standard()} {...args} /> : <></>
 }
 
 export default { title: 'Cells/UserProfileCell' }
@@ -435,20 +437,20 @@ exports[`creates a cell stories with a single word name 1`] = `
 "import { Loading, Empty, Failure, Success } from './UserCell'
 import { standard } from './UserCell.mock'
 
-export const loading = (args) => {
-  return Loading ? <Loading {...args} /> : null
+export const loading = () => {
+  return Loading ? <Loading /> : <></>
 }
 
-export const empty = (args) => {
-  return Empty ? <Empty {...args} /> : null
+export const empty = () => {
+  return Empty ? <Empty /> : <></>
 }
 
 export const failure = (args) => {
-  return Failure ? <Failure error={new Error('Oh no')} {...args} /> : null
+  return Failure ? <Failure error={new Error('Oh no')} {...args} /> : <></>
 }
 
 export const success = (args) => {
-  return Success ? <Success {...standard()} {...args} /> : null
+  return Success ? <Success {...standard()} {...args} /> : <></>
 }
 
 export default { title: 'Cells/UserCell' }
@@ -459,20 +461,20 @@ exports[`creates a cell stories with a snakeCase word name 1`] = `
 "import { Loading, Empty, Failure, Success } from './UserProfileCell'
 import { standard } from './UserProfileCell.mock'
 
-export const loading = (args) => {
-  return Loading ? <Loading {...args} /> : null
+export const loading = () => {
+  return Loading ? <Loading /> : <></>
 }
 
-export const empty = (args) => {
-  return Empty ? <Empty {...args} /> : null
+export const empty = () => {
+  return Empty ? <Empty /> : <></>
 }
 
 export const failure = (args) => {
-  return Failure ? <Failure error={new Error('Oh no')} {...args} /> : null
+  return Failure ? <Failure error={new Error('Oh no')} {...args} /> : <></>
 }
 
 export const success = (args) => {
-  return Success ? <Success {...standard()} {...args} /> : null
+  return Success ? <Success {...standard()} {...args} /> : <></>
 }
 
 export default { title: 'Cells/UserProfileCell' }
@@ -776,20 +778,20 @@ exports[`generates a cell with a string primary id key 3`] = `
 "import { Loading, Empty, Failure, Success } from './AddressCell'
 import { standard } from './AddressCell.mock'
 
-export const loading = (args) => {
-  return Loading ? <Loading {...args} /> : null
+export const loading = () => {
+  return Loading ? <Loading /> : <></>
 }
 
-export const empty = (args) => {
-  return Empty ? <Empty {...args} /> : null
+export const empty = () => {
+  return Empty ? <Empty /> : <></>
 }
 
 export const failure = (args) => {
-  return Failure ? <Failure error={new Error('Oh no')} {...args} /> : null
+  return Failure ? <Failure error={new Error('Oh no')} {...args} /> : <></>
 }
 
 export const success = (args) => {
-  return Success ? <Success {...standard()} {...args} /> : null
+  return Success ? <Success {...standard()} {...args} /> : <></>
 }
 
 export default { title: 'Cells/AddressCell' }
@@ -884,20 +886,20 @@ exports[`generates list a cell with a string primary id keys 3`] = `
 "import { Loading, Empty, Failure, Success } from './AddressesCell'
 import { standard } from './AddressesCell.mock'
 
-export const loading = (args) => {
-  return Loading ? <Loading {...args} /> : null
+export const loading = () => {
+  return Loading ? <Loading /> : <></>
 }
 
-export const empty = (args) => {
-  return Empty ? <Empty {...args} /> : null
+export const empty = () => {
+  return Empty ? <Empty /> : <></>
 }
 
 export const failure = (args) => {
-  return Failure ? <Failure error={new Error('Oh no')} {...args} /> : null
+  return Failure ? <Failure error={new Error('Oh no')} {...args} /> : <></>
 }
 
 export const success = (args) => {
-  return Success ? <Success {...standard()} {...args} /> : null
+  return Success ? <Success {...standard()} {...args} /> : <></>
 }
 
 export default { title: 'Cells/AddressesCell' }
@@ -990,20 +992,20 @@ exports[`generates list cells if list flag passed in 3`] = `
 "import { Loading, Empty, Failure, Success } from './MembersCell'
 import { standard } from './MembersCell.mock'
 
-export const loading = (args) => {
-  return Loading ? <Loading {...args} /> : null
+export const loading = () => {
+  return Loading ? <Loading /> : <></>
 }
 
-export const empty = (args) => {
-  return Empty ? <Empty {...args} /> : null
+export const empty = () => {
+  return Empty ? <Empty /> : <></>
 }
 
 export const failure = (args) => {
-  return Failure ? <Failure error={new Error('Oh no')} {...args} /> : null
+  return Failure ? <Failure error={new Error('Oh no')} {...args} /> : <></>
 }
 
 export const success = (args) => {
-  return Success ? <Success {...standard()} {...args} /> : null
+  return Success ? <Success {...standard()} {...args} /> : <></>
 }
 
 export default { title: 'Cells/MembersCell' }
diff --git a/packages/cli/src/commands/generate/cell/templates/stories.js.template b/packages/cli/src/commands/generate/cell/templates/stories.js.template
index b2bd74c3d80e..5bbbf5ecec79 100644
--- a/packages/cli/src/commands/generate/cell/templates/stories.js.template
+++ b/packages/cli/src/commands/generate/cell/templates/stories.js.template
@@ -1,20 +1,22 @@
+import type { ComponentStory } from '@storybook/react'
+
 import { Loading, Empty, Failure, Success } from './${pascalName}Cell'
 import { standard } from './${pascalName}Cell.mock'
 
-export const loading = (args) => {
-  return Loading ? <Loading {...args} /> : null
+export const loading = () => {
+  return Loading ? <Loading /> : <></>
 }
 
-export const empty = (args) => {
-  return Empty ? <Empty {...args} /> : null
+export const empty = () => {
+  return Empty ? <Empty /> : <></>
 }
 
-export const failure = (args) => {
-  return Failure ? <Failure error={new Error("Oh no")} {...args} /> : null
+export const failure: ComponentStory<typeof Failure> = (args) => {
+  return Failure ? <Failure error={new Error("Oh no")} {...args} /> : <></>
 }
 
-export const success = (args) => {
-  return Success ? <Success {...standard()} {...args} /> : null
+export const success: ComponentStory<typeof Success> = (args) => {
+  return Success ? <Success {...standard()} {...args} /> : <></>
 }
 
 export default { title: 'Cells/${pascalName}Cell' }
diff --git a/packages/cli/src/commands/generate/component/__tests__/__snapshots__/component.test.ts.snap b/packages/cli/src/commands/generate/component/__tests__/__snapshots__/component.test.ts.snap
index 8986b6d9f85d..0b4b4aa99ebb 100644
--- a/packages/cli/src/commands/generate/component/__tests__/__snapshots__/component.test.ts.snap
+++ b/packages/cli/src/commands/generate/component/__tests__/__snapshots__/component.test.ts.snap
@@ -47,13 +47,27 @@ export default UserProfile
 `;
 
 exports[`creates a multi word component story 1`] = `
-"import UserProfile from './UserProfile'
+"// When you've added props to your component,
+// pass Storybook's \`args\` through this story to control it from the addons panel:
+//
+// \`\`\`jsx
+// export const generated = (args) => {
+//   return <UserProfile {...args} />
+// }
+// \`\`\`
+//
+// See https://storybook.js.org/docs/react/writing-stories/args.
 
-export const generated = (args) => {
-  return <UserProfile {...args} />
+import UserProfile from './UserProfile'
+
+export const generated = () => {
+  return <UserProfile />
 }
 
-export default { title: 'Components/UserProfile' }
+export default {
+  title: 'Components/UserProfile',
+  component: UserProfile,
+}
 "
 `;
 
@@ -90,13 +104,27 @@ export default User
 `;
 
 exports[`creates a single word component story 1`] = `
-"import User from './User'
+"// When you've added props to your component,
+// pass Storybook's \`args\` through this story to control it from the addons panel:
+//
+// \`\`\`jsx
+// export const generated = (args) => {
+//   return <User {...args} />
+// }
+// \`\`\`
+//
+// See https://storybook.js.org/docs/react/writing-stories/args.
 
-export const generated = (args) => {
-  return <User {...args} />
+import User from './User'
+
+export const generated = () => {
+  return <User />
 }
 
-export default { title: 'Components/User' }
+export default {
+  title: 'Components/User',
+  component: User,
+}
 "
 `;
 
diff --git a/packages/cli/src/commands/generate/component/component.js b/packages/cli/src/commands/generate/component/component.js
index c5816338cd7a..fe34f7dd6fbc 100644
--- a/packages/cli/src/commands/generate/component/component.js
+++ b/packages/cli/src/commands/generate/component/component.js
@@ -27,7 +27,9 @@ export const files = ({ name, typescript = false, ...options }) => {
     extension: `.stories${extension}`,
     webPathSection: REDWOOD_WEB_PATH_NAME,
     generator: 'component',
-    templatePath: 'stories.tsx.template',
+    // Using two different template files here because we have a TS-specific
+    // information in a comment in the .tsx template
+    templatePath: typescript ? 'stories.tsx.template' : 'stories.js.template',
   })
 
   const files = [componentFile]
diff --git a/packages/cli/src/commands/generate/component/templates/stories.js.template b/packages/cli/src/commands/generate/component/templates/stories.js.template
new file mode 100644
index 000000000000..bc07cedf02d5
--- /dev/null
+++ b/packages/cli/src/commands/generate/component/templates/stories.js.template
@@ -0,0 +1,21 @@
+// When you've added props to your component,
+// pass Storybook's `args` through this story to control it from the addons panel:
+//
+// ```jsx
+// export const generated = (args) => {
+//   return <${pascalName} {...args} />
+// }
+// ```
+//
+// See https://storybook.js.org/docs/react/writing-stories/args.
+
+import ${pascalName} from './${pascalName}'
+
+export const generated = () => {
+  return <${pascalName} />
+}
+
+export default {
+  title: 'Components/${pascalName}',
+  component: ${pascalName},
+}
diff --git a/packages/cli/src/commands/generate/component/templates/stories.tsx.template b/packages/cli/src/commands/generate/component/templates/stories.tsx.template
index 108123534f7f..f90091704700 100644
--- a/packages/cli/src/commands/generate/component/templates/stories.tsx.template
+++ b/packages/cli/src/commands/generate/component/templates/stories.tsx.template
@@ -1,7 +1,25 @@
+// When you've added props to your component,
+// pass Storybook's `args` through this story to control it from the addons panel:
+//
+// ```tsx
+// import type { ComponentStory } from '@storybook/react'
+//
+// export const generated: ComponentStory<typeof ${pascalName}> = (args) => {
+//   return <${pascalName} {...args} />
+// }
+// ```
+//
+// See https://storybook.js.org/docs/react/writing-stories/args.
+
+import type { ComponentMeta } from '@storybook/react'
+
 import ${pascalName} from './${pascalName}'
 
-export const generated = (args) => {
-  return <${pascalName} {...args} />
+export const generated = () => {
+  return <${pascalName} />
 }
 
-export default { title: 'Components/${pascalName}' }
+export default {
+  title: 'Components/${pascalName}',
+  component: ${pascalName},
+} as ComponentMeta<typeof ${pascalName}>
diff --git a/packages/cli/src/commands/generate/layout/__tests__/__snapshots__/layout.test.ts.snap b/packages/cli/src/commands/generate/layout/__tests__/__snapshots__/layout.test.ts.snap
index 40f5c2262e88..4217c5c066ea 100644
--- a/packages/cli/src/commands/generate/layout/__tests__/__snapshots__/layout.test.ts.snap
+++ b/packages/cli/src/commands/generate/layout/__tests__/__snapshots__/layout.test.ts.snap
@@ -92,7 +92,10 @@ export const generated = (args) => {
   return <SinglePageLayout {...args} />
 }
 
-export default { title: 'Layouts/SinglePageLayout' }
+export default {
+  title: 'Layouts/SinglePageLayout',
+  component: SinglePageLayout,
+}
 "
 `;
 
@@ -112,7 +115,10 @@ export const generated = (args) => {
   return <AppLayout {...args} />
 }
 
-export default { title: 'Layouts/AppLayout' }
+export default {
+  title: 'Layouts/AppLayout',
+  component: AppLayout,
+}
 "
 `;
 
diff --git a/packages/cli/src/commands/generate/layout/templates/stories.tsx.template b/packages/cli/src/commands/generate/layout/templates/stories.tsx.template
index 7975cb26d3fb..408ab52dea6a 100644
--- a/packages/cli/src/commands/generate/layout/templates/stories.tsx.template
+++ b/packages/cli/src/commands/generate/layout/templates/stories.tsx.template
@@ -1,7 +1,12 @@
+import type { ComponentMeta, ComponentStory } from '@storybook/react'
+
 import ${singularPascalName}Layout from './${pascalName}Layout'
 
-export const generated = (args) => {
+export const generated: ComponentStory<typeof ${singularPascalName}Layout> = (args) => {
   return <${singularPascalName}Layout {...args} />
 }
 
-export default { title: 'Layouts/${singularPascalName}Layout' }
+export default {
+  title: 'Layouts/${singularPascalName}Layout',
+  component: ${singularPascalName}Layout,
+} as ComponentMeta<typeof ${singularPascalName}Layout>
diff --git a/packages/cli/src/commands/generate/page/__tests__/__snapshots__/page.test.js.snap b/packages/cli/src/commands/generate/page/__tests__/__snapshots__/page.test.js.snap
index f623f2042bce..16d57b202370 100644
--- a/packages/cli/src/commands/generate/page/__tests__/__snapshots__/page.test.js.snap
+++ b/packages/cli/src/commands/generate/page/__tests__/__snapshots__/page.test.js.snap
@@ -104,22 +104,28 @@ export default PostPage
 exports[`creates a page story 1`] = `
 "import HomePage from './HomePage'
 
-export const generated = (args) => {
-  return <HomePage {...args} />
+export const generated = () => {
+  return <HomePage />
 }
 
-export default { title: 'Pages/HomePage' }
+export default {
+  title: 'Pages/HomePage',
+  component: HomePage,
+}
 "
 `;
 
 exports[`creates a page story 2`] = `
 "import ContactUsPage from './ContactUsPage'
 
-export const generated = (args) => {
-  return <ContactUsPage {...args} />
+export const generated = () => {
+  return <ContactUsPage />
 }
 
-export default { title: 'Pages/ContactUsPage' }
+export default {
+  title: 'Pages/ContactUsPage',
+  component: ContactUsPage,
+}
 "
 `;
 
@@ -181,11 +187,14 @@ exports[`file generation 1`] = `
 {
   "fileContent": "import HomePage from './HomePage'
 
-export const generated = (args) => {
-  return <HomePage {...args} />
+export const generated = () => {
+  return <HomePage />
 }
 
-export default { title: 'Pages/HomePage' }
+export default {
+  title: 'Pages/HomePage',
+  component: HomePage,
+}
 ",
   "filePath": "/path/to/project/web/src/pages/HomePage/HomePage.stories.js",
 }
@@ -267,7 +276,10 @@ export const generated = (args) => {
   return <PostPage id={'42'} {...args} />
 }
 
-export default { title: 'Pages/PostPage' }
+export default {
+  title: 'Pages/PostPage',
+  component: PostPage,
+}
 ",
   "filePath": "/path/to/project/web/src/pages/PostPage/PostPage.stories.js",
 }
@@ -345,13 +357,18 @@ export default Routes",
 exports[`generates typescript pages 1`] = `undefined`;
 
 exports[`generates typescript pages 2`] = `
-"import TsFilesPage from './TsFilesPage'
+"import type { ComponentMeta } from '@storybook/react'
 
-export const generated = (args) => {
-  return <TsFilesPage  {...args} />
+import TsFilesPage from './TsFilesPage'
+
+export const generated = () => {
+  return <TsFilesPage />
 }
 
-export default { title: 'Pages/TsFilesPage' }
+export default {
+  title: 'Pages/TsFilesPage',
+  component: TsFilesPage,
+} as ComponentMeta<typeof TsFilesPage>
 "
 `;
 
diff --git a/packages/cli/src/commands/generate/page/__tests__/page.test.js b/packages/cli/src/commands/generate/page/__tests__/page.test.js
index cce3fce68961..427f47b160e0 100644
--- a/packages/cli/src/commands/generate/page/__tests__/page.test.js
+++ b/packages/cli/src/commands/generate/page/__tests__/page.test.js
@@ -318,7 +318,7 @@ test('paramVariants returns empty strings for no params', () => {
 test('paramVariants finds the param and type in the middle of the path', () => {
   expect(page.paramVariants('/post/{id:Int}/edit')).toEqual({
     propParam: '{ id }',
-    propValueParam: 'id={42} ',
+    propValueParam: 'id={42}',
     argumentParam: '{ id: 42 }',
     paramName: 'id',
     paramValue: 42,
@@ -329,7 +329,7 @@ test('paramVariants finds the param and type in the middle of the path', () => {
 test('paramVariants handles boolean type', () => {
   expect(page.paramVariants('/post/edit/{debug:Boolean}')).toEqual({
     propParam: '{ debug }',
-    propValueParam: 'debug={true} ',
+    propValueParam: 'debug={true}',
     argumentParam: '{ debug: true }',
     paramName: 'debug',
     paramValue: true,
@@ -340,7 +340,7 @@ test('paramVariants handles boolean type', () => {
 test('paramVariants paramType defaults to string', () => {
   expect(page.paramVariants('/posts/{id}')).toEqual({
     propParam: '{ id }',
-    propValueParam: "id={'42'} ",
+    propValueParam: "id={'42'}",
     argumentParam: "{ id: '42' }",
     paramName: 'id',
     paramValue: '42',
diff --git a/packages/cli/src/commands/generate/page/page.js b/packages/cli/src/commands/generate/page/page.js
index 59e1c275cb4d..5f2fd2418e1a 100644
--- a/packages/cli/src/commands/generate/page/page.js
+++ b/packages/cli/src/commands/generate/page/page.js
@@ -71,7 +71,7 @@ export const paramVariants = (path) => {
 
   return {
     propParam: `{ ${paramName} }`,
-    propValueParam: `${paramName}={${defaultValueAsProp}} `, // used in story
+    propValueParam: `${paramName}={${defaultValueAsProp}}`, // used in story
     argumentParam: `{ ${paramName}: ${defaultValueAsProp} }`,
     paramName,
     paramValue: defaultValue,
@@ -106,7 +106,10 @@ export const files = ({ name, tests, stories, typescript, ...rest }) => {
     extension: typescript ? '.stories.tsx' : '.stories.js',
     webPathSection: REDWOOD_WEB_PATH_NAME,
     generator: 'page',
-    templatePath: 'stories.tsx.template',
+    templatePath:
+      rest.paramName !== ''
+        ? 'stories.tsx.parametersTemplate'
+        : 'stories.tsx.template',
     templateVars: rest,
   })
 
diff --git a/packages/cli/src/commands/generate/page/templates/stories.tsx.parametersTemplate b/packages/cli/src/commands/generate/page/templates/stories.tsx.parametersTemplate
new file mode 100644
index 000000000000..8b9ebb95ef2c
--- /dev/null
+++ b/packages/cli/src/commands/generate/page/templates/stories.tsx.parametersTemplate
@@ -0,0 +1,12 @@
+import type { ComponentMeta, ComponentStory } from '@storybook/react'
+
+import ${pascalName}Page from './${pascalName}Page'
+
+export const generated: ComponentStory<typeof ${pascalName}Page> = (args) => {
+  return <${pascalName}Page ${propValueParam} {...args} />
+}
+
+export default {
+  title: 'Pages/${pascalName}Page',
+  component: ${pascalName}Page,
+} as ComponentMeta<typeof ${pascalName}Page>
diff --git a/packages/cli/src/commands/generate/page/templates/stories.tsx.template b/packages/cli/src/commands/generate/page/templates/stories.tsx.template
index c503e527031e..e18898da4418 100644
--- a/packages/cli/src/commands/generate/page/templates/stories.tsx.template
+++ b/packages/cli/src/commands/generate/page/templates/stories.tsx.template
@@ -1,7 +1,12 @@
+import type { ComponentMeta } from '@storybook/react'
+
 import ${pascalName}Page from './${pascalName}Page'
 
-export const generated = (args) => {
-  return <${pascalName}Page ${propValueParam} {...args} />
+export const generated = () => {
+  return <${pascalName}Page />
 }
 
-export default { title: 'Pages/${pascalName}Page' }
+export default {
+  title: 'Pages/${pascalName}Page',
+  component: ${pascalName}Page,
+} as ComponentMeta<typeof ${pascalName}Page>
diff --git a/tasks/smoke-test/tests/storybook.spec.ts b/tasks/smoke-test/tests/storybook.spec.ts
index 4b15b3c3894f..0025cc21e85b 100644
--- a/tasks/smoke-test/tests/storybook.spec.ts
+++ b/tasks/smoke-test/tests/storybook.spec.ts
@@ -104,8 +104,8 @@ storybookTest(
 
     if (!profilePageStoryContent.includes('mockCurrentUser')) {
       const contentWithMockCurrentUser = profilePageStoryContent.replace(
-        'export const generated = (args) => {',
-        `export const generated = (args) => {
+        'export const generated = () => {',
+        `export const generated = () => {
           mockCurrentUser({
           email: 'ba@zinga.com',
           id: 55,