Ghép mẫu animation SwiftUI

Skill biến mong muốn tương tác còn mơ hồ thành mẫu animation SwiftUI đã được kiểm chứng — hoặc thành quyết định dùng hiệu ứng hệ thống có sẵn.

Lập trìnhTrung cấp★ 126⑂ 20Điểm AI 9/10Cập nhật lần cuối: 19 thg 7, 2026

Skill này làm gì

Chuyển các yêu cầu chung chung như "lúc lưu nên cảm giác thỏa mãn hơn", "danh sách này nhàm khi đang tải" thành một "khoảnh khắc tương tác" cụ thể, rồi gợi ý mẫu animation SwiftUI phù hợp.
Ưu tiên kiểm tra hiệu ứng có sẵn của hệ thống trước (.symbolEffect, spring, .contentTransition, zoom navigation transition, .sensoryFeedback, Liquid Glass) trước khi tự viết motion.
Tra catalog theo mục đích: trạng thái chờ, tiến trình có phần trăm thật, phản hồi khi tap, toggle, card deck/carousel, tiêu đề hero, khung nhập liệu, hiệu ứng mở khóa/reveal, và shader Metal — kèm đường dẫn nguồn và ghi chú khi "bê" code.
Hướng dẫn hiện đại hóa code cũ: thay timer state machine bằng .phaseAnimator/.keyframeAnimator/Task.sleep, thay wrapper haptic UIKit bằng .sensoryFeedback, thay bounds cứng bằng GeometryReader.
Áp dụng nguyên tắc tiết chế: mỗi màn hình chỉ một motion đặc trưng, tương tác tần suất cao thì nhẹ và ngắn, luôn tôn trọng Reduce Motion.

Phù hợp với ai

Lập trình viên iOS/macOS dùng SwiftUI muốn UI "có sức sống" hơn
Dev solo hoặc team startup có ý tưởng animation nhưng chưa biết chọn mẫu nào
Engineer phải chuyển yêu cầu của designer thành implementation SwiftUI cụ thể
Team muốn thống nhất "ngôn ngữ chuyển động" cho toàn bộ app

Ví dụ sử dụng

"Nút thanh toán xong nên có cảm giác chúc mừng" → tìm trong nhóm Action feedback, nhưng cân nhắc trước xem .symbolEffect + .sensoryFeedback đã đủ chưa.
"Màn hình đang tải nhìn buồn tẻ" → gợi ý loader cho trạng thái chờ không xác định, chọn biến thể ngắn và nhẹ vì màn hình xuất hiện thường xuyên.
"Tiêu đề onboarding cần ấn tượng" → chọn mẫu text/hero, rồi thay màu, font, asset demo bằng design token của app theo checklist.

· · · 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/RayFernando1337/rayfernando-skills/HEAD/plugins/swiftui-animation-match/skills/swiftui-animation-match/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)

Tải tệp ZIP bằng nút bên dưới.
Trong Claude, mở Settings → Capabilities và bật 'Code execution and file creation'. (chỉ một lần)
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 plugins/swiftui-animation-match/skills/swiftui-animation-match từ repo GitHub RayFernando1337/rayfernando-skills vào ~/.claude/skills/swiftui-animation-match/ 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/RayFernando1337/rayfernando-skills.git && mkdir -p ~/.claude/skills && cp -r rayfernando-skills/plugins/swiftui-animation-match/skills/swiftui-animation-match ~/.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.

Mở Terminal trên máy Mac.
Clone repo skill: git clone https://github.com/RayFernando1337/rayfernando-skills.git
Tạo thư mục skill cá nhân: mkdir -p ~/.claude/skills
Copy skill vào đó: cp -r rayfernando-skills/plugins/swiftui-animation-match/skills/swiftui-animation-match ~/.claude/skills/
Kiểm tra thư mục references/ (matching-playbook.md, các file catalog, sources.md) đã được copy đầy đủ — đây là phần dữ liệu quan trọng nhất.
Khởi động lại Claude Code, mở project iOS/macOS và thử hỏi: "Animation SwiftUI nào phù hợp cho màn hình loading này?"
Cần cài Xcode (Preview/Simulator) để xem và đánh giá chuyển động thực tế.

Xem mã nguồn trên GitHub ↗Giấy phép: Apache-2.0