compose-graphics

compose-graphics is a skill for Claude Code, Codex from AThevon/genjutsu. It costs 36 tokens per session (4,472 once invoked), scanned A, a copy of compose-graphics, MIT.

A guide to advanced visuals in Jetpack Compose, Android's Kotlin interface toolkit. It covers shaders, custom drawing, motion physics, blur, shadows, and other graphics effects.

In plain words
What is it for?
Use it when building Android interfaces with custom drawings, particles, fractals, pixel-level shaders, expressive motion, GPU effects, or glass-like materials.
Why use it?
It helps select the right Compose graphics technique for effects that standard components cannot provide.

Skill for Claude CodeCodex

Part of the genjutsu plugin — 17 skills shipped together

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

agentmods
npx agentmods add skills/athevon/genjutsu/compose-graphics
Any agent
npx skills add AThevon/genjutsu --skill compose-graphics
Clone the repo
git clone --depth 1 https://github.com/AThevon/genjutsu

Made for: Claude Code, Codex.

Or install genjutsu, the plugin that ships this one along with the rest of its 17 skills.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for compose-graphics

README.md
[![agentmods](https://agentmods.dev/badge/skills/athevon/genjutsu/compose-graphics.svg)](https://agentmods.dev/skills/athevon/genjutsu/compose-graphics)
Your own site
<a href="https://agentmods.dev/skills/athevon/genjutsu/compose-graphics"><img src="https://agentmods.dev/badge/skills/athevon/genjutsu/compose-graphics.svg" alt="Measured on agentmods" height="20"></a>
Per session 36 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 4,472 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. Scan, not verified.
Origin 100% copy Near-identical to another mod in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5 $0.00036 $0.04472
Opus 5 $0.00018 $0.02236
Sonnet 5 $0.00007 $0.00894
Haiku 4.5 $0.00004 $0.00447

Measured 4d ago against content hash 7b3889e783a2, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

compose-graphics scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 4d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

Origin

This is a copy

100% identical to compose-graphics — 0 lines differ, which has more behind it and is treated as the original. This page carries a canonical link to it rather than competing with it.

skills/_jutsu/compose-graphics/SKILL.md · 504 lines

How it starts

The opening of the file, as written. The whole thing — 504 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Compose Graphics

Advanced Compose visuals: M3 Expressive motion physics, AGSL shaders (Android 13+), Canvas / DrawScope, graphicsLayer effects. Loaded for advanced thesis (shader, expressive, M3 Expressive, AGSL, Canvas, holographic). Foundation: ../compose-motion/SKILL.md covers basics. Concise rules here. Deep-dive in references/.


Decision Tree: Which API for Which Need

Need API
Spring physics with bounce / overshoot MotionScheme.expressive() (M3 Expressive)
Pixel-level shader RuntimeShader + Modifier.graphicsLayer { renderEffect = ... } (Android 13+)
Generative drawing (paths, particles, fractals) Canvas { drawScope -> ... }
GPU effects (blur, shadows, color filters) Modifier.graphicsLayer { renderEffect = ... } or Modifier.blur(...)
Adaptive system materials (Material You glassmorphism) Modifier.background(MaterialTheme.colorScheme.surfaceContainerHighest)
Liquid glass on Android AGSL shader recipe (no native API like iOS yet)

Domain 1: Material 3 Expressive

What It Is

The 2025 Material 3 evolution introduces spring-based motion physics replacing fixed-duration tweens. New shape morphing API via androidx.graphics.shapes. New MotionScheme selectable on the theme. Aimed at hero moments, key interactions, brand-defining UI.

MotionScheme

Scheme Personality Use For
MotionScheme.standard() Calmer, less overshoot Default for chrome, lists, navigation
MotionScheme.expressive() More overshoot, longer settle Hero reveals, FABs, primary CTAs

Apply on the theme:

MaterialTheme(motionScheme = MotionScheme.expressive()) {
    // children read tokens via MaterialTheme.motionScheme.*
}

Tokens exposed:

Token Domain Speed
fastSpatialSpec() Position / size < 200ms
defaultSpatialSpec() Position / size ~ 350ms
slowSpatialSpec() Position / size ~ 600ms
fastEffectsSpec() Opacity / color < 150ms
defaultEffectsSpec() Opacity / color ~ 250ms
slowEffectsSpec() Opacity / color ~ 400ms

Read the full file on GitHub · 504 lines

Files

What ships with it

3 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 4d ago First seen · 504 lines · 36 tokens per session scan A 7b3889e783a2

Subscribe to this mod's changes

compose-graphics is a skill published in the GitHub repository AThevon/genjutsu (316 stars, last pushed 1mo ago), licensed MIT. It adds 36 tokens to every session and 4,472 once invoked, about $0.0002 per session on Opus 5. A static security scan graded it A with 0 findings. It is 100% identical to compose-graphics, differing in 0 lines, and is treated as a copy.

Related

Other skills, from other repositories

add-component

Add a SwiftUI component from ShipSwift. Use when the user says "add component", "add a view", "add X view", "I need a chart", "add animation", or wants a specific UI element.

signerlabs/ShipSwift · 48 tokens

ss-audit

Audit screens for UX issues using Nielsen's heuristics and modern mobile UX best practices.

bitjaru/styleseed · 20 tokens

design-to-ui

Figma 디자인을 네이티브 UI(Android Compose/XML, iOS SwiftUI/UIKit)로 변환하는 7-Step 워크플로우. 노드 추출·디자인 컨텍스트·검증(Step 1·2·3·7)은 플랫폼 공통이고, 에셋(Step 4·5)과 코드 생성(Step 6)만 플랫폼별 reference로 분기한다. 에셋 A/B/C 분류, 동적 비주얼, project-design-system 위임, 플랫폼 에셋 파이프라인을 포함한다. Figma URL이나 UI 변환 요청 시 이 스킬을 사용하세요.

naver/design-to-ui · 141 tokens

apple-design

Complete Apple Human Interface Guidelines (HIG) and Apple Design System standard. Use when designing, building, or auditing UI/UX for iOS, iPadOS, macOS, watchOS, visionOS, or Apple-styled web and mobile applications.

billythekidz/apple-design-skill · 55 tokens

ship-quality-gate

Run the deterministic auditors over a real project before it ships — design drift, security headers, generated-default tells, SEO/GEO signals, delivery signals, Apple and Android project configuration — and read the results correctly, disclosure list included. Use when someone asks "audit this", "is this ready to…

HalidSaglam/saglitzdesign-mcp · 86 tokens

apple-platform-design

Design iOS, iPadOS, and macOS apps that feel native, in the Liquid Glass era. Use when building or reviewing Apple-platform UI — navigation, controls, sheets, materials, typography, haptics — or deciding what must change when porting from web/Android. Covers Apple's HIG, the Liquid Glass design language (iOS 26 /…

HalidSaglam/saglitzdesign-mcp · 95 tokens