cmp-preview

cmp-preview is a skill for Claude Code from kvdm-co-pilot/create-cmp. It costs 205 tokens per session (2,427 once invoked), scanned B, original, MIT.

A live preview workflow for Kotlin and Compose Multiplatform screens. Compose Multiplatform is a toolkit for building user interfaces that run on multiple platforms.

In plain words
What is it for?
Use it while editing Compose screens to render a current gallery and check how each change affected the interface.
Why use it?
It shows what real screens look like after code changes without requiring a device, emulator, or manually run Gradle build. It helps catch visual and structural mistakes during development.

Skill for Claude Code

Written for Claude Code: shipped in a Claude Code plugin. Also seen: reads .claude/ paths.

Part of the create-cmp plugin — 18 skills, 4 agents, 3 hooks, 1 MCP server shipped together

Good fit Use it while editing Compose screens to render a current gallery and check how each change affected the interface.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/kvdm-co-pilot/create-cmp/cmp-preview
Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent
npx skills add kvdm-co-pilot/create-cmp --skill cmp-preview
Clone the repo
git clone --depth 1 https://github.com/kvdm-co-pilot/create-cmp

Made for: Claude Code.

Or install create-cmp, the plugin that ships this one along with the rest of its 18 skills, 4 agents, 3 hooks, 1 MCP server.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for cmp-preview

README.md
[![agentmods](https://agentmods.dev/badge/skills/kvdm-co-pilot/create-cmp/cmp-preview/github.svg)](https://agentmods.dev/skills/kvdm-co-pilot/create-cmp/cmp-preview)
Your own site
<a href="https://agentmods.dev/skills/kvdm-co-pilot/create-cmp/cmp-preview"><img src="https://agentmods.dev/badge/skills/kvdm-co-pilot/create-cmp/cmp-preview/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

agentmods 80×15 button for cmp-preview

Your own site · 80×15
<a href="https://agentmods.dev/skills/kvdm-co-pilot/create-cmp/cmp-preview"><img src="https://agentmods.dev/badge/skills/kvdm-co-pilot/create-cmp/cmp-preview.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 205 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 2,427 The whole file, excluding the scripts and references it only reads on demand.
Security scan B 1 finding. A grade says what 26 rules found in the file — not that it is safe.
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5.1 $0.00205 $0.02427
Opus 5.5 $0.00082 $0.00971
Sonnet 5.5 $0.00041 $0.00485
Haiku 4.5 $0.00020 $0.00243

Measured 25d ago against content hash 4caf05eb619e, method: parsed. Prices are Anthropic first-party input rates as of 2026-10-07, from the pricing page.

Security

Grade B, and why

cmp-preview scanned grade B with 1 finding against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 25d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Reads agent configuration directoriesmediumAgent snooping

.claude/, .codex/, .gemini/ hold keys, settings and other credentials a mod has no legitimate need for.

1. **Plugin enabled?** Check `enabledPlugins` in `~/.claude/settings.json` (or the project's
skills/cmp-preview/SKILL.md · 150 lines

How it starts

The opening of the file, as written. The whole thing — 150 lines — stays where its author put it; the contents beside it link to each section on GitHub.

cmp-preview — live previews of real screens, zero commands

Your job: give the human a live gallery URL of their app's real screens and keep it current while they (or you) edit code — and use the structural side of the same render to verify changes. Nobody runs Gradle by hand; the MCP service owns the loop.

Before anything: confirm the capability (fail loud)

The cmp-inspector MCP tools are a capability, not a given. Before your first call, confirm they resolve (ToolSearch for "cmp-inspector"). If no tools match, STOP — do not fall back to manual Gradle, screenshots, or raw adb silently. Diagnose in order and REPORT to the human:

  1. Plugin enabled? Check enabledPlugins in ~/.claude/settings.json (or the project's .claude/settings.json).
  2. Session older than the plugin's enablement? MCP servers attach at session START — a session born without the plugin never gains its tools, and no amount of in-session retrying will surface them. The fix is restarting the session.
  3. Plugin copy stale or server broken? Run cmp-doctor's inspector-MCP check group.

Only after reporting may the documented degraded path (./gradlew :composeApp:renderScreens

  • node qa/preview-gallery.mjs) be used — and the report must name what is lost: on-save re-render, changed-screen attribution, and the preview_diff change proof.

The one-call flow

  1. preview { projectDir } (cmp-inspector MCP) — starts (or reuses) the resident service. It:
    • renders every inspector/PreviewRegistry.kt entry headlessly via the app's generated :composeApp:renderScreens task (real Koin DI, real theme, real data);
    • serves the live gallery at the returned url (default http://127.0.0.1:9600/);
    • watches composeApp/src/** — every save re-renders (debounced, serialized) and the page reloads itself via SSE, with changed screens flagged CHANGED. 1b. Phase 2 runs automatically (hot, default true): the service boots a resident preview daemon under Compose Hot Reload (hotRunDesktop --mainClass=<pkg>.inspector.PreviewDaemonKt --auto, JBR auto-provisioned). Saving a file recompiles incrementally and hot-swaps classes INTO the running JVM; renders go through the daemon's loopback /render — measured on a real app: ~900ms for one screen, ~7s for all seven, ~10s save→gallery-shows-the-change (vs 25–40s per change on the task path). If the daemon can't boot (no dev-client feature/hot-reload plugin, no JBR) the service transparently stays on the Gradle path — same gallery, slower loop.
  2. Hand the human the url (open it for them if you can, e.g. open <url> on macOS, or the host's browser surface). That's their whole workflow: edit → save → watch the gallery update. First render includes a Gradle compile (tens of seconds); warm saves re-render in a few seconds.
  3. You work structurally — after every edit, ONE call: preview_status { waitForRender: true }. It blocks until the render (or the recompile) finishes and returns changedLastRender (empty = your edit reached no screen), lastError/lastErrorSource ("compile" = your edit didn't even build — the daemon surfaces hot-recompile failures, you are NOT flying blind), and screens: [{ id, nodes, tokenized, tagged, a11yPass, a11yViolations, lastChangedVersion, tree, png }]. No HTTP polling, no sleeps. Assert deeper on the tree paths with inspect_tree (pass testTag for one subtree) — never read PNGs.
  4. preview_stop {} when the session is done (the Gradle daemon stays warm — good).

Read the full file on GitHub · 150 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 25d ago Changed · -5 lines · -68 tokens per session 4caf05eb619e
  2. 1mo ago Changed · +5 tokens per session a0caa13211eb
  3. 1mo ago First seen · 155 lines · 268 tokens per session scan B 74794e4111ae

Subscribe to this mod's changes

cmp-preview is a skill published in the GitHub repository kvdm-co-pilot/create-cmp (0 stars, last pushed 4d ago), licensed MIT. It adds 205 tokens to every session and 2,427 once invoked, about $0.0008 per session on Opus 5.5. A static security scan graded it B with 1 finding (reads agent configuration directories). No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.

Related

Other skills, from other repositories

compose-multiplatform

Use when building one shared Compose UI in Kotlin across Android, iOS, and desktop — commonMain @Composables, expect/actual, source-set placement, native interop, multiplatform ViewModel/navigation/Koin. NOT a single-platform native build (that is kotlin-android / swift-ios), and NOT Dart/Flutter cross-platform UI…

ericrisco/rsc-harness · 80 tokens

mapkit

MapKit + CoreLocation for iOS (iOS 17–26 era). SwiftUI Map with MapContentBuilder (Marker / Annotation / MapPolyline / MapPolygon / MapCircle / UserAnnotation), MapCameraPosition & MapCamera with onMapCameraChange, mapStyle / mapControls / selection, MapReader + MapProxy coordinate conversion, and Look Around…

TalissonVitorino/kmp-ios-skills · 246 tokens

swiftlint

Configure and roll out SwiftLint for an iOS/Swift (or KMP-iOS) fintech app — author .swiftlint.yml (disabledrules / optinrules / onlyrules / analyzerrules / included / excluded / customrules, per-rule severity thresholds, parentconfig / childconfig), wire it via the SwiftLintPlugins SPM build-tool plugin (SimplyDanny)…

TalissonVitorino/kmp-ios-skills · 251 tokens

navigation

Navigation for Android and Kotlin Multiplatform/iOS apps - all three approaches in one place. (A) Jetpack Navigation Compose (androidx.navigation - NavController, NavHost, composable , type-safe @Serializable routes, nested graphs, bottom nav, deep links, results via SavedStateHandle). (B) Jetpack Navigation 3 / Nav3…

TalissonVitorino/kmp-ios-skills · 177 tokens

swift-patterns

Core Swift language patterns, optionals, closures, protocols, generics, and modern Swift features.

TalissonVitorino/kmp-ios-skills · 24 tokens

kmp-networking

Ktor HTTP client for Kotlin Multiplatform - shared API layer in commonMain with per-target engines (OkHttp/Android engine on Android, Darwin on iOS), kotlinx.serialization, and shared error handling. Use for multiplatform or shared networking. For an Android-only Ktor/OkHttp client use ktor-patterns. For deeper…

TalissonVitorino/kmp-ios-skills · 105 tokens