android-coil-compose
Use Coil in Jetpack Compose with AsyncImage, painter variants, sizing, and accessible image loading patterns.
What this skill does
# 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.md` for the `AsyncImage` vs painter vs subcomposition decision guide. - Read `references/scenarios.md` for list-performance and screenshot-stable validation paths. - Handoff skills when the scope expands: - `android-compose-foundations` - `android-compose-performance` ## Workflow 1. Identify whether the UI needs a simple image surface, low-level painter access, or custom slot-based loading states. 2. Prefer `AsyncImage` first, then drop down to painter APIs only when the component truly needs them. 3. Constrain size, placeholders, and content description so the image behavior is both performant and accessible; for painter APIs, supply an explicit size resolver when needed. 4. Check list rendering, state churn, and visual fallbacks before considering the implementation done, and confirm that remote data or decoder modules are actually present when the source type needs them. 5. Hand off general Compose layout or broader performance issues to the neighboring skills after the image pipeline is stable. ## Guardrails - Prefer `AsyncImage` for most Compose surfaces. - Keep image requests sized to the rendered UI surface when possible. - Provide meaningful accessibility behavior: descriptive `contentDescription` for informative images, `null` for decorative ones. - Avoid subcomposition-heavy image patterns in scroll-heavy lists unless the UX truly needs them. - If you need painter state directly, remember that `rememberAsyncImagePainter` does not infer on-screen size by itself. ## Anti-Patterns - Loading full-size remote assets into tiny list items. - Using `SubcomposeAsyncImage` everywhere when a simple placeholder is enough. - Treating image loading failures as silent no-ops with no error fallback. - Forgetting accessibility semantics on actionable or informative images. ## Review Focus - API choice: `AsyncImage`, `rememberAsyncImagePainter`, or `SubcomposeAsyncImage`. - Correct sizing and request construction for the rendered surface. - Remote-loading prerequisites such as the right Coil network modules. - Stable placeholders and error states for lists, tests, and screenshots. ## Examples ### Happy path - Scenario: Build the Compose fixture and verify a stable `AsyncImage` surface renders in the task board. - Command: `bash skills/android-coil-compose/scripts/run_examples.sh` ### Edge case - Scenario: Review a list cell where placeholders, sizing, and lazy-list performance all matter. - Command: `cd examples/orbittasks-compose && ./gradlew :app:testDebugUnitTest` ### Failure recovery - Scenario: Re-check the image surface after a placeholder or error-state change using screenshot-friendly validation. - Command: `cd examples/orbittasks-compose && ./gradlew verifyRoborazziDebug` ## Done Checklist - `AsyncImage` is the default unless a lower-level painter API is justified. - Sizing, placeholders, and error states are explicit. - Accessibility behavior is intentional. - List and screenshot behavior has been validated on the Compose fixture. ## Official References - [https://coil-kt.github.io/coil/compose/](https://coil-kt.github.io/coil/compose/) - [https://coil-kt.github.io/coil/image_requests/](https://coil-kt.github.io/coil/image_requests/) - [https://coil-kt.github.io/coil/network/](https://coil-kt.github.io/coil/network/) - [https://developer.android.com/develop/ui/compose/graphics/images/loading](https://developer.android.com/develop/ui/compose/graphics/images/loading) - [https://developer.android.com/develop/ui/compose/accessibility](https://developer.android.com/develop/ui/compose/accessibility)
Related in Image & Video
watch
IncludedWatch a video (URL or local path). Downloads with yt-dlp, extracts auto-scaled frames with ffmpeg, pulls the transcript from captions (or Whisper API fallback), and hands the result to Claude so it can answer questions about what's in the video.
physical-ai-defect-image-generation
IncludedUse when the user wants to orchestrate defect image generation, run associated setup, or handle outputs on OSMO. The Day 0 path handles cold-start with USD-to-ROI, image-edit augmentation, and AnomalyGen to create initial PCBA datasets. The Day 1 path performs inference and labeling on real images. This skill helps with first-time asset setup, creation of finetuning checkpoints, and configuring deployment. Trigger keywords: defect image generation, dig workflow, dig pipeline, defect image detection workflow, aoi pipeline, aoi anomalygen, usd2roi anomalygen, day 0 pcba, day 1 pcba, day 1 real-photo alignment, day 1 manual roi, metal surface anomaly, glass defect, anomalygen finetune, setup_pcb, setup_metal, setup_glass, setup_pretrained, dig setup, dig datasets, dig pretrained checkpoint, dig image-edit endpoint.
accelint-react-best-practices
IncludedReact performance optimization and best practices. ALWAYS use this skill when working with any React code - writing components, hooks, JSX; refactoring; optimizing re-renders, memoization, state management; reviewing for performance; fixing hydration mismatches; debugging infinite re-renders, stale closures, input focus loss, animations restarting; preventing remounting; implementing transitions, lazy initialization, effect dependencies. Even simple React tasks benefit from these patterns. Covers React 19+ (useEffectEvent, Activity, ref props). Triggers - useEffect, useState, useMemo, useCallback, memo, inline components, nested components, components inside components, re-render, performance, hydration, SSR, Next.js, useDeferredValue, combined hooks.
elevenlabs-agents
IncludedBuild conversational AI voice agents with ElevenLabs Platform using React, JavaScript, React Native, or Swift SDKs. Configure agents, tools (client/server/MCP), RAG knowledge bases, multi-voice, and Scribe real-time STT. Use when: building voice chat interfaces, implementing AI phone agents with Twilio, configuring agent workflows or tools, adding RAG knowledge bases, testing with CLI "agents as code", or troubleshooting deprecated @11labs packages, Android audio cutoff, CSP violations, dynamic variables, or WebRTC config. Keywords: ElevenLabs Agents, ElevenLabs voice agents, AI voice agents, conversational AI, @elevenlabs/react, @elevenlabs/client, @elevenlabs/react-native, @elevenlabs/elevenlabs-js, @elevenlabs/agents-cli, elevenlabs SDK, voice AI, TTS, text-to-speech, ASR, speech recognition, turn-taking model, WebRTC voice, WebSocket voice, ElevenLabs conversation, agent system prompt, agent tools, agent knowledge base, RAG voice agents, multi-voice agents, pronunciation dictionary, voice speed control, elevenlabs scribe, @11labs deprecated, Android audio cutoff, CSP violation elevenlabs, dynamic variables elevenlabs, case-sensitive tool names, webhook authentication
humanizer
IncludedHumanize AI-generated text by detecting and removing patterns typical of LLM output. Rewrites text to sound natural, specific, and human. Uses 28 pattern detectors, 560+ AI vocabulary terms across 3 tiers, and statistical analysis (burstiness, type-token ratio, readability) for comprehensive detection. Use when asked to humanize text, de-AI writing, make content sound more natural/human, review writing for AI patterns, score text for AI detection, or improve AI-generated drafts. Covers content, language, style, communication, and filler categories.
generating-mermaid-diagrams
IncludedSalesforce architecture diagrams using Mermaid with ASCII fallback. Use this skill when generating text-based diagrams for Salesforce architecture, OAuth flows, ERDs, integration sequences, or Agentforce structure. TRIGGER when: user says "diagram", "visualize", "ERD", or asks for sequence diagrams, flowcharts, class diagrams, or architecture visualizations in Mermaid. DO NOT TRIGGER when: user wants PNG/SVG image output (use generating-visual-diagrams), or asks about non-Salesforce systems.