# Coil Compose

Expert guidance on using Coil for image loading in Jetpack Compose.

- Repository: https://github.com/new-silvermoon/awesome-android-agent-skills (998 stars)
- Category: Media
- License: Apache-2.0
- Last updated: 2026-07-27
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add new-silvermoon/awesome-android-agent-skills --skill coil-compose -g -a claude-code -y`
Codex: `npx skills add new-silvermoon/awesome-android-agent-skills --skill coil-compose -g -a codex -y`
Cursor: `npx skills add new-silvermoon/awesome-android-agent-skills --skill coil-compose -g -a cursor -y`
Gemini CLI: `npx skills add new-silvermoon/awesome-android-agent-skills --skill coil-compose -g -a gemini-cli -y`

## Description

Expert guidance on using Coil for image loading in Jetpack Compose. Use this when asked about loading images from URLs, handling image states, or optimizing image performance in Compose.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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.

```kotlin
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.

> [!WARNING]
> `rememberAsyncImagePainter` does not detect the size your image is loaded at on screen and always loads the image with its original dimensions by default. Use `AsyncImage` unless a `Painter` is strictly required.

```kotlin
val painter = rememberAsyncImagePainter(
    model = ImageRequest.Builder(LocalContext.current)
        .data("https://example.com/image.jpg")
        .size(Size.ORIGINAL) // Explicitly define size if needed
        .build()
)
```

### 3. Slot API: `SubcomposeAsyncImage`
Use `SubcomposeAsyncImage` when you need a custom slot API for different states (Loading, Success, Error).

> [!CAUTION]
> Subcomposition is slower than regular composition. Avoid using `SubcomposeAsyncImage` in performance-critical areas like `LazyColumn` or `LazyRow`.

The rest: https://github.com/new-silvermoon/awesome-android-agent-skills/blob/HEAD/.github/skills/ui/coil-compose/SKILL.md