Coil Compose

new-silvermoon/awesome-android-agent-skills

This is a solid reference for implementing Coil image loading in Jetpack Compose apps. It covers the three main APIs (AsyncImage, rememberAsyncImagePainter, and SubcomposeAsyncImage) with clear guidance on when to use each. The warnings are genuinely useful, especially the note that rememberAsyncImagePainter loads images at original dimensions by default, which can wreck performance if you're not careful. The skill steers you toward AsyncImage for most cases and explicitly warns against using SubcomposeAsyncImage in lazy lists. If you're loading images from URLs in Compose, this gives you the patterns you need without having to dig through documentation.

skills.sh installs: 464
GitHub stars: 1K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add new-silvermoon/awesome-android-agent-skills --skill coil-compose --agent claude-code

Installs into .claude/skills of the current project.

Files

Coil for Jetpack Compose

Instructions

When implementing image loading in Jetpack Compose, use Coil (Coroutines Image Loader). It is the recommended library for Compose due to its efficiency and seamless integration.

1. Primary Composable: `AsyncImage`

Use AsyncImage for most use cases. It handles size resolution automatically and supports standard Image parameters.

AsyncImage(
    model = ImageRequest.Builder(LocalContext.current)
        .data("https://example.com/image.jpg")
        .crossfade(true)
        .build(),
    placeholder = painterResource(R.drawable.placeholder),
    error = painterResource(R.drawable.error),
    contentDescription = stringResource(R.string.description),
    contentScale = ContentScale.Crop,
    modifier = Modifier.clip(CircleShape)
)

2. Low-Level Control: `rememberAsyncImagePainter`

Use rememberAsyncImagePainter only when you need a Painter instead of a composable (e.g., for Canvas or Icon) or when you need to observe the loading state manually.

SKILL.md on GitHub