One-click install
npx skills add https://github.com/sahuadarsh0/Wallet --skill coil-compose-sahuadarsh0
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: coil-compose
Source: https://github.com/sahuadarsh0/Wallet/tree/main/.cursor/skills/coil-compose
Command: npx skills add https://github.com/sahuadarsh0/Wallet --skill coil-compose-sahuadarsh0

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Simplifies loading remote images in Jetpack Compose by providing a cohesive API with caching, placeholders, error handling, and state management via Coil.

Core Features & Use Cases

  • AsyncImage handles most image loading scenarios with automatic size resolution and convenient parameters like placeholder, error, and contentDescription.
  • rememberAsyncImagePainter offers low-level control when a Painter is required or when observing loading state manually.
  • SubcomposeAsyncImage enables custom loading/empty/success/error slots, with a caution about performance in lists.
  • Performance best practices include a single ImageLoader instance, crossfade, and proper sizing to optimize rendering.

Quick Start

Add Coil's AsyncImage to your Compose UI and configure an ImageRequest with your image URL, placeholder, 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 using Coil?

To load remote images in Jetpack Compose using Coil, use AsyncImage with an ImageRequest configured for your URL, placeholder, and contentDescription. It handles automatic size resolution, caching, and error handling efficiently.

What is the difference between AsyncImage and rememberAsyncImagePainter in Coil?

AsyncImage handles most image loading scenarios automatically, while rememberAsyncImagePainter offers low-level control when a Painter is required or when you need to manually observe the image loading state in Jetpack Compose.

When should I use SubcomposeAsyncImage for image loading in Compose?

Use SubcomposeAsyncImage in Jetpack Compose when you need custom loading, empty, success, or error slots. Exercise caution using it in lists, as subcomposition can introduce performance overhead during scrolling.

What are the performance best practices for Coil image loading in Jetpack Compose?

Performance best practices for Coil image loading include using a single ImageLoader instance, enabling crossfade animations, and applying proper sizing to optimize rendering and memory usage in Jetpack Compose.

How do I handle placeholders and error states when loading images with Coil?

Handle placeholders and error states in Coil by configuring the convenient parameters within AsyncImage or your ImageRequest. This ensures seamless state management for avatars, banners, or article thumbnails.