---
name: zame-design-skill
description: Thiết kế, xây dựng và rà soát giao diện web sản phẩm bằng cách kết hợp UI/UX Pro Max, Vercel Web Interface Guidelines, Anthropic Frontend Design và bộ quy tắc ZAME STUDIO. Dùng khi tạo hoặc chỉnh sửa website, landing page, dashboard, component hay luồng tương tác.
---

# ZAME Design Skill

Một bộ hướng dẫn duy nhất để tạo giao diện web rõ ràng, có bản sắc, dùng được trên thiết bị thật và dễ bàn giao.

## Nguồn gốc được hợp nhất

1. **UI/UX Pro Max**: https://github.com/nextlevelbuilder/ui-ux-pro-max-skill
2. **Vercel Web Design Guidelines**: https://github.com/vercel-labs/agent-skills/tree/main/skills/web-design-guidelines
3. **Anthropic Frontend Design**: https://github.com/anthropics/skills/tree/main/skills/frontend-design
4. **ZAME STUDIO UI/UX rules**: `AGENTS.md` cùng `DESIGN.md` trong dự án.

Bộ công cụ giao diện của dự án: Tailwind CSS, shadcn/ui, Radix UI, Lucide React, Motion, Playwright và axe-core.

## Quy trình

1. Đọc `AGENTS.md`, sau đó đọc `DESIGN.md` trước khi chỉnh giao diện. Kiểm tra component, token và pattern đã có để tái sử dụng.
2. Chốt mục tiêu người dùng, nội dung chính và một ý tưởng thị giác cụ thể. Không dùng bố cục, màu, icon hay hiệu ứng chung chung chỉ để trang trông có vẻ hiện đại.
3. Bắt đầu từ màn hình 375 px, rồi điều chỉnh cho 768 px và 1280 px. Giữ thang spacing 4/8 px và chỉ dùng design token đã định nghĩa.
4. Dùng Tailwind cho layout và trạng thái. Dùng component shadcn/ui và Radix đã có thay vì viết lại button, card, dialog, form hoặc select.
5. Dùng Lucide cho icon có ngữ nghĩa rõ. Dùng Motion cho chuyển động ngắn, có mục đích; tôn trọng `prefers-reduced-motion`.
6. Hoàn thiện focus, hover, loading, empty, error và success state. Mọi thao tác phải dùng được bằng bàn phím.
7. Rà soát nội dung trực quan, tương phản, nhãn biểu mẫu, thông báo lỗi, điểm gãy bố cục và thứ tự đọc.
8. Chạy lint và build. Kiểm tra luồng chính với Playwright và axe-core. Chạy Lighthouse; mục tiêu performance và accessibility đạt từ 90 trở lên.

## Tiêu chuẩn giao diện

- Ưu tiên nội dung dễ quét, tiêu đề rõ, mô tả ngắn và hành động dễ nhận biết.
- Duy trì màu sắc và kiểu chữ của thương hiệu; không thêm màu hoặc font ngoài design token.
- Dùng tương phản WCAG AA: thường tối thiểu 4.5:1 cho chữ nhỏ và 3:1 cho chữ lớn, thành phần giao diện.
- Luôn có vòng focus nhìn thấy được. Không chỉ dùng màu sắc để báo trạng thái.
- Chuyển động nhẹ, có lý do và không làm người dùng mất tập trung.
- Viết như người làm sản phẩm: cụ thể, ngắn gọn, không dùng câu sáo rỗng hoặc dấu gạch dài.

## Cài đặt nguồn tham khảo

```bash
npm install -g uipro-cli
uipro init --ai codex
npx -y skills add vercel-labs/agent-skills --skill web-design-guidelines --agent codex
npx -y skills add anthropics/skills --skill frontend-design --agent codex
```

Nếu dự án chưa có bộ giao diện, khởi tạo Tailwind/shadcn theo hướng dẫn hiện hành của dự án. Cài những gói cần dùng: `lucide-react`, `motion`, `@playwright/test`, `@axe-core/playwright`. Không cài lại package hoặc tạo component trùng lặp khi repo đã có sẵn.

## Khi dùng cho ZAME STUDIO

- Tiếng Việt là ngôn ngữ mặc định, có thể chuyển sang English từ menu quả địa cầu.
- Giữ logo ZAME STUDIO rõ ràng, gọn và chuyên nghiệp.
- Zame Guide là Agent hoạt hình đồng hành. Dùng chuyển động vui, ngắn và tương tác nhẹ; không biến nhân vật thành vật trang trí tĩnh.
- Thư viện Skills ưu tiên preview nội dung, nguồn gốc, số sao GitHub và phản hồi cộng đồng có liên kết kiểm chứng. Gọi phản hồi Issues là phản hồi cộng đồng, không gọi là điểm đánh giá chính thức.