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

Compose Graphics (Hiệu ứng nâng cao cho Android)

Bộ công thức nâng cao giúp triển khai chuyển động M3 Expressive, shader AGSL và vẽ generative bằng Canvas trong Jetpack Compose.

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

Làm được gì

  • Bảng quyết định API: cần spring nảy, shader theo pixel, hay vẽ generative — chọn đúng API ngay lập tức.
  • Material 3 Expressive: khác biệt giữa MotionScheme.expressive() và standard(), các token spatial/effects (fast/default/slow), công thức tinh chỉnh spring và morph hình dạng với androidx.graphics.shapes.
  • Shader AGSL (Android 13+): mã shader cho ripple khi chạm, gradient holographic, liquid glass (chromatic aberration + blur), kèm cách bind qua RuntimeShader + Modifier.graphicsLayer và mẫu gate SDK 33 với fallback.
  • Canvas/DrawScope: sóng sine động, hệ 50 particle, flow field, cùng vòng lặp frame withFrameMillis.
  • 5 anti-pattern: lạm dụng Expressive, thiếu gate API, Canvas đọc state trực tiếp, xâu chuỗi 4 shader, cấp phát object trong DrawScope.

Dành cho ai

  • Lập trình viên Android dùng Jetpack Compose.
  • Người muốn nâng chất lượng thị giác cho màn hình hero, onboarding, tương tác thương hiệu.
  • Người mới thử shader AGSL hoặc vẽ Canvas và muốn tránh bẫy hiệu năng, tương thích.

Ví dụ sử dụng

  1. "Cho card mở rộng với spring Expressive hơi nảy" → sinh code updateTransition + slowSpatialSpec().
  2. "Tạo hiệu ứng liquid glass cho panel" → shader chromatic aberration + Modifier.blur(), kèm fallback cho Android 12 trở xuống.
  3. "Thêm nền particle bay cho màn hình loading" → dùng mẫu particle pool trên Canvas với Path tái sử dụng.

· · · 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)
  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-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.

  1. Mở Terminal.
  2. Clone repo: git clone https://github.com/AThevon/genjutsu.git
  3. Tạo thư mục skill nếu chưa có: mkdir -p ~/.claude/skills
  4. Copy skill: cp -r genjutsu/skills/_jutsu/compose-graphics ~/.claude/skills/
  5. (Khuyến nghị) copy thêm skill nền tảng: cp -r genjutsu/skills/_jutsu/compose-motion ~/.claude/skills/
  6. Khởi động lại Claude Code, gõ /skills để kiểm tra compose-graphics đã xuất hiện.
  7. Thử yêu cầu: "Viết shader AGSL tạo ripple trong Compose" — skill sẽ tự được nạp.
Xem mã nguồn trên GitHub ↗Giấy phép: MIT