diff --git a/lib/cli/src/generators/ANGULAR/index.ts b/lib/cli/src/generators/ANGULAR/index.ts
index 608101c05817..f7feb24a3ed7 100644
--- a/lib/cli/src/generators/ANGULAR/index.ts
+++ b/lib/cli/src/generators/ANGULAR/index.ts
@@ -39,10 +39,6 @@ async function addDependencies(
   packageJson.dependencies = packageJson.dependencies || {};
   packageJson.devDependencies = packageJson.devDependencies || {};
 
-  packageJson.scripts = packageJson.scripts || {};
-  packageJson.scripts.storybook = 'start-storybook -p 6006';
-  packageJson.scripts['build-storybook'] = 'build-storybook';
-
   writePackageJson(packageJson);
 
   const babelDependencies = await getBabelDependencies(packageManager, packageJson);
@@ -51,6 +47,8 @@ async function addDependencies(
     ...versionedPackages,
     ...babelDependencies,
   ]);
+
+  packageManager.addStorybookCommandInScripts();
 }
 
 function editAngularAppTsConfig() {
diff --git a/lib/cli/src/generators/AURELIA/index.ts b/lib/cli/src/generators/AURELIA/index.ts
index 76afc978e2d5..ab6b85389805 100644
--- a/lib/cli/src/generators/AURELIA/index.ts
+++ b/lib/cli/src/generators/AURELIA/index.ts
@@ -50,9 +50,6 @@ const generator: Generator = async (
   const packageJson = packageManager.retrievePackageJson();
   packageJson.dependencies = packageJson.dependencies || {};
   packageJson.devDependencies = packageJson.devDependencies || {};
-  packageJson.scripts = packageJson.scripts || {};
-  packageJson.scripts.storybook = 'start-storybook -p 6006';
-  packageJson.scripts['build-storybook'] = 'build-storybook';
   writePackageJson(packageJson);
   addStorybookExcludeGlobToTsConfig();
   const babelDependencies = await getBabelDependencies(packageManager, packageJson);
@@ -60,6 +57,8 @@ const generator: Generator = async (
     ...versionedPackages,
     ...babelDependencies,
   ]);
+
+  packageManager.addStorybookCommandInScripts();
 };
 
 export default generator;
diff --git a/lib/cli/src/generators/EMBER/index.ts b/lib/cli/src/generators/EMBER/index.ts
index c698d21394b2..d8256d6de73d 100644
--- a/lib/cli/src/generators/EMBER/index.ts
+++ b/lib/cli/src/generators/EMBER/index.ts
@@ -27,14 +27,6 @@ const generator: Generator = async (packageManager, npmOptions, { storyFormat })
   packageJson.dependencies = packageJson.dependencies || {};
   packageJson.devDependencies = packageJson.devDependencies || {};
 
-  packageJson.scripts = {
-    ...packageJson.scripts,
-    ...{
-      storybook: 'start-storybook -p 6006 -s dist',
-      'build-storybook': 'build-storybook -s dist',
-    },
-  };
-
   writePackageJson(packageJson);
 
   const babelDependencies = await getBabelDependencies(packageManager, packageJson);
@@ -48,6 +40,8 @@ const generator: Generator = async (packageManager, npmOptions, { storyFormat })
     `babel-plugin-htmlbars-inline-precompile@${babelPluginHtmlBarsInlinePrecompileVersion}`,
     ...babelDependencies,
   ]);
+
+  packageManager.addStorybookCommandInScripts();
 };
 
 export default generator;
diff --git a/lib/cli/src/generators/HTML/index.ts b/lib/cli/src/generators/HTML/index.ts
index 4f502dfcde20..d0c74e9ddac7 100755
--- a/lib/cli/src/generators/HTML/index.ts
+++ b/lib/cli/src/generators/HTML/index.ts
@@ -4,31 +4,26 @@ import { Generator } from '../Generator';
 
 const generator: Generator = async (packageManager, npmOptions, { storyFormat }) => {
   const packages = ['@storybook/html', '@storybook/addon-actions', '@storybook/addon-links'];
-
-  const versionedPackages = await packageManager.getVersionedPackages(...packages);
   if (storyFormat === StoryFormat.MDX) {
     packages.push('@storybook/addon-docs');
   }
 
+  const versionedPackages = await packageManager.getVersionedPackages(...packages);
+
   copyTemplate(__dirname, storyFormat);
 
   const packageJson = packageManager.retrievePackageJson();
-
   packageJson.dependencies = packageJson.dependencies || {};
   packageJson.devDependencies = packageJson.devDependencies || {};
-
-  packageJson.scripts = packageJson.scripts || {};
-  packageJson.scripts.storybook = 'start-storybook -p 6006';
-  packageJson.scripts['build-storybook'] = 'build-storybook';
-
   writePackageJson(packageJson);
 
   const babelDependencies = await getBabelDependencies(packageManager, packageJson);
-
   packageManager.addDependencies({ ...npmOptions, packageJson }, [
     ...versionedPackages,
     ...babelDependencies,
   ]);
+
+  packageManager.addStorybookCommandInScripts();
 };
 
 export default generator;
diff --git a/lib/cli/src/generators/MARIONETTE/index.ts b/lib/cli/src/generators/MARIONETTE/index.ts
index 71fc48b1095a..aaad0fa50f47 100644
--- a/lib/cli/src/generators/MARIONETTE/index.ts
+++ b/lib/cli/src/generators/MARIONETTE/index.ts
@@ -12,10 +12,6 @@ const generator: Generator = async (packageManager, npmOptions) => {
   packageJson.dependencies = packageJson.dependencies || {};
   packageJson.devDependencies = packageJson.devDependencies || {};
 
-  packageJson.scripts = packageJson.scripts || {};
-  packageJson.scripts.storybook = 'start-storybook -p 6006';
-  packageJson.scripts['build-storybook'] = 'build-storybook';
-
   writePackageJson(packageJson);
 
   const babelDependencies = await getBabelDependencies(packageManager, packageJson);
@@ -24,6 +20,8 @@ const generator: Generator = async (packageManager, npmOptions) => {
     `@storybook/marionette@${storybookVersion}`,
     ...babelDependencies,
   ]);
+
+  packageManager.addStorybookCommandInScripts();
 };
 
 export default generator;
diff --git a/lib/cli/src/generators/MARKO/index.ts b/lib/cli/src/generators/MARKO/index.ts
index 584675033a2f..16fb753a0638 100644
--- a/lib/cli/src/generators/MARKO/index.ts
+++ b/lib/cli/src/generators/MARKO/index.ts
@@ -19,10 +19,6 @@ const generator: Generator = async (packageManager, npmOptions, { storyFormat })
   packageJson.dependencies = packageJson.dependencies || {};
   packageJson.devDependencies = packageJson.devDependencies || {};
 
-  packageJson.scripts = packageJson.scripts || {};
-  packageJson.scripts.storybook = 'start-storybook -p 6006';
-  packageJson.scripts['build-storybook'] = 'build-storybook';
-
   writePackageJson(packageJson);
 
   const babelDependencies = await getBabelDependencies(packageManager, packageJson);
@@ -33,6 +29,8 @@ const generator: Generator = async (packageManager, npmOptions, { storyFormat })
     `@storybook/addon-knobs@${addonKnobsVersion}`,
     ...babelDependencies,
   ]);
+
+  packageManager.addStorybookCommandInScripts();
 };
 
 export default generator;
diff --git a/lib/cli/src/generators/METEOR/index.ts b/lib/cli/src/generators/METEOR/index.ts
index 18bffe046b04..e5744031f3e0 100644
--- a/lib/cli/src/generators/METEOR/index.ts
+++ b/lib/cli/src/generators/METEOR/index.ts
@@ -31,7 +31,6 @@ const generator: Generator = async (packageManager, npmOptions, { storyFormat })
   const packageJson = packageManager.retrievePackageJson();
 
   packageJson.devDependencies = packageJson.devDependencies || {};
-  packageJson.scripts = packageJson.scripts || {};
   packageJson.dependencies = packageJson.dependencies || {};
 
   const devDependencies = [
@@ -62,9 +61,6 @@ const generator: Generator = async (packageManager, npmOptions, { storyFormat })
 
   fs.writeFileSync('.babelrc', JSON.stringify(babelrc, null, 2), 'utf8');
 
-  packageJson.scripts.storybook = 'start-storybook -p 6006';
-  packageJson.scripts['build-storybook'] = 'build-storybook';
-
   writePackageJson(packageJson);
 
   const babelDependencies = await getBabelDependencies(packageManager, packageJson);
@@ -89,6 +85,8 @@ const generator: Generator = async (packageManager, npmOptions, { storyFormat })
     ...devDependencies,
     ...babelDependencies,
   ]);
+
+  packageManager.addStorybookCommandInScripts();
 };
 
 export default generator;
diff --git a/lib/cli/src/generators/MITHRIL/index.ts b/lib/cli/src/generators/MITHRIL/index.ts
index edb5c89e18e7..a5a9325c9a6c 100644
--- a/lib/cli/src/generators/MITHRIL/index.ts
+++ b/lib/cli/src/generators/MITHRIL/index.ts
@@ -23,10 +23,6 @@ const generator: Generator = async (packageManager, npmOptions, { storyFormat })
   packageJson.dependencies = packageJson.dependencies || {};
   packageJson.devDependencies = packageJson.devDependencies || {};
 
-  packageJson.scripts = packageJson.scripts || {};
-  packageJson.scripts.storybook = 'start-storybook -p 6006';
-  packageJson.scripts['build-storybook'] = 'build-storybook';
-
   writePackageJson(packageJson);
 
   const babelDependencies = await getBabelDependencies(packageManager, packageJson);
@@ -39,6 +35,8 @@ const generator: Generator = async (packageManager, npmOptions, { storyFormat })
     `@storybook/addons@${addonsVersion}`,
     ...babelDependencies,
   ]);
+
+  packageManager.addStorybookCommandInScripts();
 };
 
 export default generator;
diff --git a/lib/cli/src/generators/PREACT/index.ts b/lib/cli/src/generators/PREACT/index.ts
index 2ec2c956ed8c..3c325c371593 100644
--- a/lib/cli/src/generators/PREACT/index.ts
+++ b/lib/cli/src/generators/PREACT/index.ts
@@ -21,10 +21,6 @@ const generator: Generator = async (packageManager, npmOptions, { storyFormat })
   packageJson.dependencies = packageJson.dependencies || {};
   packageJson.devDependencies = packageJson.devDependencies || {};
 
-  packageJson.scripts = packageJson.scripts || {};
-  packageJson.scripts.storybook = 'start-storybook -p 6006';
-  packageJson.scripts['build-storybook'] = 'build-storybook';
-
   writePackageJson(packageJson);
 
   const babelDependencies = await getBabelDependencies(packageManager, packageJson);
@@ -36,6 +32,8 @@ const generator: Generator = async (packageManager, npmOptions, { storyFormat })
     `@storybook/addons@${addonsVersion}`,
     ...babelDependencies,
   ]);
+
+  packageManager.addStorybookCommandInScripts();
 };
 
 export default generator;
diff --git a/lib/cli/src/generators/RAX/index.ts b/lib/cli/src/generators/RAX/index.ts
index 8eabdeaf5d91..8a5e3689ede0 100644
--- a/lib/cli/src/generators/RAX/index.ts
+++ b/lib/cli/src/generators/RAX/index.ts
@@ -34,10 +34,6 @@ const generator: Generator = async (packageManager, npmOptions, { storyFormat })
   packageJson.dependencies['rax-text'] = packageJson.dependencies['rax-text'] || raxVersion;
   packageJson.dependencies['rax-view'] = packageJson.dependencies['rax-view'] || raxVersion;
 
-  packageJson.scripts = packageJson.scripts || {};
-  packageJson.scripts.storybook = 'start-storybook -p 6006';
-  packageJson.scripts['build-storybook'] = 'build-storybook';
-
   writePackageJson(packageJson);
 
   const babelDependencies = await getBabelDependencies(packageManager, packageJson);
@@ -49,6 +45,8 @@ const generator: Generator = async (packageManager, npmOptions, { storyFormat })
     `@storybook/addons@${addonsVersion}`,
     ...babelDependencies,
   ]);
+
+  packageManager.addStorybookCommandInScripts();
 };
 
 export default generator;
diff --git a/lib/cli/src/generators/REACT/index.ts b/lib/cli/src/generators/REACT/index.ts
index 8dd954481fe6..14202faef18a 100644
--- a/lib/cli/src/generators/REACT/index.ts
+++ b/lib/cli/src/generators/REACT/index.ts
@@ -22,10 +22,6 @@ const generator: Generator = async (packageManager, npmOptions, { storyFormat })
   packageJson.dependencies = packageJson.dependencies || {};
   packageJson.devDependencies = packageJson.devDependencies || {};
 
-  packageJson.scripts = packageJson.scripts || {};
-  packageJson.scripts.storybook = 'start-storybook -p 6006';
-  packageJson.scripts['build-storybook'] = 'build-storybook';
-
   writePackageJson(packageJson);
 
   const babelDependencies = await getBabelDependencies(packageManager, packageJson);
@@ -34,6 +30,8 @@ const generator: Generator = async (packageManager, npmOptions, { storyFormat })
     ...versionedPackages,
     ...babelDependencies,
   ]);
+
+  packageManager.addStorybookCommandInScripts();
 };
 
 export default generator;
diff --git a/lib/cli/src/generators/REACT_SCRIPTS/index.ts b/lib/cli/src/generators/REACT_SCRIPTS/index.ts
index 67fadf36e82c..8fa81ff1c5fe 100644
--- a/lib/cli/src/generators/REACT_SCRIPTS/index.ts
+++ b/lib/cli/src/generators/REACT_SCRIPTS/index.ts
@@ -26,16 +26,6 @@ const generator: Generator = async (packageManager, npmOptions, { storyFormat })
   packageJson.dependencies = packageJson.dependencies || {};
   packageJson.devDependencies = packageJson.devDependencies || {};
 
-  packageJson.scripts = packageJson.scripts || {};
-  packageJson.scripts.storybook = 'start-storybook -p 9009';
-  packageJson.scripts['build-storybook'] = 'build-storybook';
-
-  if (fs.existsSync(path.resolve('./public'))) {
-    // has a public folder and add support to it.
-    packageJson.scripts.storybook += ' -s public';
-    packageJson.scripts['build-storybook'] += ' -s public';
-  }
-
   writePackageJson(packageJson);
 
   const babelDependencies = await getBabelDependencies(packageManager, packageJson);
@@ -44,6 +34,11 @@ const generator: Generator = async (packageManager, npmOptions, { storyFormat })
     ...versionedPackages,
     ...babelDependencies,
   ]);
+
+  packageManager.addStorybookCommandInScripts({
+    port: 9009,
+    staticFolder: fs.existsSync(path.resolve('./public')) ? 'public' : undefined,
+  });
 };
 
 export default generator;
diff --git a/lib/cli/src/generators/RIOT/index.ts b/lib/cli/src/generators/RIOT/index.ts
index 262298956169..f0335fc6742b 100644
--- a/lib/cli/src/generators/RIOT/index.ts
+++ b/lib/cli/src/generators/RIOT/index.ts
@@ -32,12 +32,9 @@ const generator: Generator = async (packageManager, npmOptions, { storyFormat })
   if (
     !packageJson.devDependencies['riot-tag-loader'] &&
     !packageJson.dependencies['riot-tag-loader']
-  )
+  ) {
     dependencies.push(`riot-tag-loader@${tagLoaderVersion}`);
-
-  packageJson.scripts = packageJson.scripts || {};
-  packageJson.scripts.storybook = 'start-storybook -p 6006';
-  packageJson.scripts['build-storybook'] = 'build-storybook';
+  }
 
   writePackageJson(packageJson);
 
@@ -47,6 +44,8 @@ const generator: Generator = async (packageManager, npmOptions, { storyFormat })
     ...dependencies,
     ...babelDependencies,
   ]);
+
+  packageManager.addStorybookCommandInScripts();
 };
 
 export default generator;
diff --git a/lib/cli/src/generators/SFC_VUE/index.ts b/lib/cli/src/generators/SFC_VUE/index.ts
index 90b109fbe95a..b55947f6599f 100644
--- a/lib/cli/src/generators/SFC_VUE/index.ts
+++ b/lib/cli/src/generators/SFC_VUE/index.ts
@@ -21,10 +21,6 @@ const generator: Generator = async (packageManager, npmOptions, { storyFormat })
   packageJson.dependencies = packageJson.dependencies || {};
   packageJson.devDependencies = packageJson.devDependencies || {};
 
-  packageJson.scripts = packageJson.scripts || {};
-  packageJson.scripts.storybook = 'start-storybook -p 6006';
-  packageJson.scripts['build-storybook'] = 'build-storybook';
-
   writePackageJson(packageJson);
 
   const babelDependencies = await getBabelDependencies(packageManager, packageJson);
@@ -33,6 +29,8 @@ const generator: Generator = async (packageManager, npmOptions, { storyFormat })
     ...versionedPackages,
     ...babelDependencies,
   ]);
+
+  packageManager.addStorybookCommandInScripts();
 };
 
 export default generator;
diff --git a/lib/cli/src/generators/SVELTE/index.ts b/lib/cli/src/generators/SVELTE/index.ts
index 3b2accf677b6..4025449f86a4 100644
--- a/lib/cli/src/generators/SVELTE/index.ts
+++ b/lib/cli/src/generators/SVELTE/index.ts
@@ -25,10 +25,6 @@ const generator: Generator = async (packageManager, npmOptions, { storyFormat })
   packageJson.dependencies = packageJson.dependencies || {};
   packageJson.devDependencies = packageJson.devDependencies || {};
 
-  packageJson.scripts = packageJson.scripts || {};
-  packageJson.scripts.storybook = 'start-storybook -p 6006';
-  packageJson.scripts['build-storybook'] = 'build-storybook';
-
   writePackageJson(packageJson);
 
   const babelDependencies = await getBabelDependencies(packageManager, packageJson);
@@ -42,6 +38,8 @@ const generator: Generator = async (packageManager, npmOptions, { storyFormat })
     `svelte-loader@${svelteLoader}`,
     ...babelDependencies,
   ]);
+
+  packageManager.addStorybookCommandInScripts();
 };
 
 export default generator;
diff --git a/lib/cli/src/generators/VUE/index.ts b/lib/cli/src/generators/VUE/index.ts
index 86899a4fe064..4655bf7d1bd6 100644
--- a/lib/cli/src/generators/VUE/index.ts
+++ b/lib/cli/src/generators/VUE/index.ts
@@ -41,10 +41,6 @@ const generator: Generator = async (packageManager, npmOptions, { storyFormat })
     );
   }
 
-  packageJson.scripts = packageJson.scripts || {};
-  packageJson.scripts.storybook = 'start-storybook -p 6006';
-  packageJson.scripts['build-storybook'] = 'build-storybook';
-
   writePackageJson(packageJson);
 
   const babelDependencies = await getBabelDependencies(packageManager, packageJson);
@@ -52,6 +48,8 @@ const generator: Generator = async (packageManager, npmOptions, { storyFormat })
     ...versionedPackages,
     ...babelDependencies,
   ]);
+
+  packageManager.addStorybookCommandInScripts();
 };
 
 export default generator;
diff --git a/lib/cli/src/generators/WEB-COMPONENTS/index.ts b/lib/cli/src/generators/WEB-COMPONENTS/index.ts
index 721d88e7522f..88b525ffe5d6 100755
--- a/lib/cli/src/generators/WEB-COMPONENTS/index.ts
+++ b/lib/cli/src/generators/WEB-COMPONENTS/index.ts
@@ -25,10 +25,6 @@ const generator: Generator = async (packageManager, npmOptions, { storyFormat })
   packageJson.dependencies = packageJson.dependencies || {};
   packageJson.devDependencies = packageJson.devDependencies || {};
 
-  packageJson.scripts = packageJson.scripts || {};
-  packageJson.scripts.storybook = 'start-storybook -p 6006';
-  packageJson.scripts['build-storybook'] = 'build-storybook';
-
   writePackageJson(packageJson);
 
   const babelDependencies = await getBabelDependencies(packageManager, packageJson);
@@ -37,6 +33,8 @@ const generator: Generator = async (packageManager, npmOptions, { storyFormat })
     ...versionedPackages,
     ...babelDependencies,
   ]);
+
+  packageManager.addStorybookCommandInScripts();
 };
 
 export default generator;
diff --git a/lib/cli/src/generators/WEBPACK_REACT/index.ts b/lib/cli/src/generators/WEBPACK_REACT/index.ts
index 433015afdd34..c8585774d071 100644
--- a/lib/cli/src/generators/WEBPACK_REACT/index.ts
+++ b/lib/cli/src/generators/WEBPACK_REACT/index.ts
@@ -21,10 +21,6 @@ const generator: Generator = async (packageManager, npmOptions, { storyFormat })
   packageJson.dependencies = packageJson.dependencies || {};
   packageJson.devDependencies = packageJson.devDependencies || {};
 
-  packageJson.scripts = packageJson.scripts || {};
-  packageJson.scripts.storybook = 'start-storybook -p 6006';
-  packageJson.scripts['build-storybook'] = 'build-storybook';
-
   writePackageJson(packageJson);
 
   const babelDependencies = await getBabelDependencies(packageManager, packageJson);
@@ -33,6 +29,8 @@ const generator: Generator = async (packageManager, npmOptions, { storyFormat })
     ...versionedPackages,
     ...babelDependencies,
   ]);
+
+  packageManager.addStorybookCommandInScripts();
 };
 
 export default generator;
diff --git a/lib/cli/src/js-package-manager/JsPackageManager.ts b/lib/cli/src/js-package-manager/JsPackageManager.ts
index f93acc82aaeb..daeac9c7a482 100644
--- a/lib/cli/src/js-package-manager/JsPackageManager.ts
+++ b/lib/cli/src/js-package-manager/JsPackageManager.ts
@@ -9,6 +9,8 @@ const logger = console;
 // Cannot be `import` as it's not under TS root dir
 const { storybookCLIVersion, devDependencies } = require('../../package.json');
 
+export type parap = { port: number; staticFolder?: string };
+
 export abstract class JsPackageManager {
   public abstract initPackageJson(): void;
 
@@ -173,6 +175,28 @@ export abstract class JsPackageManager {
     return versions.reverse().find((version) => satisfies(version, constraint));
   }
 
+  public addStorybookCommandInScripts(options?: { port: number; staticFolder?: string }) {
+    const packageJson = this.retrievePackageJson();
+
+    const sbPort = options?.port ?? 6006;
+    const storybookCmd = options?.staticFolder
+      ? `start-storybook -p ${sbPort} -s ${options.staticFolder}`
+      : `start-storybook -p ${sbPort}`;
+
+    const buildStorybookCmd = options?.staticFolder
+      ? `build-storybook -s ${options.staticFolder}`
+      : 'build-storybook';
+
+    writePackageJson({
+      ...packageJson,
+      scripts: {
+        ...packageJson.scripts,
+        storybook: storybookCmd,
+        'build-storybook': buildStorybookCmd,
+      },
+    });
+  }
+
   protected abstract runInstall(): { status: number };
 
   protected abstract runAddDeps(