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

Compose Motion (Hoạt ảnh Jetpack Compose)

Skill giúp chọn đúng API hoạt ảnh trong Jetpack Compose và tránh các anti-pattern gây giật khung hình.

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

Làm được gì

Hướng dẫn chọn API hoạt ảnh phù hợp trong Jetpack Compose / Compose Multiplatform, kèm mẫu code dùng được ngay.

  • Cây quyết định API: một giá trị → animate*AsState; hiện/ẩn → AnimatedVisibility; đổi layout → AnimatedContent; nhiều thuộc tính đồng bộ → updateTransition; điều khiển tay → Animatable; hero → SharedTransitionLayout
  • Bộ giá trị spring() gợi ý cho modal, nút bấm, toast bouncy, kéo theo ngón tay
  • Bản đồ gesture: draggable, anchoredDraggable, transformable, pointerInput
  • 4 anti-pattern kèm code BAD/GOOD: animate kích thước layout, lạm dụng LaunchedEffect(true), thiếu key trong LazyColumn, lồng AnimatedContent trong từng item
  • Hỗ trợ Reduced Motion: đọc ANIMATOR_DURATION_SCALE và fallback snap()

Phù hợp với ai

  • Lập trình viên Android Compose hoặc Compose Multiplatform
  • Người đang gỡ lỗi jank khi cuộn hoặc hoạt ảnh không mượt
  • Người cần làm chuyển cảnh hero, chuyển tab, crossfade loading đúng chuẩn

Ví dụ sử dụng

  1. "Thêm hero transition ảnh từ danh sách sang trang chi tiết" → sinh code SharedTransitionLayout + rememberSharedContentState(key)
  2. "Card mở rộng bị tụt FPS" → đổi animate width sang graphicsLayer scale hoặc animateContentSize
  3. "Chuyển tab có slide ngang" → AnimatedContent với togetherWith và SizeTransform

· · · 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 skill: mkdir -p ~/.claude/skills
  4. Sao chép skill: cp -r genjutsu/skills/_jutsu/compose-motion ~/.claude/skills/
  5. (Nên làm) Skill tham chiếu các file trong references/ và skill lân cận (../motion-principles, ../compose-graphics), nên sao chép cả bộ: cp -r genjutsu/skills/_jutsu ~/.claude/skills/
  6. Khởi động lại Claude Code rồi yêu cầu ví dụ: "làm hoạt ảnh chuyển màn hình trong Compose".
Xem mã nguồn trên GitHub ↗Giấy phép: NOASSERTION