coil-compose

Load remote images in Jetpack Compose using Coil's AsyncImage.

Updated Mar 9, 2025
One-click install
npx skills add https://github.com/rock-hu/vitamin-compose --skill coil-compose-rock-hu
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: coil-compose
Source: https://github.com/rock-hu/vitamin-compose/tree/main/.github/skills/coil-compose
Command: npx skills add https://github.com/rock-hu/vitamin-compose --skill coil-compose-rock-hu

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Coil simplifies loading remote images in Jetpack Compose by providing a native, efficient solution with automatic caching, placeholders, and error handling. This Skill helps you replace boilerplate image loading logic with a reliable, high-performance API.

Core Features & Use Cases

  • Asynchronous image loading: Use Coil's AsyncImage to fetch and display images from URLs with automatic caching.
  • Placeholders & error handling: Show placeholders while loading and graceful fallbacks on failure.
  • Image transitions & sizing: Enable crossfade and proper content scaling for smooth UI.
  • Use Case: Displaying remote images (avatars, banners, product images) across Compose screens.

Quick Start

Create a composable that loads an image from a URL using Coil's AsyncImage, including a placeholder, error image, and contentDescription.

Frequently Asked Questions about coil-compose

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I load remote images in Jetpack Compose?

Load remote images in Jetpack Compose using Coil's AsyncImage composable. It fetches images from URLs asynchronously and includes automatic caching to optimize network usage and display performance across Compose screens.

How do I show a placeholder while loading an image with Coil in Compose?

Show a placeholder while loading an image with Coil by configuring the AsyncImage composable. You can define a placeholder drawable in the ImageRequest to display while the remote URL is being fetched.

Does Coil support error handling for failed image loads in Jetpack Compose?

Coil supports error handling for failed image loads in Jetpack Compose. You can configure an error image within the AsyncImage to display a graceful fallback when the remote image fetch fails.

What dependency do I need to load images with Coil in Jetpack Compose?

You need to add the coil-compose dependency to your project to load images with Coil in Jetpack Compose. This provides the AsyncImage composable and ImageRequest configuration required for the UI.

Can I add crossfade transitions when displaying images with Coil in Compose?

You can add crossfade transitions when displaying images with Coil in Compose. Configuring the ImageRequest enables smooth crossfade transitions and proper content scaling for the UI.