---
name: cucu-web-ux
description: Định nghĩa triết lý UI/UX và pattern React cho giao diện CuCu Note.
---

# CuCu Web UX Skill

Skill này mô tả **triết lý giao diện** và pattern React cho CuCu Note, dựa trên cursor-skills/webdesign.
Agent dùng skill này khi làm việc với `frontend/` (pages, components, layout).

## When to Use

- Người dùng:
  - chỉnh sửa giao diện (Home, About CuCu, sidebar, chatbot widget),
  - hỏi “UI/UX nên làm thế nào cho CuCu?”,
  - refactor component, layout, hoặc tối ưu trải nghiệm note.

## Triết lý UI/UX của CuCu

1. **Sổ nháp số – mở là gõ được**
   - Màn hình Home luôn ưu tiên:
     - ô input “Any thoughts…” rõ ràng, dễ focus,
     - ít distraction (không quá nhiều panel, config).
   - Thao tác:
     - Gõ → Enter → note xuất hiện ngay trong list.

2. **Filter đơn giản – tag & ngày là chính**
   - Không cố gắng xây filter quá phức tạp.
   - Ưu tiên:
     - Filter theo ngày (hôm nay, ngày cụ thể).
     - Filter theo tag (click vào tag trong note để xem cùng chủ đề).

3. **About CuCu – giải thích rõ vai trò sản phẩm**
   - Trang About:
     - Giải thích “CuCu là sổ nháp số”, tầm nhìn, sứ mệnh, cách dùng cơ bản.
   - Luôn dễ tìm (icon trong sidebar).

4. **Chatbot – trợ lý ghi chú, không chiếm spotlight**
   - Widget nhỏ, có thể kéo, không che hết nội dung note.
   - Ưu tiên smooth drag, load history gọn, không spam nội dung dài.

## React Patterns cho CuCu

1. **Component đơn nhiệm**
   - Mỗi component nên:
     - làm 1 việc rõ: list memos, sidebar nav, About page, chatbot widget…
     - props gọn, tránh truyền cả “universe”.

2. **State & data fetching**
   - Dùng:
     - `@tanstack/react-query` cho API call,
     - custom hooks để dùng lại logic filter/query.
   - Tránh:
     - nhét quá nhiều logic gọi API trực tiếp trong component lớn.

3. **Layout & responsive**
   - Học từ `cursor-skills/webdesign`:
     - dùng flex/grid rõ ràng,
     - giữ sidebar + content + chatbot widget không gối nhau ở màn hình nhỏ.

## Instructions (Agent phải làm gì)

1. **Khi tạo/chỉnh page mới (ví dụ About CuCu):**
   - Đảm bảo:
     - Text rõ, ngắn, bám triết lý “sổ nháp số”.
     - Layout nhẹ, dùng component UI chuẩn (Card, Typography…).

2. **Khi sửa Home / list memos:**
   - Tối ưu:
     - Đường dẫn filter (ngày, tag) rõ ràng.
     - Không thêm quá nhiều nút/lọc gây rối.

3. **Khi sửa chatbot widget:**
   - Ưu tiên:
     - drag mượt,
     - không che input “Any thoughts…”,
     - history rõ ràng, load-more không giật.


