add css generate prompt

Author: ZHallen122

backend/src/build-system/handlers/frontend-code-generate/index.ts

@@ -18,7 +18,7 @@ import {
 } from 'src/build-system/utils/database-utils';
 
 // The function from step #1
-import { generateFrontEndCodePrompt } from './prompt';
+import { generateFrontEndCodePrompt, generateCSSPrompt } from './prompt';
 
 /**
  * FrontendCodeHandler is responsible for generating the frontend codebase
@@ -61,6 +61,8 @@ export class FrontendCodeHandler implements BuildHandler<string> {
         path.resolve(frontendPath, 'src', file),
       );
 
+      const extension = currentFullFilePath.split('.').pop() || '';
+
       // Retrieve the direct dependencies for this file
       const directDepsArray = fileInfos[file]?.dependsOn || [];
 
@@ -96,15 +98,30 @@ export class FrontendCodeHandler implements BuildHandler<string> {
         `2 Generating file in dependency order directDependencies: ${directDependencies}`,
       );
 
-      // Generate the prompt
-      const frontendCodePrompt = generateFrontEndCodePrompt(
-        sitemapDoc,
-        uxDataMapDoc,
-        backendRequirementDoc.overview,
-        currentFullFilePath,
-        directDependencies,
-        dependenciesContext,
+      let frontendCodePrompt = '';
+
+      if (extension === 'css') {
+        frontendCodePrompt = generateCSSPrompt(
+          file,
+          directDependencies,
+          dependenciesContext,
+        );
+      } else {
+        // Generate the prompt
+        frontendCodePrompt = generateFrontEndCodePrompt(
+          sitemapDoc,
+          uxDataMapDoc,
+          backendRequirementDoc.overview,
+          file,
+          directDependencies,
+          dependenciesContext,
+        );
+      }
+      this.logger.log(
+        'generate code prompt for frontendCodePrompt or css: ' +
+          frontendCodePrompt,
       );
+
       this.logger.debug('Generated frontend code prompt.');
 
       let generatedCode = '';

backend/src/build-system/handlers/frontend-code-generate/prompt.ts

@@ -60,3 +60,33 @@ export const generateFrontEndCodePrompt = (
 
   `;
 };
+
+export function generateCSSPrompt(
+  fileName: string,
+  directDependencies: string,
+  dependenciesContext: string,
+): string {
+  return `
+  You are an expert CSS developer. Generate valid, production-ready CSS for the file "${fileName}".
+
+    ## Context
+    - Direct Dependencies (if any and may include references to other styles or partials):
+    ${directDependencies}
+
+    - Direct Dependencies Context (if any):
+    ${dependenciesContext}
+
+  ## Rules & Guidelines
+    1. **Do NOT** include any JavaScript or React code—only plain CSS.
+    2. **Do NOT** wrap your output in code fences (\`\`\`).
+    3. You may define classes, IDs, or any selectors you need, but **be sure** to keep it purely CSS.
+    4. Ensure the output is well-structured, readable, and adheres to best practices (e.g., BEM if you prefer).
+    5. Include comments for clarity if needed, but keep them concise.
+  
+  ## Output Format
+    Please produce the complete CSS content in the format described:
+    <GENERATE>
+    /* Your CSS content here */
+    </GENERATE>
+  `;
+}