android-coil-compose

Implement Jetpack Compose image loading with Coil for Android apps.

1|Updated Feb 28, 2026
One-click install
npx skills add https://github.com/Binh230199/ai --skill android-coil-compose
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: android-coil-compose
Source: https://github.com/Binh230199/ai/tree/main/.github/skills/android-coil-compose
Command: npx skills add https://github.com/Binh230199/ai --skill android-coil-compose

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps Android and AAOS teams add reliable image loading in Jetpack Compose without reinventing loading states, cache handling, or performance tuning.

Core Features & Use Cases

  • AsyncImage and SubcomposeAsyncImage patterns for remote artwork, thumbnails, and album art.
  • ImageRequest configuration for placeholders, errors, crossfade, transformations, sizing, and cache keys.
  • Custom ImageLoader setup for shared OkHttp integration, memory and disk cache tuning, and singleton reuse.
  • Performance guidance for lazy lists, preloading, decoding at target size, and avoiding recomposition storms.
  • Use case: build a media screen that shows album artwork, smooth loading states, and efficient caching on constrained devices.

Quick Start

Use the android-coil-compose skill to implement a Jetpack Compose image component with proper placeholders, error handling, cache tuning, and fixed-size lazy list behavior.

Frequently Asked Questions about android-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 with Coil?

To load remote images in Jetpack Compose with Coil, use AsyncImage or SubcomposeAsyncImage components configured with ImageRequest for placeholders, crossfade, and fixed decode sizes to ensure efficient rendering.

What's the best way to handle image loading states in Jetpack Compose?

Handle image loading states in Jetpack Compose by applying explicit placeholder and error configurations within your ImageRequest, ensuring smooth crossfade transitions when fetching remote artwork or album art.

How do I configure a custom ImageLoader for Android image caching?

Configure a custom ImageLoader for Android image caching by setting up a singleton instance with shared OkHttp integration, tuning memory and disk cache parameters, and reusing the loader across your application.

Can I use Coil image loading for Android Automotive (AAOS) media screens?

Yes, you can use Coil image loading for Android Automotive (AAOS) media screens to display album artwork with smooth loading states and efficient caching on constrained automotive devices.

Why do my Coil images cause recomposition storms in lazy lists?

Coil images cause recomposition storms in lazy lists when decode sizes are not fixed and the singleton ImageLoader is not reused; prevent this by decoding at target size and applying performance-safe lazy list rendering.

How do I apply image transformations with Coil in Jetpack Compose?

Apply image transformations with Coil in Jetpack Compose by configuring your ImageRequest with specific transformation parameters, cache keys, and fixed sizing to manipulate remote artwork efficiently.