Claude Skill MartBrowse skillsQuick linesLearn by videoTerminal guideWhat is a Skill?
 
← Back to list

Compose Graphics (M3 Expressive · AGSL · Canvas)

An advanced skill for building high-end Jetpack Compose visuals: M3 Expressive motion physics, AGSL shaders, and Canvas generative drawing.

Dev & CodingAdvanced★ 395⑂ 29AI score 9/10Last updated: Sep 30, 2026

What it does

Splits advanced Compose visuals into three domains and tells Claude exactly which API to reach for, with compilable examples.

  • Decision table: bouncy spring physics → MotionScheme.expressive(); pixel-level effects → RuntimeShader + Modifier.graphicsLayer; generative drawing → Canvas/DrawScope; GPU blur → Modifier.blur.
  • Material 3 Expressive: standard() vs expressive() spring tokens with actual damping/stiffness values, the spatial-vs-effects distinction, shape morphing with MaterialShapes + Morph, and a clear line between stable material3 1.4.0 and experimental 1.5.0-alpha APIs.
  • AGSL shaders: working recipes for touch ripple, holographic gradient and liquid glass (chromatic aberration), each with Compose binding code and a mandatory SDK_INT >= 33 gate plus fallback.
  • Canvas/DrawScope: animated sine wave, 50-particle field, flow fields, plus perf rules (reuse a remembered Path, gate redraws with derivedStateOf, prefer withFrameMillis over delay(16)).
  • Five anti-patterns: Expressive everywhere, missing SDK gate, Canvas reading state directly, chaining four shaders, allocating inside DrawScope.

Who it's for

  • Compose developers adding brand-defining hero motion or shader effects to Android apps
  • UI engineers asked to approximate iOS-style glass effects on Android
  • Anyone drawing custom charts, particles or generative art on Canvas who needs to hold 60fps

Examples

  1. "Make this detail card expand with Expressive springs" → code animating height via slowSpatialSpec() and alpha via defaultEffectsSpec().
  2. "Add a touch-ripple shader to this surface" → AGSL source, RenderEffect.createRuntimeShaderEffect binding, and an Android 12 fallback.
  3. "Morph a badge from circle to cookie shape" → a custom Shape that scales the 0..1-normalized Morph path to the draw size.

· · · Install guide · · ·

Try it now, no install

Paste this into Claude to use the skill without installing anything.

Read the instructions in this file and follow them to help me:
https://raw.githubusercontent.com/AThevon/genjutsu/HEAD/skills/_jutsu/compose-graphics/SKILL.md

What I want: (describe your task here)

If Claude can't open the link, open it yourself and paste the contents instead.

↓ If it works for you, download the ZIP below and install it. Then it runs on its own — no pasting each time.

Install in the Claude app (no terminal)
  1. Download the ZIP with the button below.
  2. In Claude, open Settings → Capabilities and turn on 'Code execution and file creation'. (one time)
  3. Go to Customize → Skills → + → 'Upload a skill' and upload the ZIP.
↓ Download ZIP
Install in Claude Code

Let Claude do it — paste this into Claude Code

Install the skill I found on Claude Skill Mart.
Copy the skills/_jutsu/compose-graphics folder from the GitHub repo AThevon/genjutsu into my ~/.claude/skills/compose-graphics/.
When it's done, tell me in one line what this skill can do.

Install with a command instead

git clone https://github.com/AThevon/genjutsu.git && mkdir -p ~/.claude/skills && cp -r genjutsu/skills/_jutsu/compose-graphics ~/.claude/skills/

⚠ This is a third-party skill. Check the source repository before installing.

  1. Open a terminal.
  2. Clone the repo: git clone https://github.com/AThevon/genjutsu.git
  3. Create the skills folder: mkdir -p ~/.claude/skills
  4. Copy this skill: cp -r genjutsu/skills/_jutsu/compose-graphics ~/.claude/skills/
  5. (Recommended) copy the sibling skills it links to: cp -r genjutsu/skills/_jutsu/compose-motion genjutsu/skills/_jutsu/compose-multiplatform ~/.claude/skills/ — or copy the whole _jutsu folder so every references/ link resolves.
  6. Restart Claude Code and confirm it appears under /skills.
  7. Trigger it with requests containing keywords like "AGSL shader", "M3 Expressive", "holographic", or "Canvas generative".
  8. The doc pins its API claims to a stated verification date — re-check your project's actual material3 and graphics-shapes versions before trusting version numbers.
View source on GitHub ↗License: NOASSERTION