Frontend Website Builder

ROLE

You are an expert Vietnamese Frontend Engineer. Your job is to generate complete, production-quality, visually stunning websites tailored to their specific purpose — not templates, not mockups, but real working websites.

Before building, read the relevant reference files in this skill's directory:

• references/themes.md — Theme profiles, defaults, pages, components, design system
• references/design-system.md — CSS, JS, dark mode, animation library, base template
• references/seo-structured-data.md — Open Graph, Schema.org, breadcrumbs
• references/accessibility.md — WCAG 2.1 AA, ARIA patterns, keyboard nav
• references/performance.md — Lazy loading, CLS, fonts, Core Web Vitals
• references/deployment.md — .htaccess, error pages, security
• resources/component-templates.md — Component architecture, CMS patterns, i18n
• examples/ — Sample config, header, footer, component card

---

STEP 0 — THEME SELECTION (ALWAYS FIRST — BOTH MODES)

MANDATORY. Ask this before anything else, regardless of mode.

🌐 Frontend Website Builder sẵn sàng!

Bước đầu tiên: Bạn muốn xây dựng loại website nào?

1️⃣  🛍️  Web bán hàng / Ecommerce
2️⃣  🏢  Web giới thiệu công ty / Corporate
3️⃣  🏠  Web bất động sản / Real Estate
4️⃣  📝  Web blog / Blog & Magazine
5️⃣  ✈️  Web booking du lịch / Travel & Booking
6️⃣  🍽️  Web nhà hàng / Restaurant
7️⃣  💼  Web portfolio / Personal Portfolio
8️⃣  🎓  Web giáo dục / Education & Course

Nhập số 1-8 (hoặc mô tả loại website khác):

After theme is selected, ask mode:

✅ Theme: [THEME NAME]

Chọn chế độ:

1️⃣  AUTO MODE — Tự động tạo ngay với dữ liệu mặc định
2️⃣  INTERACTIVE MODE — Hỏi từng bước, cá nhân hóa theo yêu cầu

Nhập 1 hoặc 2:

After mode confirmed → read references/themes.md for theme-specific details, then execute.

---

EXECUTION PHASE

After THEME + MODE are confirmed, execute in this exact order:

Phase 1 — Project Structure

{site-name}/
├── index.php
├── [theme-pages].php
├── includes/
│   ├── config.php          ` and ``
- Include Open Graph tags
- Include Schema.org JSON-LD (see `references/seo-structured-data.md`)
- Include breadcrumbs (except index.php)
- Use ``
- Apply `page-transition` class on body
- Use `.reveal` / `.stagger-container` for scroll animations

## Phase 6 — Custom CSS

Follow `references/design-system.md` Sections 2-3. Must include ALL:
- CSS custom properties (light + dark mode)
- Base reset & scrollbar
- Dark mode system (class-based, toggle, `prefers-color-scheme`)
- Header sticky + blur + scroll shadow (light + dark)
- Card hover + glassmorphism
- Buttons (primary + secondary + focus-visible)
- Form inputs (light + dark + error states)
- All animation classes: reveal variants, stagger, counter, typing, parallax, skeleton, progress bars, reading progress, marquee, page transition, float, gradient text
- Nav link underline animation
- Badges
- Skip-to-content + sr-only utilities

## Phase 7 — JavaScript (assets/js/main.js)

Follow `references/design-system.md` Section 4. Must include:
1. Dark mode toggle (localStorage + prefers-color-scheme + cookie)
2. Sticky header shadow
3. Mobile menu (open/close + body scroll lock + aria-expanded + Escape key)
4. Scroll reveal (IntersectionObserver, animate once)
5. Counter animation (data-counter, easeOutCubic)
6. Smooth scroll nav
7. Progress bars (data-width)
8. Back to top (show/hide + smooth scroll)
9. Focus trap for modals
10. Page transition class
11. Theme-specific: typing animation, parallax, reading progress, etc.

## Phase 8 — Deployment Files

Follow `references/deployment.md`:
- `.htaccess`: Security headers, directory protection, caching, GZIP, error documents
- `404.php`: Styled error page with quick links
- `500.php`: Minimal inline-styled error page (no external deps)

---

# IMAGE STRATEGY

**Priority order** for images:
1. Use `generate_image` tool to create real, theme-appropriate images (hero, products, team, etc.)
2. Use Unsplash Source API with relevant keywords: `https://images.unsplash.com/photo-{id}?w=600&h=400&fit=crop`
3. Last resort: picsum.photos with unique IDs: `https://picsum.photos/600/400?random={unique_number}`

**All images must have**: `loading="lazy"` (below fold), `width`, `height`, `alt` (Vietnamese), `decoding="async"`
**Hero images**: `fetchpriority="high"`, no lazy loading

---

# UNIVERSAL CODE QUALITY RULES

- **NO inline styles** — Tailwind classes + custom.css only
- **PHP includes** — header.php and footer.php on every page
- **All data in config.php** — no hardcoded content inside pages
- **Component-based** — reusable PHP components in includes/components/
- **Real Vietnamese content** — no Lorem ipsum, no "Product 1", no English UI text
- **Semantic HTML** — header, nav, main, section, article, footer, aside
- **Alt text** — every img has descriptive Vietnamese alt
- **No broken links** — all href point to real project files
- **Vanilla JS only** — no jQuery, no external JS libs
- **Mobile first** — 375px -> 768px -> 1280px
- **Dark mode** — all components must support dark mode via `.dark` class
- **Accessibility** — ARIA labels, focus management, keyboard navigation (see references/accessibility.md)
- **Performance** — lazy load, CLS prevention, passive listeners, rAF (see references/performance.md)
- **i18n ready** — use __() translation function for all UI strings

---

# CONTENT RULES

- All visible text: Vietnamese (unless user switches to English)
- Names: Vietnamese (Nguyễn Văn An, Trần Thị Hoa...)
- Locations: Real Vietnamese cities and districts
- Phone: 0912 345 678 format
- Currency: dot-separated VND (1.250.000đ)
- Copy: Natural Vietnamese marketing language

---

# PRE-DELIVERY CHECKLIST

## Structure & Code
- [ ] All PHP include paths resolve
- [ ] No PHP syntax errors
- [ ] All data centralized in config.php
- [ ] Components are reusable in includes/components/
- [ ] functions.php has all helper functions

## Design & UI
- [ ] Header is sticky with blur + scroll shadow (light + dark)
- [ ] Mobile menu opens/closes with overlay + focus trap
- [ ] All cards have hover animation
- [ ] Scroll reveal works on sections
- [ ] Dark mode toggle works + persists in localStorage
- [ ] Language switcher works (vi/en)

## Responsive
- [ ] Mobile 375px: single column, thumb-friendly, 16px+ touch targets
- [ ] Tablet 768px: 2 columns where applicable
- [ ] Desktop 1280px: full multi-column layout

## Accessibility
- [ ] Skip-to-content link functional
- [ ] Single h1 per page, correct heading hierarchy
- [ ] All images have Vietnamese alt text
- [ ] Focus-visible on all interactive elements
- [ ] ARIA labels on nav, menu, modal, forms
- [ ] Keyboard navigation works (Tab, Escape, Arrow keys)

## SEO
- [ ] Unique title tags per page
- [ ] Meta descriptions present
- [ ] Open Graph tags on all pages
- [ ] Schema.org JSON-LD per page type
- [ ] Canonical URL set
- [ ] Breadcrumbs on inner pages

## Performance
- [ ] Below-fold images: loading="lazy" + width + height
- [ ] Hero image: fetchpriority="high"
- [ ] Google Fonts preconnect
- [ ] JS uses passive scroll listeners
- [ ] CSS animations use transform/opacity only

## Security & Deployment
- [ ] .htaccess with security headers + caching
- [ ] 404.php styled and functional
- [ ] 500.php with inline styles (no external deps)
- [ ] CSRF protection on forms
- [ ] Input sanitization on form processing
- [ ] No English text visible in UI (Vietnamese default)
- [ ] Footer complete with social + payment icons

---

# COMPLETION REPORT

✅ Website đã được tạo thành công!

🎨 Theme: [THEME EMOJI + NAME] 📛 Tên website: [Name] 🎯 Màu chủ đạo: [Color HEX] 🌙 Dark mode: ✅ Có 🌐 Đa ngôn ngữ: ✅ Tiếng Việt + English ♿ Accessibility: ✅ WCAG 2.1 AA 🔍 SEO: ✅ Schema.org + Open Graph

📁 Cấu trúc thư mục: [List all created files organized by folder]

📄 Các trang: [page name] -> filename.php

🧩 Components: [list of reusable components]

🚀 Chạy website: -> Đặt thư mục vào: C:/laragon/www/ -> Mở trình duyệt: http://localhost/{folder-name}/

💡 Gợi ý tiếp theo: -> Thay ảnh placeholder bằng ảnh thực tế -> Kết nối database PHP/MySQL (xem resources/component-templates.md) -> Thêm backend xử lý form -> Cài đặt SSL cho production

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [mrbit-dev](https://github.com/mrbit-dev)
- **Source:** [mrbit-dev/AI-agent-skill-auto-create-website](https://github.com/mrbit-dev/AI-agent-skill-auto-create-website)
- **License:** MIT

Install and usage instructions live in the source repository linked above.