android-coil-compose
Master image loading in Jetpack Compose using Coil's AsyncImage component, painter variants, and subcomposition APIs. This skill covers sizing strategies, placeholder and error state handling, accessibility semantics, and list performance optimization to build stable, responsive image surfaces.
Android Coil Compose loads and displays remote images in Jetpack Compose using AsyncImage and painter APIs with accessible, performant patterns.
AI-generated summary based on this skill's SKILL.md
Decision gist · record as of 2026-03-25
Android Coil Compose loads and displays remote images in Jetpack Compose using AsyncImage and painter APIs with accessible, performant patterns. Master image loading in Jetpack Compose using Coil's AsyncImage component, painter variants, and subcomposition APIs. This skill covers sizing strategies, placeholder and error state handling, accessibility semantics, and list performance optimization to build stable, responsive image surfaces.
Use it when
- android-coil-compose offers three APIs for different needs.
- android-coil-compose supports accessibility through contentDescription parameters on AsyncImage and Image composables.
Verify before relying
Read SKILL.md below before installing (6 files). Open directory: indexed for reading, not audited.
Similar skills
Install
krutikJain/android-agent-skills/android-coil-compose · repository language: Python
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I load images in Jetpack Compose with Coil?
android-coil-compose enables remote image loading via Coil's AsyncImage composable. Pass a URL string to the model parameter, specify a contentDescription for accessibility, and optionally provide contentScale and modifier for layout control. AsyncImage handles network requests, caching, and lifecycle management automatically, making it the simplest approach for most image-loading scenarios in Compose.
What's the difference between AsyncImage, painter, and subcomposition APIs?
android-coil-compose offers three APIs for different needs. AsyncImage is the highest-level composable, ideal for straightforward image display. rememberAsyncImagePainter wraps the image as a Painter for use in Image() or other paint-accepting composables, useful when you need fine-grained control. SubcomposeAsyncImage defers composition until the image loads, enabling custom placeholder and error layouts without layout thrashing.
How can I implement accessible image loading with placeholders and error states?
android-coil-compose supports accessibility through contentDescription parameters on AsyncImage and Image composables. Use the contentScale parameter to maintain aspect ratios, and leverage SubcomposeAsyncImage's content lambda to define custom placeholder and error UI. Always provide meaningful contentDescription values; omit them only for purely decorative images using contentDescription = null.
How do I optimize image rendering performance in scrollable Compose lists?
android-coil-compose performs best in lazy columns when you use AsyncImage with appropriate sizing constraints and enable Coil's disk and memory caching. Avoid layout thrashing by setting fixed dimensions or using contentScale = ContentScale.Crop. For complex layouts, SubcomposeAsyncImage can defer composition until the image arrives, reducing frame drops during scrolling.
What are jetpack compose image loading best practices?
android-coil-compose best practices include: always set contentDescription for accessibility, use contentScale to control aspect ratio behavior, enable caching via Coil's network module configuration, set explicit size constraints to avoid layout shifts, and use SubcomposeAsyncImage in lists to defer composition. Avoid loading oversized images; resize on the server or use Coil's transformation APIs to reduce memory pressure.
When should I use SubcomposeAsyncImage instead of AsyncImage?
android-coil-compose's SubcomposeAsyncImage shines when you need custom placeholder or error UI that adapts to the final image size, or when you want to defer composition until the image loads to prevent layout thrashing in scrollable lists. Use standard AsyncImage for simple cases where a fixed layout and single placeholder suffice, as it has lower composition overhead.
SKILL.md
Rendered from the published skill. Quoted content, verbatim.
Android Coil Compose
When To Use
- Use this skill when the request is about: coil compose image loading, asyncimage android compose, rememberasyncimagepainter android.
- Primary outcome: Use Coil in Jetpack Compose with
AsyncImage, painter variants, sizing, and accessible image loading patterns. - Reach for this skill when the work is specifically about image loading, placeholders, error states, sizing, or list performance in Compose.
- Read
references/patterns.mdfor theAsyncImagevs painter vs
(truncated - see the full file via the links below)
File tree — 6 files
skills/android-coil-compose/SKILL.md
skills/android-coil-compose/agents/openai.yaml
skills/android-coil-compose/references/official-links.md
skills/android-coil-compose/references/patterns.md
skills/android-coil-compose/references/scenarios.md
skills/android-coil-compose/scripts/run_examples.sh
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Load and display remote images in Jetpack Compose using Coil AsyncImage”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
This skill teaches you to develop Android XR augmented experiences for display glasses using Jetpack Compose Glimmer, Google's UI toolkit designed for transparent, additive displays. You'll master Glimmer design principles, theming with GlimmerTheme, and component implementation while adhering to glasses-specific constraints like minimum text legibility and black backgrounds. Use it to create lightweight, real-world-aware apps that project from a host device to connected eyewear.
Master the core patterns of Jetpack Compose to construct responsive, accessible Android interfaces. This skill covers layouts, modifiers, theming, and component design while emphasizing stable state and semantic correctness over premature optimization.
This skill covers the slot API pattern for building reusable Jetpack Compose components. Learn to replace primitive content parameters and boolean flags with composable slots, use scope receivers to expose layout capabilities, and organize defaults in companion objects. The pattern keeps call sites clean while preserving full flexibility for unusual cases.
This skill walks you through systematically converting legacy XML layouts into declarative Jetpack Compose components. Following a 10-step methodology—from candidate selection and dependency setup through theming, migration, validation, and cleanup—you'll achieve pixel-perfect visual parity while preserving functional integrity and project conventions.
Learn to craft responsive Android interfaces using Jetpack Compose and Material Design 3 (Material You). This skill covers adaptive layouts for phones, tablets, and foldables, dynamic color theming, and accessibility best practices.
Styles guides you through adopting Jetpack Compose's Styles API for custom UI components and themes. Follow step-by-step workflows to upgrade dependencies, establish ComponentStyles, and migrate components using Modifier.styleable to replace hard-coded styling parameters with unified style attributes.
More skills xml-to-compose-migration (Apache-2.0) · Cometchat Android V6 Compose Theming (unlicensed)