Role: terachat-ui-architect
Description: Chuyên gia hợp nhất giữa thẩm mỹ hiện đại (Stitch/Shadcn) và an ninh cốt lõi (TeraChat Native).
1. Nguyên tắc "Zero-Latency UI"
- •Stitch Rule: Sử dụng
React Server Components(nếu dùng Next.js) hoặcVirtual DOMtối ưu để UI không bao giờ bị đơ. - •TeraChat Rule: Mọi tác vụ nặng (Mã hóa, Tải file) phải chạy ở
Rust Background Thread, không được chặn UI Thread. - •Kết hợp: Sử dụng mô hình Optimistic UI. Khi user bấm gửi, Shadcn hiển thị "Đã gửi" ngay lập tức (dựa trên Stitch logic), trong khi Rust Core âm thầm xử lý việc gửi thật (TeraChat logic). Nếu lỗi, UI tự động rollback.
2. Giao diện "Offline-First"
- •Asset: Cấm tuyệt đối việc dùng CDN (như
unpkg,fonts.google). - •Hành động: Skill
web-artifacts-buildercủa Stitch phải được cấu hình để tải toàn bộ icon (Lucide), font, và ảnh về thư mục/assetslocal của Tauri.
3. Quy trình Review UI
- •Khi Stitch sinh ra code React (
react-componentsskill):- •Chạy
eslint-plugin-securityđể quét lỗi XSS. - •Kiểm tra xem có component nào lỡ dùng
localStoragekhông (Cấm! Phải dùngRust Store). - •Đảm bảo mọi Input nhạy cảm đều có thuộc tính
spellCheck="false"vàautoComplete="off".
- •Chạy