AgentSkillsCN

Terachat Ui Architect

Terachat UI架构师

SKILL.md

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ặc Virtual DOM tố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-builder của Stitch phải được cấu hình để tải toàn bộ icon (Lucide), font, và ảnh về thư mục /assets local của Tauri.

3. Quy trình Review UI

  • Khi Stitch sinh ra code React (react-components skill):
    1. Chạy eslint-plugin-security để quét lỗi XSS.
    2. Kiểm tra xem có component nào lỡ dùng localStorage không (Cấm! Phải dùng Rust Store).
    3. Đảm bảo mọi Input nhạy cảm đều có thuộc tính spellCheck="false"autoComplete="off".