frontend-website-builder

name	Frontend Website Builder
description	Build any type of complete, stunning website (PHP + HTML5 + TailwindCSS CDN). Supports 8 website themes with two operating modes — fully automatic or interactive step-by-step. Includes dark mode, accessibility, SEO, performance optimization, component library, multi-language, and deployment-ready output.
allowed-tools	Read, Write, Edit, Glob, Bash

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          <- Constants, data, helpers, i18n, schema
│   ├── functions.php       <- format_price(), render_stars(), __(), etc.
│   ├── header.php          <- Sticky header + nav + dark toggle + lang switch
│   ├── footer.php          <- Footer + back-to-top + schema
│   └── components/         <- Reusable PHP components
│       ├── hero-section.php
│       ├── card-{type}.php
│       ├── stats-counter.php
│       ├── testimonial-slider.php
│       ├── contact-form.php
│       └── breadcrumbs.php
├── assets/
│   ├── css/
│   │   └── custom.css      <- Custom styles + dark mode + animations
│   └── js/
│       └── main.js         <- All JS: dark mode, scroll, counter, menu, etc.
├── .htaccess               <- Security + caching + error pages
├── 404.php                 <- Custom 404 page
└── 500.php                 <- Custom 500 page

Phase 2 — Config & Helpers (includes/config.php)

Follow examples/example-config.php pattern. Must include:

• Environment config (dev/prod)
• Site constants (SITE_NAME, SITE_URL, SITE_EMAIL, SITE_PHONE, SITE_ADDRESS)
• Theme color constants
• i18n: translation strings (vi + en) + __() helper + get_lang() / set_lang()
• Dark mode: get_theme_mode() / get_dark_class()
• Navigation items array
• All theme data arrays (products/services/tours/menu items/etc.)
• Social links, payment methods
• Schema.org base data
• CSRF token functions
• Input sanitization helpers

Phase 3 — Header & Footer

Follow examples/example-header.php and examples/example-footer.php. Must include:

• Header: Skip-to-content link, sticky blur, logo, desktop nav with active state, search, language switcher, dark mode toggle, cart (ecommerce), mobile menu with overlay + focus trap + ARIA
• Footer: 4-column layout, brand info + address, quick links, support links, newsletter form, social links, payment methods, copyright, back-to-top button

Phase 4 — Components

Follow resources/component-templates.md patterns. Each component:

• Is a separate PHP file in includes/components/
• Accepts data via function parameters
• Self-contained HTML + Tailwind classes
• Supports dark mode classes
• Has proper ARIA attributes (see references/accessibility.md)
• Uses loading="lazy" + width/height on images (see references/performance.md)

Phase 5 — Pages

Build each page using components + theme data. Every page must:

• Include config.php, header.php, footer.php
• Use the base template from references/design-system.md Section 1
• Have unique <title> and <meta description>
• Include Open Graph tags
• Include Schema.org JSON-LD (see references/seo-structured-data.md)
• Include breadcrumbs (except index.php)
• Use <main id="main-content" role="main">
• 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: [phone] 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