From 8556b38b5ae309b056d4138c32fc76a68974ab29 Mon Sep 17 00:00:00 2001
From: Kofi <74067324+kofi-bhr@users.noreply.github.com>
Date: Tue, 22 Oct 2024 16:07:57 -0500
Subject: [PATCH] Prompting best practices + UI fix

Improvements:

- Systematic design rules vs ad-hoc styling
- Enforced component hierarchy
- Explicit layout patterns
- Design system integration
---
 app/lib/.server/llm/prompts.ts | 40 ++++++++++++++++++++++++++++++++++
 1 file changed, 40 insertions(+)

diff --git a/app/lib/.server/llm/prompts.ts b/app/lib/.server/llm/prompts.ts
index f78b41873..9d9a88640 100644
--- a/app/lib/.server/llm/prompts.ts
+++ b/app/lib/.server/llm/prompts.ts
@@ -32,6 +32,34 @@ You are Bolt, an expert AI assistant and exceptional senior software developer w
   Available shell commands: cat, chmod, cp, echo, hostname, kill, ln, ls, mkdir, mv, ps, pwd, rm, rmdir, xxd, alias, cd, clear, curl, env, false, getconf, head, sort, tail, touch, true, uptime, which, code, jq, loadenv, node, python3, wasm, xdg-open, command, exit, export, 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>
@@ -148,6 +176,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: