Claude Skill MartKhám phá skillCâu dùng ngayHọc qua videoDùng terminalSkill là gì?
 
← Về danh sách

Appllama App Design Skill

Bộ quy tắc thiết kế và triển khai màn hình Expo/React Native đạt cảm giác native chuẩn Apple HIG, kèm vòng kiểm thử trên simulator.

Thiết kế · UINâng cao★ 126⑂ 5Điểm AI 9/10Cập nhật lần cuối: 23 thg 8, 2026

Làm được gì

  • Đặt ra tiêu chuẩn để Claude thiết kế và code màn hình Expo Router / React Native với cảm giác native thật sự.
  • 12 "luật trung thực native": màu semantic + dark mode ngay từ đầu, dùng control native, SF Symbols, borderCurve: 'continuous', nhịp spacing, safe area / Dynamic Island, haptics đúng chỗ.
  • Ngữ nghĩa điều hướng: push vs replace, modal vs formSheet vs overlay, và những "cửa một chiều" (đăng nhập, hoàn tất onboarding, thanh toán) mà nút back không được quay lại.
  • Quy trình quyết định animation: cổng tần suất → mục đích → công cụ → thuộc tính → spring/curve → luồng chạy, với giá trị cụ thể (SETTLE 400/1.0, SNAP 400/0.8, easing bezier).
  • Luật "anti-slop": chặn gradient tím phát sáng, glassmorphism tràn lan, emoji làm icon, nhiều màu nhấn — đếm bằng checklist chứ không cảm tính.
  • Bắt buộc vòng lặp simulator: chạy, chụp ảnh, quay video (xcrun simctl io booted recordVideo) và soi từng frame trước khi coi là xong.

Dành cho ai

  • Lập trình viên mobile/frontend dùng Expo, React Native, TypeScript.
  • Người thấy UI do AI sinh ra hay bị "trông như template".
  • Team muốn chuẩn hóa chất lượng cho onboarding, paywall, tab bar, bottom sheet.
  • Ai muốn làm animation và gesture (Reanimated, gesture-handler) đúng bài.

Ví dụ sử dụng

  1. "Làm luồng onboarding 3 bước" → nghiên cứu mẫu thật → dùng replace khi hoàn tất để back không quay lại → kiểm tra sáng/tối → quay video soi frame.
  2. "Đánh bóng lại màn hình này cho giống native" → đổi sang màu semantic, bo góc liên tục, tap target ≥ 44pt, gom về một màu nhấn duy nhất.
  3. "Thêm bottom sheet" → dùng route formSheet với detents thay vì tự dựng, kiểm tra kéo, hủy giữa đường, chuyển giao vận tốc cho spring.

· · · Hướng dẫn cài đặt · · ·

Dùng thử ngay, không cần cài

Dán đoạn dưới vào Claude là dùng được skill này mà không cần cài đặt.

Hãy đọc hướng dẫn trong tệp này và làm theo để giúp mình:
https://raw.githubusercontent.com/Appllama/appllama-skills/HEAD/skills/appllama-app-design-skill/SKILL.md

Mình muốn: (viết việc bạn cần ở đây)

Nếu Claude không mở được liên kết, hãy mở liên kết và copy nội dung vào rồi dán.

↓ Thấy hữu ích thì tải ZIP bên dưới và cài. Sau đó skill tự chạy, không phải dán lại mỗi lần.

Cài vào ứng dụng Claude (không cần terminal)
  1. Tải tệp ZIP bằng nút bên dưới.
  2. Trong Claude, mở Settings → Capabilities và bật 'Code execution and file creation'. (chỉ một lần)
  3. Vào Customize → Skills → + → 'Upload a skill' rồi tải tệp ZIP lên.
↓ Tải ZIP
Cài vào Claude Code

Để Claude làm — dán câu dưới đây vào Claude Code

Hãy cài skill mình tìm thấy trên Claude Skill Mart.
Copy thư mục skills/appllama-app-design-skill từ repo GitHub Appllama/appllama-skills vào ~/.claude/skills/appllama-app-design-skill/ của mình.
Sau khi cài xong, cho mình biết skill này làm được gì trong một câu.

Cài bằng lệnh thủ công

git clone https://github.com/Appllama/appllama-skills.git /tmp/appllama-skills && mkdir -p ~/.claude/skills && cp -r /tmp/appllama-skills/skills/appllama-app-design-skill ~/.claude/skills/

⚠ Đây là skill do người khác tạo. Hãy kiểm tra repo gốc trước khi cài.

  1. Mở Terminal.
  2. Clone repo: git clone https://github.com/Appllama/appllama-skills.git
  3. Tạo thư mục skill: mkdir -p ~/.claude/skills
  4. Copy skill: cp -r appllama-skills/skills/appllama-app-design-skill ~/.claude/skills/
  5. Kiểm tra thư mục references/ đã được copy kèm (chứa chi tiết về motion, navigation, performance).
  6. Khởi động lại Claude Code và gõ /skills để xem skill đã xuất hiện.
  7. Mở project Expo và thử yêu cầu: "làm màn hình này cảm giác native hơn".
  8. (Tùy chọn) Kết nối Appllama MCP để tra cứu màn hình app thật, và cài Xcode để có iOS Simulator.
Xem mã nguồn trên GitHub ↗Giấy phép: MIT