Bang Den CMS Skeleton — Ready to vibecode

Welcome to Bang Den CMS

Multi-client Next.js 15 CMS. Clone một lần, vibecode /frontend/ cho mỗi client — core không đổi.

01

Đọc tài liệu

Đọc CLAUDE.md để hiểu kiến trúc tổng quan, sau đó FRONTEND_GUIDE.md để nắm pattern chuẩn.

CLAUDE.mdFRONTEND_GUIDE.md
02

Vibecode /frontend/

Vibecode toàn bộ src/frontend/ theo thiết kế client — Header, Footer, và từng Section.

frontend/layout/Header/frontend/layout/Footer/frontend/sections/
03

Đăng ký sections

Mỗi section cần schema.ts + config.ts + Component.tsx, rồi đăng ký vào registry với key.

frontend/sections/registry.ts
04

Khởi tạo & Deploy

Vào /admin → Settings → khởi tạo trang mặc định → cấu hình nội dung → deploy.

/admin/pages/admin/appearance
project structure
→src/frontend/
frontend/sections/{Name}/schema.ts
frontend/sections/{Name}/config.ts
frontend/sections/{Name}/Component.tsx
frontend/layout/layout.registry.ts
FRONTEND_GUIDE.md

!Pattern 3 file — mỗi section

schema.ts

Zod schema → admin form tự render, validate trước khi save

config.ts

defaultData + label + icon — page builder dùng khi thêm section

Component.tsx

RSC render public — nhận data qua props, không tự fetch

Prompt vibecode nhanh

Drop design mockup vào Claude + dùng prompt sau để tạo frontend:

Vibecode /frontend cho client: [Tên client] Phong cách: [minimalist / luxury / bold / warm] Màu chính: #[hex] · Màu phụ: #[hex] Font heading: [Inter / Playfair Display / Be Vietnam Pro] Đọc FRONTEND_GUIDE.md trước. Tạo: Header, Footer, và các sections từ thiết kế. Rule: next/image, next/font, không tự fetch trong component.
Vào Admin →Xem FRONTEND_GUIDE.md