skills.rest
ronjunevaldoz
ronjunevaldozCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

kmp-image-loading

Implements image loading in Kotlin Multiplatform apps using Coil 3 with caching and placeholders.

2|Updated Jun 6, 2026
Search Tags:#koin#asyncimage#compose multiplatform#kotlin multiplatform#image loading#coil 3#image cache
One-click install
npx skills add https://github.com/ronjunevaldoz/kmp-agent-skills --skill kmp-image-loading-ronjunevaldoz
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: kmp-image-loading
Source: https://github.com/ronjunevaldoz/kmp-agent-skills/tree/main/skills/kmp-image-loading
Command: npx skills add https://github.com/ronjunevaldoz/kmp-agent-skills --skill kmp-image-loading-ronjunevaldoz

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Loading network images in Compose Multiplatform requires correct Coil 3 setup, cache configuration, and placeholder/error handling across Android, iOS, Desktop, and WASM targets, which is easy to get wrong when migrating from Coil 2. ## Core Features & Use Cases - Coil 3 KMP Setup: Adds the correct io.coil-kt.coil3 dependencies to libs.versions.toml and wires a single shared ImageLoader through Koin with memory and disk cache tuning. - Ready-Made Components: Provides NetworkImage, circular AvatarImage, and HeroImage composables with placeholder, error, and loading states. - Testing Support: Includes a FakeImageLoader pattern for Compose UI tests that verifies image load requests without network calls. - Use Case: When building a product listing screen in a KMP app, use this Skill to display remote product photos with placeholders, circular seller avatars, and a shared 50 MB disk cache. ## Quick Start Ask the agent to add Coil 3 image loading with a shared Koin ImageLoader and an AsyncImage-based avatar component to your Compose Multiplatform module.

Frequently Asked Questions about kmp-image-loading

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

FAQPage Schema
How do I load images from a URL in Compose Multiplatform?▼

Use Coil 3's AsyncImage composable with the image URL as the model, plus placeholder and error painters from Res.drawable resources. Coil 3 supports Android, iOS, Desktop, and WASM targets in Kotlin Multiplatform.

Coil 2 vs Coil 3 for Kotlin Multiplatform image loading?▼

Coil 3 is the KMP-ready version using the io.coil-kt.coil3 group ID, while Coil 2 (io.coil-kt) is Android-only. Their APIs differ significantly, so mixing imports from both causes duplicate class errors.

Does Coil 3 work on iOS and Desktop targets?▼

Yes, Coil 3 supports Android, iOS, Desktop, and WASM targets in Kotlin Multiplatform. The iOS target requires the Kotlin/Native memory model, and platform context is provided via expect/actual or a no-context builder variant.

When should I use SubcomposeAsyncImage instead of AsyncImage?▼

Use SubcomposeAsyncImage only when you need custom inline loading or error UI, since it subcomposes content on each frame during loading. For the common case, AsyncImage with placeholder and error painters has lower recomposition cost.

Why does AsyncImage cause layout measurement loops?▼

An unconstrained AsyncImage triggers a layout measurement loop because it has no defined size. Always constrain it with Modifier.size() or fillMaxWidth() before loading the image.

Related Skills

Explore More Software Engineering Skills→
MaelwalserMaelwalser

android-clean-architecture

Organize Android and Kotlin Multiplatform codebases into modular Clean Architecture layers.

Community
Advanced
new-silvermoonnew-silvermoon
948

coil-compose

Implements image loading in Jetpack Compose using Coil with AsyncImage and state handling.

Community
Basic
leogallegoleogallego
1

kotlin-ui-compose-multiplatform

Enforce state-driven shared UI guidelines in Kotlin Multiplatform Compose commonMain code.

Community
Advanced
nihalnihalaninihalnihalani

jac-mobui

Build cross-platform mobile and web apps in Jac using React Native primitives.

Community
Advanced