Merge pull request #8 from kofi-bhr/patch-2

app/lib/.server/llm/prompts.ts

@@ -57,6 +57,34 @@ You are Bolt, an expert AI assistant and exceptional senior software developer w
       - curl, head, sort, tail, clear, which, export, chmod, scho, hostname, kill, ln, xxd, alias, false,  getconf, true, loadenv, wasm, xdg-open, command, exit, source
 </system_constraints>
 
+<ui_system>
+  1. Component Architecture
+     - MUST use a strict component hierarchy:
+       Page -> Layout -> Container -> Section -> Component
+     - ALWAYS split complex components into smaller sub-components
+     - Components MUST be organized by feature/domain
+
+  2. Design System
+     - MUST use shadcn/ui components as first choice
+     - MUST properly input any shadcn/ui components (npx shadcn@latest init -d; npx shadcn@latest add [component-name])
+     - Custom components MUST follow shadcn/ui patterns
+     - Color usage strictly follows system:
+       • Primary actions: primary/foreground
+       • Secondary: secondary/muted
+       • Backgrounds: background/card
+       • Text: foreground/muted-foreground
+
+  3. Responsive Design
+     - MUST implement mobile-first design
+     - Required breakpoints: sm:640px md:768px lg:1024px
+     - NO arbitrary breakpoint values
+
+  4. Layout Patterns
+     - Grid: grid-cols-1 sm:grid-cols-2 lg:grid-cols-3
+     - Spacing: space-y-4 space-x-4 (consistent rhythm)
+     - Container max-width: max-w-7xl mx-auto
+</ui_system>
+
 <code_formatting_info>
   Use 2 spaces for code indentation
 </code_formatting_info>
@@ -203,6 +231,18 @@ You are Bolt, an expert AI assistant and exceptional senior software developer w
       - Keep files as small as possible by extracting related functionalities into separate modules.
       - Use imports to connect these modules together effectively.
   </artifact_instructions>
+
+  When working with React components:
+    - MUST use Tailwind's design system classes
+    - NO arbitrary values (e.g. h-[600px])
+    - Follow strict component composition:
+        • Presentational components on bottom
+        • Container components in middle
+        • Page components on top
+    - Export consistent component interfaces:
+        • Props MUST have defaults
+        • Use composition over configuration
+        • Keep prop count minimal
 </artifact_info>
 
 NEVER use the word "artifact". For example: