Compose Multiplatform Patterns
monta-app/ocpp-emulator
Compose Multiplatform and Jetpack Compose patterns for KMP projects — state management, navigation, theming, performance, and platform-specific UI.
Campfire Compose UI conventions. An agent skill from r0adkll/Campfire.
Install Compose UI
$ npx skills add r0adkll/Campfire --skill compose-ui -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install r0adkll/Campfire compose-ui --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/r0adkll/Campfire.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/compose-ui .claude/skills/compose-ui && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "compose-ui" agent skill from https://github.com/r0adkll/Campfire/tree/main/.claude/skills/compose-ui into .claude/skills/compose-ui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "compose-ui", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/r0adkll/Campfire/tree/main/.claude/skills/compose-uiType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add r0adkll/Campfire --skill compose-ui -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install r0adkll/Campfire compose-ui --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/r0adkll/Campfire.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.claude/skills/compose-ui .agents/skills/compose-ui && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "compose-ui" agent skill from https://github.com/r0adkll/Campfire/tree/main/.claude/skills/compose-ui into .agents/skills/compose-ui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "compose-ui", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add r0adkll/Campfire --skill compose-ui -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install r0adkll/Campfire compose-ui --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/r0adkll/Campfire.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.claude/skills/compose-ui .cursor/skills/compose-ui && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "compose-ui" agent skill from https://github.com/r0adkll/Campfire/tree/main/.claude/skills/compose-ui into .cursor/skills/compose-ui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "compose-ui", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/r0adkll/Campfire.git --path .claude/skills/compose-ui--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add r0adkll/Campfire --skill compose-ui -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install r0adkll/Campfire compose-ui --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/r0adkll/Campfire.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.claude/skills/compose-ui .gemini/skills/compose-ui && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "compose-ui" agent skill from https://github.com/r0adkll/Campfire/tree/main/.claude/skills/compose-ui into .gemini/skills/compose-ui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "compose-ui", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install r0adkll/Campfire compose-uiInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add r0adkll/Campfire --skill compose-ui -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/r0adkll/Campfire.git skills-src && mkdir -p .github/skills && cp -r skills-src/.claude/skills/compose-ui .github/skills/compose-ui && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "compose-ui" agent skill from https://github.com/r0adkll/Campfire/tree/main/.claude/skills/compose-ui into .github/skills/compose-ui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "compose-ui", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add r0adkll/Campfire --skill compose-ui -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install r0adkll/Campfire compose-ui --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/r0adkll/Campfire.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.claude/skills/compose-ui .opencode/skills/compose-ui && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "compose-ui" agent skill from https://github.com/r0adkll/Campfire/tree/main/.claude/skills/compose-ui into .opencode/skills/compose-ui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "compose-ui", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
compose-ui- GitHub stars
- 140
- Token cost
- ~886 tokens
- SKILL.md length
- 379 words
- Files
- 2 (incl. references)
- Skills in repo
- 9
- Repo updated
- First seen
- Licence
- GPL-3.0
At a glance
Campfire Compose UI conventions. An agent skill from r0adkll/Campfire.
- Reviewing Compose UI in this repo
- SKILL.md covers When to use, Icons — the one rule, Conventions and Verify
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
- ALWAYS before adding
What it does
Compose UI is an agent skill from r0adkll/Campfire. Campfire Compose UI conventions. Trigger when authoring or reviewing Compose UI in this repo, and ALWAYS before adding, replacing, or importing an icon in UI code — every icon comes from the CampfireIcons pack, generated via the Valkyrie CLI (never from a material-icons library import, and never hand-written vector paths).
Its SKILL.md is about 890 tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files, including reference files (for example `references/adding-icons.md`).
It sits in Mobile. It works with Kotlin and Jetpack Compose. The repository describes itself as: A KMP Compose app for Audiobookshelf. The licence is GPL-3.0.
When your agent uses it
- Reviewing Compose UI in this repo
- ALWAYS before adding
- Importing an icon in UI code — every icon comes from the CampfireIcons pack
- Generated via the Valkyrie CLI (never from a material-icons library import
Example prompts
- “/compose-ui”
What it can do on your machine
Read from SKILL.md and the folder at commit 2fde7e5. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md.
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Compose UI loads about 886 tokens when it runs, and up to ~1.8k if it reads all its reference files. Until then it costs about 84 tokens; SKILL.md has 379 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from r0adkll/Campfire at commit 2fde7e5, republished under its GPL-3.0 licence (© r0adkll). 379 words, ~886 tokens.
Download SKILL.mdSave it as
.claude/skills/compose-ui/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.- name
- compose-ui
- description
- Campfire Compose UI conventions. Trigger when authoring or reviewing Compose UI in this repo, and ALWAYS before adding, replacing, or importing an icon in UI code — every icon comes from the `CampfireIcons` pack, generated via the Valkyrie CLI (never from a material-icons library import, and never hand-written vector paths).
When to use
- Building or editing a Compose screen, composable, or widget in Campfire.
- Any task that needs an icon: a new glyph, a replacement, or a reference the codebase doesn't have yet.
Icons — the one rule
All icons are project-owned ImageVectors under
common/compose/src/commonMain/kotlin/app/campfire/common/compose/icons/, exposed as
extension properties on the CampfireIcons object. The deprecated
material-icons-extended library was removed in PR #1056 and must stay gone — the
dependency is not in the version catalog and no androidx.compose.material.icons
import may be reintroduced.
Packs:
| Pack | Use | Style |
|---|---|---|
CampfireIcons.Rounded | Default for all UI glyphs | Material Symbols Rounded, fill=0 (fill=1 for solid-by-nature glyphs) |
CampfireIcons.Filled | Nav selected states, paired with an unselected Rounded/Outline icon | fill=1 |
CampfireIcons.Outline | Legacy unselected nav set | fill=0 |
CampfireIcons.Theme | Decorative camping/nature icons for app themes | Icons8 Arcade — use the add-theme-icons skill instead |
Before adding, check the icon doesn't already exist:
grep -r "val CampfireIcons" common/compose/src/commonMain/kotlin/app/campfire/common/compose/icons/.
Many old material names were collapsed onto one asset (Clear→Close, WarningAmber→Warning,
ErrorOutline→Error, DeleteOutline→Delete) — search for the concept, not just the exact name.
To add a missing icon, follow references/adding-icons.md —
Valkyrie CLI generation from a Material Symbols SVG, with the project's post-processing rules
(license header, bare name, autoMirror, lazy pattern).
Show full SKILL.md (188 more words)Show less
Conventions
The Circuit screen/presenter/UI pattern, DI scopes, and module layout live in CLAUDE.md — follow them as written. On top of those:
- Every
ImageVectoris declaredby lazy(LazyThreadSafetyMode.NONE)(Theme pack:PUBLICATION). The backing-propertyprivate var _x+get()pattern from older Valkyrie output is banned — convert it on sight. - Every
@Composabletakesmodifier: Modifier = Modifieras its first optional parameter (see thecompose-modifierskill). - Icon-only buttons are wrapped in
IconButtonTooltipwith a localized label (see theiconbutton-a11yskill). - User-facing strings go through
composeResourcesstring resources (see thei18n-composeskill); no apostrophe escaping — writedoesn't, neverdoesn\'t.
Verify
./scripts/ktlint --format(auto-fixes import ordering), then./gradlew :common:compose:compileKotlinJvmfor icon-only changes, or the touched feature module's JVM compile task for UI changes (:app:desktop:compileKotlincompiles everything — the desktop module is pure JVM, so there is nocompileKotlinJvmthere). iOS link tasks can hang — compile tasks only.- Read gradle's own exit code (
./gradlew <task> > log 2>&1; echo $status) — piping the build intotailreports the pipe's exit code and masks a failed or nonexistent task. - Valkyrie PascalCases SVG filenames segment-wise (
Grid3x3.svg→ propertyGrid3X3) — copy the property name from the generated file, not from the filename.
© r0adkll, GPL-3.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 1 other file (references) in .claude/skills/compose-ui of r0adkll/Campfire.
- SKILL.md
- references/adding-icons.md
Open the folder on GitHubat commit 2fde7e5
Compare with similar skills
Compose UI next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Compose UI this skillr0adkll/Campfire | 140 | — | ~886 | Automated safety check: Pass | GPL-3.0 | |
| Compose Multiplatform Patternsmonta-app/ocpp-emulator | 180 | 5 repos | ~2k | Automated safety check: Pass | Apache-2.0 | |
| Android Developmentdpconde/claude-android-skill | 337 | — | ~1.7k | Automated safety check: Pass | MIT | |
| Diagnosing Compose StabilityrosuH/EasyWatermark | 1.9k | 1 repos | ~3.3k | Automated safety check: Pass | Apache-2.0 | |
| Claude Android NinjaDrjacky/claude-android-ninja | 124 | — | ~5.2k | Automated safety check: Pass | Apache-2.0 | |
| Jetpack Composedarriousliu/PiPixiv | 263 | — | ~1.5k | Automated safety check: Pass | Apache-2.0 |
Similar skills
Android Development
dpconde/claude-android-skill
Create production-quality Android applications following Google's official architecture guidance and NowInAndroid best practices.
Diagnosing Compose Stability
rosuH/EasyWatermark
A skill your agent uses to diagnose Jetpack Compose stability problems by enabling and reading the Compose Compiler Reports (classes.txt, composables.txt, composables.csv, module.json).
Claude Android Ninja
Drjacky/claude-android-ninja
Build and migrate Android apps with Kotlin, Jetpack Compose, MVVM, Hilt, Room 3 (KSP, SQLiteDriver, Flow/suspend DAOs), Navigation3, and multi-module Gradle.
Jetpack Compose
darriousliu/PiPixiv
Jetpack Compose expert skill for Android UI development. An agent skill from darriousliu/PiPixiv.
Footgun Scan
maxrave-dev/kotlin-footguns
Scan a Kotlin or Compose Multiplatform diff for known footgun shapes and open the matching trap to confirm each hit.
More from r0adkll/Campfire
All 9 skills in this repoPR Stack
r0adkll/Campfire
Open, describe, and maintain pull requests in Campfire, especially stacks of dependent PRs (each branch built on the one before).
Compose Modifier
r0adkll/Campfire
Enforce the Compose guideline that every @Composable function must declare modifier: Modifier = Modifier as its first optional parameter and apply it to the root layout.
Fdroid Reproducible Foss
r0adkll/Campfire
Rules and reliable local tests for keeping Campfire's foss flavor F-Droid-compatible — a clean source scan (using scandelete, never scanignore) and a byte-for-byte reproducible build.
I18n Compose
r0adkll/Campfire
Extract hardcoded user-facing string literals from a Jetpack Compose / Compose Multiplatform file into the owning module's composeResources/values/<modulestrings.xml, then replace each call site…
Iconbutton A11y
r0adkll/Campfire
Enforce the Campfire IconButton accessibility convention — every IconButton (and its derivatives) must be wrapped with IconButtonTooltip and given a localized action label.
Socket Event Listener
r0adkll/Campfire
Enforce the Campfire pattern for feature modules to react to Audiobookshelf socket events.
Related
Works with
Categories
Questions about Compose UI
What does Compose UI do?
Campfire Compose UI conventions. An agent skill from r0adkll/Campfire. Compose UI is an agent skill from r0adkll/Campfire. Campfire Compose UI conventions.
When should I use Compose UI?
Compose UI fits situations like: reviewing Compose UI in this repo; ALWAYS before adding; importing an icon in UI code — every icon comes from the CampfireIcons pack; generated via the Valkyrie CLI (never from a material-icons library import.
How do I install Compose UI in Claude Code?
Run `npx skills add r0adkll/Campfire --skill compose-ui -a claude-code`. Or copy the skill folder (.claude/skills/compose-ui in r0adkll/Campfire) into .claude/skills/compose-ui in your project. Claude Code loads it when a task matches its description.
How do I install Compose UI in Codex?
Run `npx skills add r0adkll/Campfire --skill compose-ui -a codex`. Or copy the skill folder (.claude/skills/compose-ui in r0adkll/Campfire) into .agents/skills/compose-ui in your project. Codex loads it when a task matches its description.
Can I use Compose UI in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add r0adkll/Campfire --skill compose-ui -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/compose-ui, .gemini/skills/compose-ui, .github/skills/compose-ui and .opencode/skills/compose-ui in your project.
What does Compose UI need to run?
SKILL.md names no scripts, command-line tools or credentials: Compose UI is instructions for the agent only.
Does Compose UI access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Compose UI safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Compose UI use?
Compose UI is published under the GPL-3.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Compose UI use?
About 886 tokens (SKILL.md is roughly 3.5k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 867 tokens, read only when the agent opens those files.
What are the alternatives to Compose UI?
Skills that share tags, products or a category with Compose UI: Compose Multiplatform Patterns (monta-app/ocpp-emulator, 180 stars), Android Development (dpconde/claude-android-skill, 337 stars), Diagnosing Compose Stability (rosuH/EasyWatermark, 1.9k stars) and Claude Android Ninja (Drjacky/claude-android-ninja, 124 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Compose UI?
r0adkll (a GitHub user) maintains it in r0adkll/Campfire, which has 140 GitHub stars. The repository holds 9 skills in this directory. The repository was last updated on October 9, 2026.
Source: r0adkll/Campfire on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.