Compose Graphics (M3 Expressive · AGSL · Canvas)

Kỹ năng nâng cao giúp dựng hiệu ứng thị giác trong Jetpack Compose: vật lý chuyển động M3 Expressive, shader AGSL và vẽ generative bằng Canvas.

Lập trìnhNâng cao★ 395⑂ 29Điểm AI 9/10Cập nhật lần cuối: 30 thg 9, 2026

Làm được gì

Chia phần "đồ họa nâng cao" của Jetpack Compose thành ba nhóm và chỉ rõ nên dùng API nào, kèm code mẫu.

Bảng quyết định: cần spring nảy → MotionScheme.expressive(); hiệu ứng cấp pixel → RuntimeShader + graphicsLayer; vẽ generative → Canvas/DrawScope.
Material 3 Expressive: so sánh token spring standard() và expressive() (kèm số damping/stiffness), phân biệt token spatial vs effects, morph hình với MaterialShapes + Morph, và ranh giới giữa material3 1.4.0 ổn định và API thực nghiệm 1.5.0-alpha.
Shader AGSL: công thức ripple khi chạm, gradient holographic, liquid glass (chromatic aberration) kèm code bind vào Compose; luôn kiểm tra Build.VERSION.SDK_INT >= 33 và có phương án dự phòng.
Canvas/DrawScope: sóng sin động, hệ 50 hạt, flow field, cùng quy tắc hiệu năng như tái dùng Path, dùng derivedStateOf.
5 anti-pattern: lạm dụng Expressive, thiếu cổng SDK, Canvas đọc state trực tiếp, xếp 4 shader nối tiếp, cấp phát đối tượng trong DrawScope.

Phù hợp với ai

Lập trình viên Compose muốn thêm hiệu ứng hero/shader mang dấu ấn thương hiệu
Kỹ sư UI cần mô phỏng hiệu ứng kính (glass) kiểu iOS trên Android
Người vẽ chart tùy biến, particle, generative art bằng Canvas và cần tránh tụt frame

Ví dụ sử dụng

"Cho card mở rộng bằng spring Expressive" → sinh code animate chiều cao bằng slowSpatialSpec() và alpha bằng defaultEffectsSpec().
"Thêm shader ripple khi chạm vào surface" → viết AGSL, bind qua RenderEffect.createRuntimeShaderEffect, kèm fallback cho Android 12 trở xuống.
"Morph icon badge từ hình tròn sang hình cookie" → tạo Shape tùy biến xử lý Morph và scale path đã chuẩn hóa 0..1.

· · · 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-graphics/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 skills/_jutsu/compose-graphics từ repo GitHub AThevon/genjutsu vào ~/.claude/skills/compose-graphics/ 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-graphics ~/.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.
Clone repo: git clone https://github.com/AThevon/genjutsu.git
Tạo thư mục skill: mkdir -p ~/.claude/skills
Copy skill này: cp -r genjutsu/skills/_jutsu/compose-graphics ~/.claude/skills/
(Khuyến nghị) copy luôn các skill liên quan được tham chiếu: cp -r genjutsu/skills/_jutsu/compose-motion genjutsu/skills/_jutsu/compose-multiplatform ~/.claude/skills/ — hoặc copy cả thư mục _jutsu để các link references/ không bị hỏng.
Khởi động lại Claude Code và kiểm tra bằng /skills.
Kích hoạt bằng yêu cầu chứa từ khóa như "AGSL shader", "M3 Expressive", "Canvas generative".
Ngày xác minh phiên bản ghi ở đầu tài liệu có thể đã cũ — hãy kiểm tra lại phiên bản material3 và graphics-shapes trong dự án của bạn.

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