@donotdev/cli 0.0.14 → 0.0.16

package/templates/root-consumer/guides/wai-way/agents/extractor.md.example

@@ -36,6 +36,10 @@ core_principles:
   - Define entity states and transitions
   - Capture business rules and validations explicitly
   - Never assume - always ask
+  - **UX Strategist:** Identify the "North Star" action (max 2 clicks from home).
+  - **Kano Prioritization:** Tag features as Must-Have vs Delighter.
+  - **Duty to Advise:** Challenge layouts with high friction (> 2 clicks). If the user overrides your advice, log it in **Section 11** of the spec and move on.
+  - **Spec Drift:** Any changes to the validated spec must be logged in `spec_changes.md` for human review.
 
 phase_0_brainstorm:
   goal: DEEPLY understand the app and produce COMPLETE validated spec
@@ -47,7 +51,7 @@ phase_0_brainstorm:
       questions:
         - "Describe your app in one paragraph. What problem does it solve?"
         - "Who is the primary user? Who else uses it?"
-        - "What's the ONE thing a user MUST be able to do?"
+        - "What's the ONE thing a user MUST be able to do? (The North Star)"
         - "What makes this different from similar apps?"
       done_when: "Can explain the app to someone unfamiliar in 2 minutes"
 
@@ -111,17 +115,26 @@ phase_0_brainstorm:
         - "What happens when [entity status] changes unexpectedly?"
       done_when: "Common failure scenarios have defined handling"
 
-  output: Filled spec_template.md with ALL sections complete, validated by user
+    7_ux_intent:
+      purpose: "Plan the layout hierarchy and navigation flow"
+      questions:
+        - "Where should the shortcut for the North Star action live? (Goal: < 2 clicks)"
+        - "Which features are 'Delighters' (Marketing/Heroes) vs 'Must-Haves' (CRUD)?"
+      done_when: "Navigation hierarchy planned; high-friction paths challenged"
+
+  output: Filled spec_template.md with ALL sections complete, including Section 11 for overrides.
 
 phase_1_scaffold:
-  goal: Create all pages from validated spec
+  goal: Create an Interactive Prototype from the validated spec
   prerequisite: "spec_template.md is COMPLETE with no empty sections or TBDs"
   steps:
     - Verify spec is truly complete
     - Create *Page.tsx files for each route in spec
-    - Set PageMeta (namespace, icon, auth) from spec
+    - Set PageMeta (namespace, icon). **Set auth: false** temporarily so the user can click through the prototype without login.
+    - **Interactive Stubs:** Each page must contain its 'Role' (from spec) and 'Next Step' navigation buttons to related pages.
+    - **Friction Check:** If North Star path > 2 clicks, propose a 'Global Shortcut' (Header/Sidebar).
     - Verify app runs with bun dev
-  output: All routes exist as stub pages with correct PageMeta
+  output: All routes exist as **Interactive Prototype Stubs** with navigation buttons.
 
 validation_checklist:
   before_filling_spec:
@@ -129,14 +142,21 @@ validation_checklist:
     - [ ] Can trace every page back to a user journey
     - [ ] Can answer "who can do X to Y?" for any entity/action
     - [ ] Can answer "what happens when Z fails?" for common scenarios
+    - [ ] **North Star identified:** Defined a max 2-click path for the core action.
 
   before_moving_to_scaffold:
     - [ ] Every user journey has numbered steps
     - [ ] Every entity has fields, states, permissions
     - [ ] Every business rule is explicit
+    - [ ] **Overrides logged:** Any intentional UX friction documented in Section 11.
     - [ ] No empty fields in spec_template.md
     - [ ] User has validated the spec
 
+  after_scaffold_validation:
+    - [ ] App is running and clickable.
+    - [ ] User has clicked through the "North Star" path.
+    - [ ] Sitemap and click-depth are validated in the browser.
+
 read_files:
   - "guides/wai-way/blueprints/0_brainstorm.md"
   - "guides/wai-way/spec_template.md"

package/templates/root-consumer/guides/wai-way/agents/polisher.md.example

@@ -21,7 +21,7 @@ persona:
 
 golden_rule: |
   THE SPEC IS YOUR TEST PLAN.
-  READ the spec (Phase 0 output) for entities, permissions, journeys.
+  READ the spec (Phase 0 output) and `spec_changes.md` for entities, permissions, journeys.
   READ each entity file for access rules and fields.
   GENERATE tests that verify the spec is implemented correctly.
 
@@ -31,6 +31,8 @@ core_principles:
   - Configuration: app.ts, legal.ts, .env
   - Mobile check: 375px width
   - i18n is OPTIONAL and comes LAST
+  - **Contract Check:** Consult **Section 11** of the spec for intentional UX overrides. If a layout deviation is documented there, it is a **PASS**.
+  - **Heuristic Audit:** Verify 3-click rule for North Star, system status visibility (loaders), and visual hierarchy.
 
 test_generation:
   entity_tests:
@@ -53,6 +55,14 @@ test_generation:
     - No unauthenticated writes
     output: "tests/access/access-rules.test.ts"
 
+ux_audit_checklist:
+  - [ ] **Contract Compliance:** Check Section 11 of spec for approved deviations.
+  - [ ] **Spec Drift Review:** Ensure all changes in `spec_changes.md` are documented and explained.
+  - [ ] **North Star Check:** Is the primary action reachable in < 3 clicks? (Unless overridden)
+  - [ ] **Hierarchy:** Does every page have a clear visual anchor (one primary focus)?
+  - [ ] **System Status:** Verify framework default feedback (Toasts/Loaders) is visible. Ask if 'North Star' action needs a custom 'Delighter' redirect.
+  - [ ] **Mobile:** Touch targets > 44px, no horizontal scroll.
+
 firestore_rules:
   source: "Entity access definitions"
   mapping:
@@ -116,7 +126,8 @@ Steps:
 6. Update app.ts, legal.ts, .env
 7. Run bun test — all must pass
 8. Mobile check at 375px
-9. (Optional) Add i18n
+9. **UX Audit** (3-click rule, Visual Anchor, Mobile targets, and Spec Drift review)
+10. (Optional) Add i18n
 
 Call get_guide("TESTING") for testing patterns.
 ```

package/templates/root-consumer/guides/wai-way/blueprints/0_brainstorm.md.example

@@ -37,8 +37,7 @@ User provides idea
     ↓
 Agent calls list_features() → matches needs to existing framework capabilities
     ↓
-Agent asks IDENTITY questions (who, what, why)
-    ↓
+    Agent asks IDENTITY questions (who, what, why, and **Aesthetic Essence**)    ↓
 Agent asks USER JOURNEY questions (what do users DO step by step?)
     ↓
 Agent asks DATA questions (what entities, relationships, states?)
@@ -66,6 +65,7 @@ Start broad, then narrow down:
 - "Who is the primary user? Secondary users?"
 - "What's the one thing a user MUST be able to do?"
 - "What makes this different from [similar apps]?"
+- **Aesthetic Essence:** "Which visual 'vibe' fits the brand? SaaS (Clean/Modern), Luxury (Gold/Serif), or Brutalist (Orange/High-Contrast)?"
 
 **Don't proceed until you can explain the app to someone else.**
 

package/templates/root-consumer/guides/wai-way/blueprints/1_scaffold.md.example

@@ -11,18 +11,33 @@
 
 ## Step 1: Create App
 
+**`dndev` is an installed CLI — run directly, never via `bunx` or `npx`.**
+
 ```bash
-dndev create-app my-app --preset [from spec]
-cd my-app && bun install
+# Interactive wizard — prompts for builder, backend, features (no --preset flag)
+dndev create-app
+
+# Start emulators (if Firebase backend was selected)
 dndev emu start
-bun dev
+
+# Start the dev server
+dndev dev
 ```
 
-Preset comes from your completed spec (Phase 0).
+---
+
+## Step 2: Apply Aesthetic Essence
+
+**READ:** `guides/dndev/essences_reference.css`
+
+Apply the chosen essence (SaaS, Luxury, Brutalist) to your `src/themes.css`. 
+- If **SaaS**: Keep defaults.
+- If **Luxury/Brutalist**: Copy the variables from the reference file into `src/themes.css`.
+- If **Custom**: Adjust primary/secondary colors in `:root`.
 
 ---
 
-## Step 2: Review Spec Pages
+## Step 3: Review Spec Pages
 
 From your spec, you have a list of pages. Now create them.
 
@@ -43,13 +58,16 @@ touch src/pages/ProductPage.tsx
 
 ---
 
-## Step 4: Add PageMeta
+## Step 4: Create Interactive Prototype Stubs
 
 **READ:** `src/pages/HomePage.tsx` for PageMeta pattern.
 
+For **each page**, create a functional stub that allows the user to validate the flow.
+
 ```tsx
 import type { PageMeta } from '@donotdev/core';
-import { PageContainer } from '@donotdev/ui';
+import { PageContainer, Link } from '@donotdev/ui';
+import { Section, Stack, Text, Card, Button } from '@donotdev/components';
 import { Info } from 'lucide-react';
 
 export const NAMESPACE = 'about';
@@ -57,22 +75,44 @@ export const NAMESPACE = 'about';
 export const meta: PageMeta = {
   namespace: NAMESPACE,
   icon: <Info />,
-  // From spec:
-  // auth: true,                              // Protected
-  // auth: { required: true, role: 'admin' }, // Admin
-  // hideFromMenu: true,                      // Form pages
+  // From spec: Set auth: false for the prototype phase so user can click through
+  auth: false, 
 };
 
 export default function AboutPage() {
-  return <PageContainer>About Page</PageContainer>;
+  return (
+    <PageContainer>
+      <Section title="About Page (Prototype Stub)">
+        <Stack gap="large">
+          <Text><strong>Role:</strong> [Describe the purpose of this page from the spec]</Text>
+          
+          <Text level="h3">Navigate Flow:</Text>
+          <Stack direction="row" gap="medium">
+            <Link path="/dashboard">
+              <Button variant="outline">Go to Dashboard</Button>
+            </Link>
+            <Link path="/contact">
+              <Button variant="outline">Go to Contact</Button>
+            </Link>
+          </Stack>
+
+          {/* Placeholder for flow validation */}
+          <Card variant="outline" content={[`[Placeholder for ${NAMESPACE} core components]`]} />
+        </Stack>
+      </Section>
+    </PageContainer>
+  );
 }
 ```
 
+**Goal:** The user should be able to `bun dev` and click through the entire app flow (the "North Star" path) to validate the architecture before you build any logic.
+
 ---
 
 ## Output
 
 - [ ] App runs with `bun dev`
-- [ ] All route files created (from spec)
-- [ ] PageMeta set with correct auth levels (from spec)
-- [ ] Navigation auto-generated
+- [ ] All route files created as **Interactive Stubs**
+- [ ] PageMeta set (auth: false for prototype validation)
+- [ ] Navigation links included on each stub to related pages
+- [ ] User has "clicked through" the flow and validated sitemap/friction

package/templates/root-consumer/guides/wai-way/blueprints/3_compose.md.example

@@ -9,7 +9,18 @@
 
 ---
 
-## Step 1: Read Page Patterns
+## Step 1: Apply UX Intent Rules
+
+**Every page must follow the Designer Mandate:**
+1. **70/30 Hierarchy:** Only ONE `primary` variant button/card per view. Use `outline` or `muted` for everything else to direct the user's eye to the North Star.
+2. **Benefit-First Copy:** Do not use technical titles for Heros/Cards. 
+   - ❌ "User Management" → ✅ "Empower Your Team"
+   - ❌ "Car List" → ✅ "Explore the Fleet"
+3. **Success Intent:** Ensure framework default toasts are working. Only add a custom celebratory view or Redirect for the **North Star** goal completion.
+
+---
+
+## Step 2: Read Page Patterns
 
 **READ:** `guides/wai-way/page_patterns.md` for all patterns:
 - Dashboard, List Page, Form Page
@@ -18,7 +29,7 @@
 
 ---
 
-## Step 2: CRUD Pages
+## Step 3: CRUD Pages
 
 For each entity in spec:
 
@@ -60,7 +71,7 @@ export default function ProductPage() {
 
 ---
 
-## Step 3: Dashboard Page
+## Step 4: Dashboard Page
 
 Copy Dashboard pattern from `page_patterns.md`:
 - Quick actions (cards with onClick)
@@ -69,7 +80,7 @@ Copy Dashboard pattern from `page_patterns.md`:
 
 ---
 
-## Step 4: Landing Pages
+## Step 5: Landing Pages
 
 Copy Landing pattern from `page_patterns.md`:
 - HeroSection with CTAs

package/templates/root-consumer/guides/wai-way/spec_template.md.example

@@ -14,6 +14,7 @@
 | **Primary User** | _(Who uses this daily?)_ |
 | **Secondary Users** | _(Who else interacts?)_ |
 | **Core Value** | _(What problem does it solve?)_ |
+| **Aesthetic Essence** | SaaS (Default) / Luxury / Brutalist / Custom |
 
 ---
 
@@ -275,13 +276,13 @@ _(Copy entity template for each entity)_
 
 ---
 
-## 11. Open Questions
+## 11. Design Decisions & Overrides
+> **CRITICAL:** These are intentional deviations from framework UX heuristics (e.g., 3-click rule, 70/30 hierarchy). 
+> **FOR AGENTS:** If a layout choice is documented here, do NOT challenge or flag it during the Build or Polish phases.
 
-> Anything unresolved? List here. **No coding until resolved.**
-
-- [ ]
-- [ ]
-- [ ]
+| Target (Page/Feature) | Override Description | Rationale |
+|-----------------------|----------------------|-----------|
+| | | |
 
 ---
 

package/dist/bin/commands/lint.d.ts

@@ -1,11 +0,0 @@
-/**
- * @fileoverview Lint Command Wrapper
- * @description Re-exports lint from tooling for CLI bundling.
- * Each command wrapper is bundled separately as a fully self-contained script.
- *
- * @version 0.0.4
- * @since 0.0.1
- * @author AMBROISE PARK Consulting
- */
-export { lint as main } from '@donotdev/tooling';
-//# sourceMappingURL=lint.d.ts.map

package/dist/bin/commands/lint.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"lint.d.ts","sourceRoot":"","sources":["../../../src/bin/commands/lint.ts"],"names":[],"mappings":"AACA;;;;;;;;GAQG;AAEH,OAAO,EAAE,IAAI,IAAI,IAAI,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/bin/commands/lint.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"lint.js","sourceRoot":"","sources":["../../../src/bin/commands/lint.ts"],"names":[],"mappings":"AAAA,wCAAwC;AACxC;;;;;;;;GAQG;AAEH,OAAO,EAAE,IAAI,IAAI,IAAI,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/bin/commands/staging.d.ts

@@ -1,11 +0,0 @@
-/**
- * @fileoverview Staging Command Wrapper
- * @description Staging is a thin wrapper around deploy with --staging flag.
- * Re-exports deploy from tooling — the staging flag is set by the CLI entry point.
- *
- * @version 0.0.1
- * @since 0.0.1
- * @author AMBROISE PARK Consulting
- */
-export { deploy as main } from '@donotdev/tooling';
-//# sourceMappingURL=staging.d.ts.map

package/dist/bin/commands/staging.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"staging.d.ts","sourceRoot":"","sources":["../../../src/bin/commands/staging.ts"],"names":[],"mappings":"AACA;;;;;;;;GAQG;AAEH,OAAO,EAAE,MAAM,IAAI,IAAI,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/bin/commands/staging.js

@@ -1,12 +0,0 @@
-// packages/cli/src/bin/commands/staging.ts
-/**
- * @fileoverview Staging Command Wrapper
- * @description Staging is a thin wrapper around deploy with --staging flag.
- * Re-exports deploy from tooling — the staging flag is set by the CLI entry point.
- *
- * @version 0.0.1
- * @since 0.0.1
- * @author AMBROISE PARK Consulting
- */
-export { deploy as main } from '@donotdev/tooling';
-//# sourceMappingURL=staging.js.map

package/dist/bin/commands/staging.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"staging.js","sourceRoot":"","sources":["../../../src/bin/commands/staging.ts"],"names":[],"mappings":"AAAA,2CAA2C;AAC3C;;;;;;;;GAQG;AAEH,OAAO,EAAE,MAAM,IAAI,IAAI,EAAE,MAAM,mBAAmB,CAAC"}

package/templates/app-payload/.env.example

@@ -1,28 +0,0 @@
-# Payload CMS Configuration
-PAYLOAD_SECRET=your-super-secret-key-here
-PAYLOAD_PUBLIC_SERVER_URL=http://localhost:3001
-
-# Database Configuration (MongoDB)
-MONGODB_URI=mongodb://localhost:27017/{{projectName}}
-
-# For production, use MongoDB Atlas or similar
-# MONGODB_URI=mongodb+srv://username:password@cluster.mongodb.net/{{projectName}}?retryWrites=true&w=majority
-
-# Optional: Redis for caching (recommended for production)
-# REDIS_URL=redis://localhost:6379
-
-# CORS Origins (comma-separated)
-CORS_ORIGINS=http://localhost:3000,https://{{projectName}}.com,https://admin.{{projectName}}.com
-
-# File Upload Configuration
-PAYLOAD_PUBLIC_MAX_FILE_SIZE=5000000
-
-# Admin Configuration
-PAYLOAD_PUBLIC_ADMIN_EMAIL=admin@{{projectName}}.com
-PAYLOAD_PUBLIC_ADMIN_PASSWORD=your-admin-password
-
-# Optional: Email Configuration (for notifications)
-# SMTP_HOST=smtp.gmail.com
-# SMTP_PORT=587
-# SMTP_USER=your-email@gmail.com
-# SMTP_PASS=your-app-password 

package/templates/app-payload/README.md.example

@@ -1,233 +0,0 @@
-# {{projectName}} CMS (Payload)
-
-This is a **Payload CMS** application that provides a professional content management system for your business website.
-
-## 🚀 What is Payload CMS?
-
-Payload is a **headless CMS** that gives you:
-- **Database** - Stores all your content (text, images, etc.)
-- **Admin Interface** - Professional web interface for editing content
-- **API** - Your website fetches content via REST API calls
-- **Media Library** - Upload and manage images/files
-
-## 📁 Project Structure
-
-```
-{{appName}}/
-├── collections/           # Content types (Hero, Services, Products, etc.)
-│   ├── Users.ts          # Admin users authentication
-│   ├── Media.ts          # File uploads and media management
-│   ├── Hero.ts           # Landing page hero section
-│   ├── Services.ts       # Business services
-│   ├── Products.ts       # Product offerings
-│   ├── Testimonials.ts   # Client feedback
-│   └── Company.ts        # Company information
-├── src/
-│   └── server.ts         # Express server with Payload
-├── payload.config.ts     # Payload configuration
-├── package.json          # Dependencies and scripts
-└── .env                  # Environment variables
-```
-
-## 🛠️ Content Types
-
-### 1. **Hero Section** (`/admin/collections/hero`)
-- **Title** - Main headline
-- **Subtitle** - Supporting text
-- **CTA Button** - Call-to-action text and link
-- **Background Image** - Hero background
-
-### 2. **Services** (`/admin/collections/services`)
-- **Name** - Service name
-- **Description** - Detailed description
-- **Category** - Consulting, Training, Development, Support
-- **Features** - List of service features
-- **Pricing** - Pricing information
-- **Icon** - Service icon
-
-### 3. **Products** (`/admin/collections/products`)
-- **Name** - Product name
-- **Description** - Product description
-- **Category** - Framework, Tool, Platform, Service
-- **Features** - Key product features
-- **Demo Link** - Live demo URL
-- **Documentation** - Documentation link
-- **GitHub** - Repository link
-
-### 4. **Testimonials** (`/admin/collections/testimonials`)
-- **Client Name** - Client's name
-- **Company** - Company name
-- **Quote** - Testimonial text
-- **Rating** - 1-5 star rating
-- **Avatar** - Client photo
-- **Project** - Related project
-
-### 5. **Company Info** (`/admin/collections/company`)
-- **Name** - Company name
-- **Contact** - Email, phone, address
-- **Social Media** - LinkedIn, Twitter, GitHub, etc.
-- **Logo** - Company logo
-- **Favicon** - Website favicon
-
-## 🚀 Quick Start
-
-### 1. Install Dependencies
-```bash
-bun install
-```
-
-### 2. Set Up Environment
-```bash
-cp .env.example .env
-# Edit .env with your configuration
-```
-
-### 3. Set Up Database
-**Option A: Local MongoDB**
-```bash
-# Install MongoDB locally or use Docker
-docker run -d -p 27017:27017 --name mongodb mongo:latest
-```
-
-**Option B: MongoDB Atlas (Recommended)**
-- Create account at [MongoDB Atlas](https://www.mongodb.com/atlas)
-- Create cluster and get connection string
-- Update `MONGODB_URI` in `.env`
-
-### 4. Start Development Server
-```bash
-bun run dev
-```
-
-### 5. Access Admin Panel
-- **URL**: http://localhost:3001/admin
-- **Email**: admin@{{projectName}}.com
-- **Password**: your-admin-password (from .env)
-
-## 🔗 API Endpoints
-
-### Content API
-- **Hero**: `GET /api/hero`
-- **Services**: `GET /api/services`
-- **Products**: `GET /api/products`
-- **Testimonials**: `GET /api/testimonials`
-- **Company**: `GET /api/company`
-
-### Example API Call
-```javascript
-// Fetch hero content
-const response = await fetch('http://localhost:3001/api/hero');
-const heroData = await response.json();
-console.log(heroData.docs[0]); // Latest hero content
-```
-
-## 🎯 How It Works
-
-### 1. **Content Management**
-- Login to admin panel at `/admin`
-- Edit content using the professional interface
-- Save changes instantly
-
-### 2. **Content Delivery**
-- Your website makes API calls to fetch content
-- Content is returned as JSON
-- Website displays the content dynamically
-
-### 3. **Real-time Updates**
-- Changes in admin appear immediately on website
-- No code deployment needed
-- Non-developers can update content
-
-## 🔧 Configuration
-
-### Environment Variables
-```bash
-# Required
-PAYLOAD_SECRET=your-secret-key
-MONGODB_URI=mongodb://localhost:27017/{{projectName}}
-
-# Optional
-PAYLOAD_PUBLIC_SERVER_URL=http://localhost:3001
-CORS_ORIGINS=http://localhost:3000,https://{{projectName}}.com
-```
-
-### Customization
-- **Add new content types**: Create new files in `collections/`
-- **Modify fields**: Edit field definitions in collection files
-- **Change admin UI**: Customize admin interface in `payload.config.ts`
-
-## 🚀 Deployment
-
-### Vercel Deployment
-1. **Connect to Vercel**
-2. **Set environment variables** in Vercel dashboard
-3. **Deploy** - Vercel will build and deploy automatically
-
-### Environment Variables for Production
-```bash
-PAYLOAD_SECRET=your-production-secret
-MONGODB_URI=mongodb+srv://username:password@cluster.mongodb.net/{{projectName}}
-PAYLOAD_PUBLIC_SERVER_URL=https://admin.{{projectName}}.com
-CORS_ORIGINS=https://{{projectName}}.com,https://admin.{{projectName}}.com
-```
-
-## 📊 Admin Features
-
-- **User Management** - Create admin users
-- **Media Library** - Upload and organize images
-- **Content Versioning** - Track content changes
-- **Draft/Published** - Preview before publishing
-- **Rich Text Editor** - Format content easily
-- **Image Optimization** - Automatic image resizing
-- **File Upload** - Drag & drop file uploads
-
-## 🔒 Security
-
-- **Authentication** - Secure admin login
-- **CORS Protection** - Configured for your domains
-- **File Upload Limits** - 5MB file size limit
-- **Input Validation** - All inputs validated
-- **HTTPS Required** - Secure in production
-
-## 🎨 Integration with Website
-
-Your website (Next.js/Vite) connects to this CMS:
-
-```typescript
-// Example: Fetch hero content
-const { data: hero } = await fetch('/api/hero').then(r => r.json());
-
-// Example: Fetch services
-const { data: services } = await fetch('/api/services?where[isActive][equals]=true').then(r => r.json());
-
-// Example: Fetch testimonials
-const { data: testimonials } = await fetch('/api/testimonials?sort=order').then(r => r.json());
-```
-
-## 🆘 Troubleshooting
-
-### Common Issues
-
-**"MongoDB connection failed"**
-- Check `MONGODB_URI` in `.env`
-- Ensure MongoDB is running
-- Verify network connectivity
-
-**"Admin panel not loading"**
-- Check `PAYLOAD_SECRET` is set
-- Verify `PAYLOAD_PUBLIC_SERVER_URL` is correct
-- Check browser console for errors
-
-**"API calls failing"**
-- Verify CORS configuration
-- Check server is running on correct port
-- Ensure API endpoints are accessible
-
-### Getting Help
-- Check [Payload Documentation](https://payloadcms.com/docs)
-- Review server logs for error messages
-- Verify environment variables are set correctly
-
----
-
-**That's it!** You now have a professional CMS that your website can use to fetch dynamic content. No more hardcoded text - everything is manageable through the admin interface.