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:

   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:

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:

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:

   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:

   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:

# 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:

   curl -s http://localhost:3002 > homepage.html

2. Check if content exists:

   # 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:

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:

   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:

   # 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:

   # 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:

# 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:

# 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:

# 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!