mvp-factory-openhands/vue_okys_agency_prompt.md

# AUTONOMOUS BUILD MISSION: OKYSH Agency Website v2

You are an autonomous agent with a critical mission: build a production-ready Vue.js website through iterative testing and self-correction.

## 🎯 PROJECT REQUIREMENTS

**Website:** OKYSH - AI Development Agency
**Tech Stack:** Vue 3, Vite, TailwindCSS, GSAP animations
**Sections:** Hero, Services, About, Tech Stack, Portfolio, Contact Form, Footer

## 🔄 AUTONOMOUS WORKFLOW - FOLLOW STRICTLY

### ⚙️ ITERATION TRACKING
Before starting, create a file: `build-log.md` to track your progress.
After EACH phase, append to this file:
```
## Iteration X - [Phase Name]
Status: [Success/Failed]
Errors: [list if any]
Actions taken: [what you did]
Next step: [what's next]
```

---

### 📦 PHASE 1: INITIAL SETUP

**Tasks:**
1. Create project structure
2. Install dependencies with `package.json` that includes:
   - vue@^3.4.0
   - vite@^5.0.0
   - tailwindcss@^3.4.0
   - @vitejs/plugin-vue
   - autoprefixer, postcss
3. Create `vite.config.js` with:
```js
   server: {
     host: '0.0.0.0',
     port: 3002,
     allowedHosts: 'all'
   }
```
4. Create `tailwind.config.js` with COMPLETE color palette (primary, accent, dark)
   - **CRITICAL:** Include ALL shades 50-950 for primary color
   - primary-400 MUST exist
5. Setup basic Vue app structure

**Self-Check:**
```bash
ls -la  # Verify all files created
cat tailwind.config.js  # Verify colors include 400 shade
```

**Success Criteria:**
- [ ] All config files exist
- [ ] package.json valid
- [ ] tailwind.config.js has primary-50 through primary-950

**Log your progress to build-log.md before proceeding**

---

### 🏗️ PHASE 2: BUILD VALIDATION LOOP

**DO NOT PROCEED UNTIL BUILD SUCCEEDS**

**Tasks:**
1. Run: `npm install`
2. Capture output and check for errors
3. If install fails:
   - Read error message carefully
   - Identify the issue (version conflict? missing dep?)
   - Fix package.json
   - GO BACK TO STEP 1
4. Run: `npm run build`
5. Capture build output
6. If build fails:
   - Read FULL error message
   - Common issues:
     * Missing Tailwind colors (bg-primary-XXX not defined)
     * Import errors (wrong paths)
     * Syntax errors
   - Fix the SPECIFIC issue mentioned
   - GO BACK TO STEP 1

**Self-Check Commands:**
```bash
npm install 2>&1 | tee install.log
echo "Install exit code: $?"

npm run build 2>&1 | tee build.log
echo "Build exit code: $?"

# Check if dist/ was created
ls -la dist/
```

**Success Criteria:**
- [ ] npm install exit code = 0
- [ ] npm run build exit code = 0
- [ ] dist/ directory exists with index.html

**MAXIMUM 5 ATTEMPTS:** If still failing after 5 tries, STOP and report:
```
ESCALATION NEEDED: Build failing after 5 attempts
Last error: [paste error]
Attempts made: [list what you tried]
```

**Log your progress before proceeding**

---

### 🚀 PHASE 3: DEV SERVER VALIDATION

**Tasks:**
1. Start dev server in background:
```bash
   npm run dev > dev-server.log 2>&1 &
   DEV_PID=$!
   echo $DEV_PID > dev-server.pid
```
2. Wait 15 seconds for startup
3. Check if server is running:
```bash
   sleep 15
   curl -s -o /dev/null -w "%{http_code}" http://localhost:3002
```
4. If curl returns 000 or fails:
   - Read dev-server.log for errors
   - Kill process: `kill $(cat dev-server.pid)`
   - Fix the issue
   - GO BACK TO PHASE 2 (rebuild might be needed)
5. If curl returns 200:
   - Proceed to next phase

**Self-Check:**
```bash
# Is port listening?
netstat -tlnp | grep 3002

# Can we reach it?
curl -I http://localhost:3002

# Any errors in log?
tail -20 dev-server.log
```

**Success Criteria:**
- [ ] Port 3002 is listening
- [ ] curl returns HTTP 200
- [ ] No error messages in dev-server.log

**MAXIMUM 3 ATTEMPTS**

**Log your progress before proceeding**

---

### 🌐 PHASE 4: BASIC CONTENT VALIDATION

**Tasks:**
1. Fetch homepage HTML:
```bash
   curl -s http://localhost:3002 > homepage.html
```
2. Check if content exists:
```bash
   # Should have substantial content
   wc -c homepage.html  # Should be > 1000 bytes

   # Should have Vue app mount
   grep 'id="app"' homepage.html

   # Should load Vue
   grep -i "vue" homepage.html
```
3. If homepage is empty or too small:
   - Check browser console errors (you'll need to simulate this)
   - Likely issues:
     * Vue not mounting
     * JavaScript errors
     * Missing components
   - Fix and GO BACK TO PHASE 2

**Self-Check:**
```bash
echo "Homepage size: $(wc -c < homepage.html) bytes"
echo "Contains #app div: $(grep -c 'id="app"' homepage.html)"
echo "Vue referenced: $(grep -ic vue homepage.html)"
```

**Success Criteria:**
- [ ] homepage.html > 1000 bytes
- [ ] Contains id="app"
- [ ] References Vue

**Log your progress before proceeding**

---

### ✅ PHASE 5: COMPONENT VALIDATION

**Tasks:**
1. Verify all required components exist:
```bash
   ls src/components/Navigation.vue
   ls src/components/Hero.vue
   ls src/components/Services.vue
   ls src/components/AboutUs.vue
   ls src/components/TechStack.vue
   ls src/components/Portfolio.vue
   ls src/components/ContactForm.vue
   ls src/components/Footer.vue
```
2. Check each component for common errors:
```bash
   # Check for syntax errors
   for file in src/components/*.vue; do
     echo "Checking $file"
     # Look for unclosed tags, etc
     grep -c '<template>' "$file"
     grep -c '</template>' "$file"
   done
```
3. If any component missing or broken:
   - Create or fix it
   - Ensure proper Vue 3 syntax
   - GO BACK TO PHASE 2 (rebuild)

**Success Criteria:**
- [ ] All 8 components exist
- [ ] Each has matching open/close tags
- [ ] No obvious syntax errors

**Log your progress before proceeding**

---

### 🎨 PHASE 6: STYLING VALIDATION

**Tasks:**
1. Check if Tailwind is working:
```bash
   # Inspect generated CSS
   curl -s http://localhost:3002/src/style.css | head -50
```
2. Common Tailwind issues:
   - Colors not defined (bg-primary-XXX)
   - @apply with undefined classes
   - PostCSS not processing
3. If styling broken:
   - Fix tailwind.config.js
   - Fix CSS files
   - GO BACK TO PHASE 2

**Self-Check:**
```bash
# Check tailwind.config.js has all colors
grep -A 20 "primary:" tailwind.config.js
```

**Success Criteria:**
- [ ] Tailwind colors fully defined
- [ ] CSS loads without errors
- [ ] No PostCSS warnings

**Log your progress before proceeding**

---

### 📊 PHASE 7: FINAL CHECKLIST

**Before declaring success, verify:**
```bash
# 1. Clean build
npm run build && echo "✅ Build: PASS" || echo "❌ Build: FAIL"

# 2. Dev server runs
pkill -f "vite"  # Kill old server
npm run dev > /tmp/vite.log 2>&1 &
sleep 10
curl -s http://localhost:3002 > /dev/null && echo "✅ Server: PASS" || echo "❌ Server: FAIL"

# 3. Content exists
CONTENT_SIZE=$(curl -s http://localhost:3002 | wc -c)
[ $CONTENT_SIZE -gt 1000 ] && echo "✅ Content: PASS" || echo "❌ Content: FAIL"

# 4. All components exist
COMPONENTS=$(ls src/components/*.vue 2>/dev/null | wc -l)
[ $COMPONENTS -eq 8 ] && echo "✅ Components: PASS" || echo "❌ Components: FAIL"

# 5. Configs valid
[ -f vite.config.js ] && echo "✅ Vite config: PASS" || echo "❌ Vite config: FAIL"
[ -f tailwind.config.js ] && echo "✅ Tailwind config: PASS" || echo "❌ Tailwind config: FAIL"
```

**ALL MUST PASS**

---

### 📝 PHASE 8: FINAL REPORT

Create `DEPLOYMENT_READY.md` with:
```markdown
# OKYSH Website - Autonomous Build Report

## Build Status: [SUCCESS/FAILED]

## Iterations Completed: X

## Phase Results:
- Phase 1 (Setup): [✅/❌]
- Phase 2 (Build): [✅/❌] - X attempts
- Phase 3 (Dev Server): [✅/❌] - X attempts
- Phase 4 (Content): [✅/❌]
- Phase 5 (Components): [✅/❌]
- Phase 6 (Styling): [✅/❌]
- Phase 7 (Final Check): [✅/❌]

## Issues Encountered:
1. [Issue 1 and how you fixed it]
2. [Issue 2 and how you fixed it]

## Final Checklist:
- [ ] npm run build: SUCCESS
- [ ] npm run dev: RUNNING on port 3002
- [ ] Homepage size: XXX bytes
- [ ] All 8 components exist
- [ ] No console errors
- [ ] Tailwind working

## Ready for Deployment: [YES/NO]

## Access:
- Dev Server: http://localhost:3002
- Build Output: ./dist/

## Next Steps:
[What human should do next]
```

---

## 🚨 CRITICAL RULES

1. **NEVER skip a phase** - each builds on the previous
2. **ALWAYS check exit codes** - don't assume success
3. **READ error messages COMPLETELY** - don't guess
4. **LOG after each phase** - maintain build-log.md
5. **STOP after max attempts** - don't infinite loop
6. **CREATE files for debugging** - save logs, outputs
7. **TEST before proceeding** - verify each phase works

## 🎯 SUCCESS DEFINITION

You have succeeded when:
- ✅ All phases completed
- ✅ DEPLOYMENT_READY.md shows all green checkmarks
- ✅ Dev server accessible at http://localhost:3002
- ✅ Website displays all sections
- ✅ No errors in any logs

## 🚫 FAILURE DEFINITION

Stop and report if:
- ❌ Any phase fails after max attempts
- ❌ Build errors can't be resolved
- ❌ Dev server won't start after 3 tries
- ❌ You're repeating the same fix (stuck in loop)

---

## 🏁 BEGIN NOW

Start with Phase 1. Create build-log.md as your first action.
Track everything. Test thoroughly. Be autonomous but disciplined.

Your success is measured by producing a working website, not by speed.

GO!