diff --git a/frontend/src/components/OutputSettingsSection.tsx b/frontend/src/components/OutputSettingsSection.tsx
index 06ae6efd..99de3092 100644
--- a/frontend/src/components/OutputSettingsSection.tsx
+++ b/frontend/src/components/OutputSettingsSection.tsx
@@ -6,11 +6,12 @@ import {
   SelectItem,
   SelectTrigger,
 } from "./ui/select";
-import { GeneratedCodeConfig, STACK_DESCRIPTION } from "../types";
 import { Badge } from "./ui/badge";
+import { GeneratedCodeConfig } from "../lib/stacks/types";
+import { STACK_DESCRIPTIONS } from "../lib/stacks/descriptions";
 
 function generateDisplayComponent(stack: GeneratedCodeConfig) {
-  const stackComponents = STACK_DESCRIPTION[stack].components;
+  const stackComponents = STACK_DESCRIPTIONS[stack].components;
 
   return (
     <div>
@@ -59,7 +60,7 @@ function OutputSettingsSection({
                 <SelectItem value={stack}>
                   <div className="flex items-center">
                     {generateDisplayComponent(stack)}
-                    {STACK_DESCRIPTION[stack].inBeta && (
+                    {STACK_DESCRIPTIONS[stack].inBeta && (
                       <Badge className="ml-2" variant="secondary">
                         Beta
                       </Badge>
diff --git a/frontend/src/lib/stacks/descriptions.ts b/frontend/src/lib/stacks/descriptions.ts
new file mode 100644
index 00000000..abd75c31
--- /dev/null
+++ b/frontend/src/lib/stacks/descriptions.ts
@@ -0,0 +1,12 @@
+import { GeneratedCodeConfig } from "./types";
+
+export const STACK_DESCRIPTIONS: {
+  [key in GeneratedCodeConfig]: { components: string[]; inBeta: boolean };
+} = {
+  html_tailwind: { components: ["HTML", "Tailwind"], inBeta: false },
+  react_tailwind: { components: ["React", "Tailwind"], inBeta: false },
+  bootstrap: { components: ["Bootstrap"], inBeta: false },
+  vue_tailwind: { components: ["Vue", "Tailwind"], inBeta: true },
+  ionic_tailwind: { components: ["Ionic", "Tailwind"], inBeta: true },
+  svg: { components: ["SVG"], inBeta: true },
+};
diff --git a/frontend/src/lib/stacks/types.ts b/frontend/src/lib/stacks/types.ts
new file mode 100644
index 00000000..13448368
--- /dev/null
+++ b/frontend/src/lib/stacks/types.ts
@@ -0,0 +1,9 @@
+// Keep in sync with backend (prompts/types.py)
+export enum GeneratedCodeConfig {
+  HTML_TAILWIND = "html_tailwind",
+  REACT_TAILWIND = "react_tailwind",
+  BOOTSTRAP = "bootstrap",
+  VUE_TAILWIND = "vue_tailwind",
+  IONIC_TAILWIND = "ionic_tailwind",
+  SVG = "svg",
+}
diff --git a/frontend/src/types.ts b/frontend/src/types.ts
index 31459cb2..5a5ced7c 100644
--- a/frontend/src/types.ts
+++ b/frontend/src/types.ts
@@ -1,29 +1,10 @@
+import { GeneratedCodeConfig } from "./lib/stacks/types";
+
 export enum EditorTheme {
   ESPRESSO = "espresso",
   COBALT = "cobalt",
 }
 
-// Keep in sync with backend (prompts/types.py)
-export enum GeneratedCodeConfig {
-  HTML_TAILWIND = "html_tailwind",
-  REACT_TAILWIND = "react_tailwind",
-  BOOTSTRAP = "bootstrap",
-  VUE_TAILWIND = "vue_tailwind",
-  IONIC_TAILWIND = "ionic_tailwind",
-  SVG = "svg",
-}
-
-export const STACK_DESCRIPTION: {
-  [key in GeneratedCodeConfig]: { components: string[]; inBeta: boolean };
-} = {
-  html_tailwind: { components: ["HTML", "Tailwind"], inBeta: false },
-  react_tailwind: { components: ["React", "Tailwind"], inBeta: false },
-  bootstrap: { components: ["Bootstrap"], inBeta: false },
-  vue_tailwind: { components: ["Vue", "Tailwind"], inBeta: true },
-  ionic_tailwind: { components: ["Ionic", "Tailwind"], inBeta: true },
-  svg: { components: ["SVG"], inBeta: true },
-};
-
 export interface Settings {
   openAiApiKey: string | null;
   openAiBaseURL: string | null;
@@ -51,3 +32,4 @@ export interface CodeGenerationParams {
 }
 
 export type FullGenerationSettings = CodeGenerationParams & Settings;
+export { GeneratedCodeConfig };