diff --git a/.gitignore b/.gitignore
index f9dae20..9cf2b15 100644
--- a/.gitignore
+++ b/.gitignore
@@ -46,7 +46,3 @@ storybook-static
 # storybook config files (to avoid git changes when switching between local and production)
 .storybook/main.js
 .storybook/preview.js
-.storybook/main.local.js
-.storybook/preview.local.js
-.storybook/main.github.js
-.storybook/preview.github.js
diff --git a/.storybook/main.github.js b/.storybook/main.github.js
new file mode 100644
index 0000000..7afbb5d
--- /dev/null
+++ b/.storybook/main.github.js
@@ -0,0 +1,35 @@
+/** @type { import('@storybook/nextjs-vite').StorybookConfig } */
+const config = {
+  stories: [
+    "../stories/**/*.mdx",
+    "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)",
+  ],
+  addons: [
+    "@chromatic-com/storybook",
+    "@storybook/addon-docs",
+    "@storybook/addon-onboarding",
+    "@storybook/addon-a11y",
+    "@storybook/addon-vitest",
+  ],
+  framework: {
+    name: "@storybook/nextjs-vite",
+    options: {},
+  },
+  staticDirs: ["../public"],
+  managerHead: (head) => `${head}<base href="/communityrulestorybook/">`,
+  previewHead: (head) => `${head}<base href="/communityrulestorybook/">`,
+  async viteFinal(cfg) {
+    // IMPORTANT: Set base path for GitHub Pages sub-path hosting
+    cfg.base = "/communityrulestorybook/";
+    // Ensure esbuild treats .js as JSX during dep pre-bundling
+    cfg.optimizeDeps ??= {};
+    cfg.optimizeDeps.esbuildOptions ??= {};
+    cfg.optimizeDeps.esbuildOptions.loader = {
+      ...(cfg.optimizeDeps.esbuildOptions.loader || {}),
+      ".js": "jsx",
+      ".ts": "tsx",
+    };
+    return cfg;
+  },
+};
+export default config;
diff --git a/.storybook/main.js b/.storybook/main.js
index 6e3993d..7afbb5d 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -16,7 +16,11 @@ const config = {
     options: {},
   },
   staticDirs: ["../public"],
+  managerHead: (head) => `${head}<base href="/communityrulestorybook/">`,
+  previewHead: (head) => `${head}<base href="/communityrulestorybook/">`,
   async viteFinal(cfg) {
+    // IMPORTANT: Set base path for GitHub Pages sub-path hosting
+    cfg.base = "/communityrulestorybook/";
     // Ensure esbuild treats .js as JSX during dep pre-bundling
     cfg.optimizeDeps ??= {};
     cfg.optimizeDeps.esbuildOptions ??= {};
diff --git a/.storybook/main.local.js b/.storybook/main.local.js
new file mode 100644
index 0000000..6e3993d
--- /dev/null
+++ b/.storybook/main.local.js
@@ -0,0 +1,31 @@
+/** @type { import('@storybook/nextjs-vite').StorybookConfig } */
+const config = {
+  stories: [
+    "../stories/**/*.mdx",
+    "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)",
+  ],
+  addons: [
+    "@chromatic-com/storybook",
+    "@storybook/addon-docs",
+    "@storybook/addon-onboarding",
+    "@storybook/addon-a11y",
+    "@storybook/addon-vitest",
+  ],
+  framework: {
+    name: "@storybook/nextjs-vite",
+    options: {},
+  },
+  staticDirs: ["../public"],
+  async viteFinal(cfg) {
+    // Ensure esbuild treats .js as JSX during dep pre-bundling
+    cfg.optimizeDeps ??= {};
+    cfg.optimizeDeps.esbuildOptions ??= {};
+    cfg.optimizeDeps.esbuildOptions.loader = {
+      ...(cfg.optimizeDeps.esbuildOptions.loader || {}),
+      ".js": "jsx",
+      ".ts": "tsx",
+    };
+    return cfg;
+  },
+};
+export default config;
diff --git a/.storybook/preview.github.js b/.storybook/preview.github.js
new file mode 100644
index 0000000..1fd25df
--- /dev/null
+++ b/.storybook/preview.github.js
@@ -0,0 +1,16 @@
+import "../app/globals.css";
+
+/** @type { import('@storybook/react').Preview } */
+const preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;
diff --git a/.storybook/preview.local.js b/.storybook/preview.local.js
new file mode 100644
index 0000000..1fd25df
--- /dev/null
+++ b/.storybook/preview.local.js
@@ -0,0 +1,16 @@
+import "../app/globals.css";
+
+/** @type { import('@storybook/react').Preview } */
+const preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;