verifying-compose-ui

Visual Verification of Compose UI Components

Renders Compose UI components and @Preview functions to images for rapid visual verification, enabling state-transition capture and regression detection without a full device or emulator.

Positive Triggers (when to activate)

• Rendering a specific Composable function or an @Preview to an image.
• Capturing state transitions of UI components via a sequence of images.
• Troubleshooting visual regressions or rendering issues in Compose.

Negative Triggers (when NOT to activate)

• Operating a Gradle build (use using-gradle).
• Modifying build definitions (use authoring-gradle-builds).
• Probing non-visual project logic (use interacting-with-project-runtime).

Constitution

• ALWAYS use this skill for visual verification of Compose components — never attempt to run a full Android emulator or desktop window for visual checks.
• ALWAYS specify the exact Composable or @Preview function to render.
• NEVER render components that require platform-specific APIs unavailable on the JVM (e.g., Android-only system services).
• PREFER desktop Compose rendering over Android rendering when the component is platform-agnostic.

Directives

Identifying the Component

1. Determine the fully qualified name of the Composable or @Preview function.
2. Identify the module containing the component (e.g., :app, :ui).
3. Determine the source set (main, debug, or preview if a dedicated preview source set exists).

Starting a Rendering Session

Call kotlin_repl(command="start", ...) with the appropriate project path and source set, plus Compose-specific dependencies. For general session parameters, lifecycle management, and environment troubleshooting, see REPL Session Setup.

{
  "command": "start",
  "projectPath": ":ui",
  "sourceSet": "main",
  "additionalDependencies": [
    "org.jetbrains.compose.ui:ui-tooling:1.6.0",
    "org.jetbrains.compose.desktop:desktop:1.6.0"
  ]
}