Chuyển tới nội dung chính

Skill UI React

GitHub: v-open-platform/ui-react-skills

Xây dựng giao diện mini app với @v-miniapp/ui-react — thư viện React component với 60+ component, design tokens, routing và i18n cho nền tảng V-App.

Tính năng​

  • 60+ UI Components — Button, TextField, Modal, Tabs, Avatar, Calendar, Carousel, ...
  • Design Token System — Semantic color tokens, typography, spacing theo chuẩn V-App
  • App Shell & Routing — Single-level routing, navigation bar, bottom tabs, page lifecycle
  • Localization (i18n) — Hỗ trợ đa ngôn ngữ với translation hooks
  • Dark Mode — Theme-aware components tích hợp design token
  • AI App Support — Hướng dẫn sử dụng component trong AI app widgets

Tại sao cần skill này?​

Khi phát triển giao diện MiniApp bằng React, lập trình viên thường gặp các vấn đề:

  • Mất thời gian tra cứu: Phải liên tục tìm kiếm cách sử dụng component, props, và pattern phù hợp trong tài liệu.
  • Thiếu nhất quán: Mỗi người viết UI theo cách khác nhau, dẫn đến code không đồng bộ trong team.
  • Lặp lại code: Viết đi viết lại các đoạn code tương tự cho form, danh sách, modal, v.v.
  • Khó debug layout: Xử lý responsive, theme, và styling tốn nhiều thời gian thử nghiệm.

Skill UI React giải quyết các vấn đề trên bằng cách hướng dẫn AI agent hiểu rõ hệ thống component UI của MiniApp, từ đó hỗ trợ lập trình viên tạo giao diện nhanh hơn, chuẩn hơn.

Cài đặt​

Cách 1: Sử dụng skills CLI (Khuyến nghị)​

# Cài vào project hiện tại
npx skills add v-open-platform/ui-react-skills

# Cài global
npx skills add v-open-platform/ui-react-skills -g

# Cài cho agent cụ thể
npx skills add v-open-platform/ui-react-skills -a claude-code

Cách 2: Cài đặt thủ công​

Cho Claude Code:

git clone https://github.com/v-open-platform/ui-react-skills.git
cp -r ui-react-skills/skills/v-miniapp-ui-react ~/.claude/skills/

Cho project-level:

mkdir -p .claude/skills
cp -r ui-react-skills/skills/v-miniapp-ui-react .claude/skills/
mẹo

Xem thêm danh sách agent được hỗ trợ để biết thư mục cài đặt cho từng agent.

Danh sách Components​

NhómComponents
FoundationTypography, Icon
ActionsButton (solid, outline, ghost)
FormTextField, NumberField, DateField, SearchField, TextArea, Dropdown, DatePicker, Calendar, Uploader, Rating
SelectionsRadio, Checkbox, Chip, Switch, OptionItem
NavigationNavigationBar, BottomTabBar, TabBar
InterfaceAvatar, Carousel, Section
FeedbackToast, Alert, Tooltip
ModalDialog, Sheet
IndicatorBadge, BadgeContainer

Cấu trúc Skill​

v-miniapp-ui-react/
├── SKILL.md                          # File skill chính
└── references/
    ├── basic-setup.md                # Dev workflow & app config
    ├── design-tokens.md              # Color tokens, typography, theming
    ├── ai-guidelines/
    │   ├── app.md                    # Routing constraints & theme defaults
    │   ├── components.md             # Quy tắc sử dụng component
    │   └── locale.md                 # AI app locale setup
    ├── app/
    │   ├── setup.md                  # App shell, pages, layouts
    │   ├── routing.md                # Navigation & page params
    │   └── locale.md                 # Mini-app i18n setup
    └── components/
        ├── foundation.md             # Typography & Icon
        ├── icon-names.md             # 100+ icon identifiers
        ├── actions.md                # Button variants
        ├── form.md                   # TextField, DatePicker, Uploader, ...
        ├── selections.md             # Radio, Checkbox, Switch, Chip
        ├── navigation.md             # NavigationBar, BottomTabBar, TabBar
        ├── interface-elements.md     # Avatar, Carousel, Section
        ├── feedback.md               # Toast, Alert, Tooltip
        ├── modal.md                  # Dialog & Sheet
        └── indicator.md              # Badge & BadgeContainer

Các prompt hữu ích​

Tạo component mới​

Tạo một component ProductCard hiển thị ảnh sản phẩm, tên, giá và nút "Thêm vào giỏ hàng"
Tạo form đăng ký với các trường: họ tên, email, số điện thoại. Có validate và hiển thị lỗi

Xây dựng layout trang​

Tạo layout trang danh sách sản phẩm gồm: thanh tìm kiếm ở trên, danh sách dạng grid 2 cột, và nút "Xem thêm" ở dưới
Tạo trang chi tiết đơn hàng gồm: thông tin đơn hàng, danh sách sản phẩm, tổng tiền và nút thanh toán

Xử lý danh sách và dữ liệu​

Tạo component danh sách có hỗ trợ pull-to-refresh và infinite scroll
Tạo bảng hiển thị lịch sử giao dịch với các cột: ngày, mô tả, số tiền, trạng thái

Tuỳ chỉnh giao diện​

Tạo một modal xác nhận thanh toán với nút Huỷ và Xác nhận
Tạo bottom sheet hiển thị danh sách phương thức thanh toán

Xử lý trạng thái UI​

Tạo component có 3 trạng thái: loading (skeleton), empty (không có dữ liệu), và hiển thị danh sách bình thường
Thêm trạng thái lỗi với nút "Thử lại" cho component này

Mẹo viết prompt hiệu quả​

mẹo
  • Mô tả rõ yêu cầu giao diện: Nêu cụ thể các thành phần cần hiển thị, vị trí, và hành vi tương tác.
  • Đề cập dữ liệu đầu vào: Cho AI biết cấu trúc dữ liệu mà component sẽ nhận (props, API response).
  • Nêu các trạng thái cần xử lý: Loading, error, empty, success — AI sẽ sinh code đầy đủ hơn.
  • Yêu cầu theo từng bước: Nếu giao diện phức tạp, chia nhỏ yêu cầu thay vì yêu cầu tất cả cùng lúc.

Skill liên quan​

SkillMô tả
MiniAppCLI tooling, build/deploy, native APIs với @v-miniapp/cli và @v-miniapp/apis
AI AppMCP-based AI apps với @v-miniapp/ai server/web/apis modules