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

Compose Motion (Animation cho Jetpack Compose)

Skill hướng dẫn chọn API animation trong Jetpack Compose, tinh chỉnh spring và tránh các anti-pattern gây jank.

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

Skill này làm gì

  • Cung cấp cây quyết định để biết nên dùng animate*AsState, AnimatedVisibility, Crossfade, AnimatedContent, updateTransition, Animatable hay SharedTransitionLayout.
  • Đưa ra giá trị spring mặc định (stiffness, dampingRatio) cho từng tình huống: modal, nhấn nút, toast, kéo theo ngón tay.
  • Chỉ ra các anti-pattern hiệu năng kèm code BAD/GOOD: animate kích thước layout, LaunchedEffect(true), thiếu key trong LazyColumn, lồng AnimatedContent trong item danh sách.
  • Bảng ánh xạ gesture (draggable, anchoredDraggable, transformable) và cách tôn trọng tuỳ chọn giảm chuyển động (accessibility).

Phù hợp với ai

  • Lập trình viên Android dùng Jetpack Compose hoặc Compose Multiplatform.
  • Người đang gặp jank, tụt frame khi scroll danh sách có animation.
  • Người muốn làm hero animation (shared element) khi chuyển màn hình.

Ví dụ sử dụng

  1. "Thêm hiệu ứng trượt khi đổi tab" → nhận code AnimatedContent với togetherWith.
  2. "Làm hero animation ảnh từ danh sách sang trang chi tiết" → nhận mẫu SharedTransitionLayout + rememberSharedContentState(key).
  3. "Animation mở rộng thẻ bị giật" → được hướng dẫn đổi từ animate width sang graphicsLayer scale.

· · · 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/AThevon/genjutsu/HEAD/skills/_jutsu/compose-motion/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/_jutsu/compose-motion từ repo GitHub AThevon/genjutsu vào ~/.claude/skills/compose-motion/ 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/AThevon/genjutsu.git && mkdir -p ~/.claude/skills && cp -r genjutsu/skills/_jutsu/compose-motion ~/.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. Tải repo: git clone https://github.com/AThevon/genjutsu.git
  3. Tạo thư mục skills: mkdir -p ~/.claude/skills
  4. Copy skill: cp -r genjutsu/skills/_jutsu/compose-motion ~/.claude/skills/
  5. Kiểm tra đã có thư mục references/: ls ~/.claude/skills/compose-motion
  6. Khởi động lại Claude Code, mở project Compose và yêu cầu về animation để skill được kích hoạt.
Xem mã nguồn trên GitHub ↗Giấy phép: MIT