Agent skill

Jetpack Compose

Jetpack Compose expert skill for Android UI development. An agent skill from darriousliu/PiPixiv.

Apache-2.0Auto-check passedMobile

Install Jetpack Compose

skills CLI

$ npx skills add darriousliu/PiPixiv --skill jetpack-compose -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI

$ gh skill install darriousliu/PiPixiv jetpack-compose --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy

$ git clone --depth 1 https://github.com/darriousliu/PiPixiv.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.github/skills .claude/skills/jetpack-compose && rm -rf skills-src

Use ~/.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/

Paste into Claude Code

Install the "jetpack-compose" agent skill from https://github.com/darriousliu/PiPixiv/tree/master/.github/skills into .claude/skills/jetpack-compose/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "jetpack-compose", 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

$skill-installer install https://github.com/darriousliu/PiPixiv/tree/master/.github/skills

Type 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.

skills CLI

$ npx skills add darriousliu/PiPixiv --skill jetpack-compose -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install darriousliu/PiPixiv jetpack-compose --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/darriousliu/PiPixiv.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.github/skills .agents/skills/jetpack-compose && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "jetpack-compose" agent skill from https://github.com/darriousliu/PiPixiv/tree/master/.github/skills into .agents/skills/jetpack-compose/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "jetpack-compose", 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.

skills CLI

$ npx skills add darriousliu/PiPixiv --skill jetpack-compose -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install darriousliu/PiPixiv jetpack-compose --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/darriousliu/PiPixiv.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.github/skills .cursor/skills/jetpack-compose && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "jetpack-compose" agent skill from https://github.com/darriousliu/PiPixiv/tree/master/.github/skills into .cursor/skills/jetpack-compose/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "jetpack-compose", 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

$ gemini skills install https://github.com/darriousliu/PiPixiv.git --path .github/skills

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add darriousliu/PiPixiv --skill jetpack-compose -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install darriousliu/PiPixiv jetpack-compose --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/darriousliu/PiPixiv.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.github/skills .gemini/skills/jetpack-compose && rm -rf skills-src

Use ~/.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/

Paste into Gemini CLI

Install the "jetpack-compose" agent skill from https://github.com/darriousliu/PiPixiv/tree/master/.github/skills into .gemini/skills/jetpack-compose/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "jetpack-compose", 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.

GitHub CLI

$ gh skill install darriousliu/PiPixiv jetpack-compose

Installs 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).

skills CLI

$ npx skills add darriousliu/PiPixiv --skill jetpack-compose -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/darriousliu/PiPixiv.git skills-src && mkdir -p .github/skills && cp -r skills-src/.github/skills .github/skills/jetpack-compose && rm -rf skills-src

Use ~/.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/

Paste into GitHub Copilot

Install the "jetpack-compose" agent skill from https://github.com/darriousliu/PiPixiv/tree/master/.github/skills into .github/skills/jetpack-compose/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "jetpack-compose", 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.

skills CLI

$ npx skills add darriousliu/PiPixiv --skill jetpack-compose -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install darriousliu/PiPixiv jetpack-compose --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/darriousliu/PiPixiv.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.github/skills .opencode/skills/jetpack-compose && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "jetpack-compose" agent skill from https://github.com/darriousliu/PiPixiv/tree/master/.github/skills into .opencode/skills/jetpack-compose/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "jetpack-compose", 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: jetpack-compose
GitHub stars: 262
Token cost: ~1.5k tokens
SKILL.md length: 452 words
Files: 19 (incl. references)
Skills in repo: 1
Repo updated: Oct 7, 2026
First seen: Oct 7, 2026
Licence: Apache-2.0

At a glance

Jetpack Compose expert skill for Android UI development. An agent skill from darriousliu/PiPixiv.

Works in 4 steps: Understand the request → Consult the right reference → Apply and verify → …
The user mentions Compose
SKILL.md covers Workflow, Key Principles and Source Code Receipts
Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Jetpack Compose is an agent skill from darriousliu/PiPixiv. Jetpack Compose expert skill for Android UI development. Guides state management decisions (@Composable, remember, mutableStateOf, derivedStateOf, State hoisting), view composition and structure, Modifier chains, lazy lists, navigation, animation, side effects, theming, accessibility, and performance optimization. Backed by actual androidx source code analysis. Use this skill whenever the user mentions Compose, @Composable, remember, LaunchedEffect, Scaffold, NavHost, MaterialTheme, LazyColumn, Modifier…

Its SKILL.md is about 1.5k tokens, which your agent loads only when the skill is triggered. The skill folder holds 20 other files, including reference files (for example `references/accessibility.md`, `references/animation.md` and `references/composition-locals.md`).

It sits in Mobile, covering Android development. It works with Jetpack Compose, Android, Kotlin and iOS. The repository describes itself as: 一个使用Compose Multiplatform开发的第三方Pixiv客户端，支持国内直连. The licence is Apache-2.0.

When your agent uses it

The user mentions Compose
MutableStyleState
Any Jetpack Compose API
The user says Android UI

Example prompts

“Android UI”
“Kotlin UI”
“compose layout”
“/jetpack-compose”

Workflow steps

4 steps, taken from the step headings in SKILL.md.

Understand the request
Consult the right reference
Apply and verify
Cite the source

What it can do on your machine

Read from SKILL.md and the folder at commit 0605fba. 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

Jetpack Compose loads about 1.5k tokens when it runs, and up to ~619k if it reads all its reference files. Until then it costs about 236 tokens; SKILL.md has 452 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~236
When it runs · the whole SKILL.md, loaded when a task matches: ~1.5k
With references · SKILL.md plus every file in references/, read only if the agent opens them: ~619k

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 darriousliu/PiPixiv at commit 0605fba, republished under its Apache-2.0 licence (© darriousliu). 452 words, ~1,538 tokens.

Download SKILL.mdSave it as .claude/skills/jetpack-compose/SKILL.md (or your agent's skills folder). This skill also uses 18 other files; get the full folder from GitHub.

name: jetpack-compose
description: Jetpack Compose expert skill for Android UI development. Guides state management decisions (@Composable, remember, mutableStateOf, derivedStateOf, State hoisting), view composition and structure, Modifier chains, lazy lists, navigation, animation, side effects, theming, accessibility, and performance optimization. Backed by actual androidx source code analysis. Use this skill whenever the user mentions Compose, @Composable, remember, LaunchedEffect, Scaffold, NavHost, MaterialTheme, LazyColumn, Modifier, recomposition, Style, styleable, MutableStyleState, or any Jetpack Compose API. Also trigger when the user says "Android UI", "Kotlin UI", "compose layout", "compose navigation", "compose animation", "material3", "compose styles", "styles api", or asks about modern Android development patterns. Even casual mentions like "my compose screen is slow" or "how do I pass data between screens" should trigger this skill.

Jetpack Compose Expert Skill

Non-opinionated, practical guidance for writing correct, performant Jetpack Compose code. Focuses on real pitfalls developers encounter daily, backed by analysis of the actual androidx/androidx source code (branch: androidx-main).

Workflow

When helping with Compose code, follow this checklist:

1. Understand the request

What Compose layer is involved? (Runtime, UI, Foundation, Material3, Navigation)
Is this a state problem, layout problem, performance problem, or architecture question?

2. Consult the right reference

Read the relevant reference file(s) from references/ before answering:

Topic	Reference File
`@State`, `remember`, `mutableStateOf`, state hoisting, `derivedStateOf`, `snapshotFlow`	`references/state-management.md`
Structuring composables, slots, extraction, preview	`references/view-composition.md`
Modifier ordering, custom modifiers, `Modifier.Node`	`references/modifiers.md`
`LaunchedEffect`, `DisposableEffect`, `SideEffect`, `rememberCoroutineScope`	`references/side-effects.md`
`CompositionLocal`, `LocalContext`, `LocalDensity`, custom locals	`references/composition-locals.md`
`LazyColumn`, `LazyRow`, `LazyGrid`, `Pager`, keys, content types	`references/lists-scrolling.md`
`NavHost`, type-safe routes, deep links, shared element transitions	`references/navigation.md`
`animate*AsState`, `AnimatedVisibility`, `Crossfade`, transitions	`references/animation.md`
`MaterialTheme`, `ColorScheme`, dynamic color, `Typography`, shapes	`references/theming-material3.md`
Recomposition skipping, stability, baseline profiles, benchmarking	`references/performance.md`
Semantics, content descriptions, traversal order, testing	`references/accessibility.md`
Removed/replaced APIs, migration paths from older Compose versions	`references/deprecated-patterns.md`
Styles API (experimental): `Style {}`, `MutableStyleState`, `Modifier.styleable()`	`references/styles-experimental.md`

3. Apply and verify

Write code that follows the patterns in the reference
Flag any anti-patterns you see in the user's existing code
Suggest the minimal correct solution — don't over-engineer

4. Cite the source

When referencing Compose internals, point to the exact source file:

// See: compose/runtime/runtime/src/commonMain/kotlin/androidx/compose/runtime/Composer.kt

Show full SKILL.md (234 more words)Show less

Key Principles

Compose thinks in three phases: Composition → Layout → Drawing. State reads in each phase only trigger work for that phase and later ones.
Recomposition is frequent and cheap — but only if you help the compiler skip unchanged scopes. Use stable types, avoid allocations in composable bodies.
Modifier order matters. Modifier.padding(16.dp).background(Color.Red) is visually different from Modifier.background(Color.Red).padding(16.dp).
State should live as low as possible and be hoisted only as high as needed. Don't put everything in a ViewModel just because you can.
Side effects exist to bridge Compose's declarative world with imperative APIs. Use the right one for the job — misusing them causes bugs that are hard to trace.

Source Code Receipts

Beyond the guidance docs, this skill bundles the actual source code from androidx/androidx (branch: androidx-main). When you need to verify how something works internally, or the user asks "show me the actual implementation", read the raw source from references/source-code/:

Module	Source Reference	Key Files Inside
Runtime	`references/source-code/runtime-source.md`	Composer.kt, Recomposer.kt, State.kt, Effects.kt, CompositionLocal.kt, Remember.kt, SlotTable.kt, Snapshot.kt
UI	`references/source-code/ui-source.md`	AndroidCompositionLocals.android.kt, Modifier.kt, Layout.kt, LayoutNode.kt, ModifierNodeElement.kt, DrawModifier.kt
Foundation	`references/source-code/foundation-source.md`	LazyList.kt, LazyGrid.kt, BasicTextField.kt, Clickable.kt, Scrollable.kt, Pager.kt
Material3	`references/source-code/material3-source.md`	MaterialTheme.kt, ColorScheme.kt, Button.kt, Scaffold.kt, TextField.kt, NavigationBar.kt
Navigation	`references/source-code/navigation-source.md`	NavHost.kt, ComposeNavigator.kt, NavGraphBuilder.kt, DialogNavigator.kt

Two-layer approach

Start with guidance — read the topic-specific reference (e.g., references/state-management.md)
Go deeper with source — if the user wants receipts or you need to verify, read from references/source-code/

Source tree map

compose/
├── runtime/runtime/src/commonMain/kotlin/androidx/compose/runtime/
├── ui/ui/src/androidMain/kotlin/androidx/compose/ui/platform/
├── ui/ui/src/commonMain/kotlin/androidx/compose/ui/
├── foundation/foundation/src/commonMain/kotlin/androidx/compose/foundation/
├── material3/material3/src/commonMain/kotlin/androidx/compose/material3/
└── navigation/navigation-compose/src/commonMain/kotlin/androidx/navigation/compose/

Files

SKILL.md and 18 other files (references) in .github/skills of darriousliu/PiPixiv.

SKILL.md
references/accessibility.md
references/animation.md
references/composition-locals.md
references/deprecated-patterns.md
references/lists-scrolling.md
references/modifiers.md
references/navigation.md
references/performance.md
references/side-effects.md
references/source-code/foundation-source.md
references/source-code/material3-source.md
references/source-code/navigation-source.md
references/source-code/runtime-source.md
references/source-code/ui-source.md
references/state-management.md
references/styles-experimental.md
references/theming-material3.md
references/view-composition.md

Open the folder on GitHubat commit 0605fba

Compare with similar skills

Jetpack Compose 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.

Jetpack Compose compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Jetpack Compose this skilldarriousliu/PiPixiv	262	—	~1.5k	Automated safety check: Pass	Apache-2.0	yesterday
Ksafeioannisa/KSafe	332	—	~17k	Automated safety check: Pass	Apache-2.0	5 days ago
Xcodebuildmcp CLIc5inco/compose-pokedexer	143	—	~415	Automated safety check: Pass	MIT	5 days ago
KtormonitorCosminMihuMDC/KtorMonitor	254	—	~2.5k	Automated safety check: Pass	Apache-2.0	25 days ago
Composewebview Developmentparkwoocheol/compose-webview	103	—	~1.3k	Automated safety check: Pass	MIT	1 mo ago
Jetpack Compose and Multiplatform Expertrcosteira79/android-skills	151	—	~2.6k	Automated safety check: Pass	MIT	19 days ago

Similar skills

Ksafe
ioannisa/KSafe
Required before any reply that touches KSafe (by ksafe(...), ksafe.get/put, :ksafe-compose, :ksafe-biometrics), even a 'can KSafe do X?' question or a one-line change that looks like plain Kotlin.
332 GitHub stars~17k tokensUpdated 5 days ago
MobileAuto-check passed
Xcodebuildmcp CLI
c5inco/compose-pokedexer
Official skill for the XcodeBuildMCP CLI. An agent skill from c5inco/compose-pokedexer.
143 GitHub stars~415 tokensUpdated 5 days ago
MobileAuto-check passed
Ktormonitor
CosminMihuMDC/KtorMonitor
KtorMonitor is a Kotlin Multiplatform library for real-time HTTP traffic monitoring.
254 GitHub stars~2.5k tokensUpdated 25 days ago
MobileAuto-check passed
Composewebview Development
parkwoocheol/compose-webview
Builds, tests, and formats ComposeWebView multiplatform library.
103 GitHub stars~1.3k tokensUpdated 1 mo ago
MobileAuto-check passed
Jetpack Compose and Multiplatform Expert
rcosteira79/android-skills
Guides writing correct, performant Compose and Compose Multiplatform UI across Android, desktop, iOS and web, from state and animation to design-to-code and crash fixes.
151 GitHub stars~2.6k tokensUpdated 19 days ago
MobileAuto-check passed
Eas Simulator
expo/skills
Official
Run and control a user's app on a remote iOS/Android simulator hosted on EAS cloud.
2.7k GitHub stars~6.6k tokensUpdated yesterday
MobileAuto-check: notes

Works with

Questions about Jetpack Compose

What does Jetpack Compose do?

Jetpack Compose expert skill for Android UI development. An agent skill from darriousliu/PiPixiv. Jetpack Compose is an agent skill from darriousliu/PiPixiv. Jetpack Compose expert skill for Android UI development.

When should I use Jetpack Compose?

Jetpack Compose fits situations like: the user mentions Compose; mutableStyleState; any Jetpack Compose API; the user says Android UI.

How do I install Jetpack Compose in Claude Code?

Run `npx skills add darriousliu/PiPixiv --skill jetpack-compose -a claude-code`. Or copy the skill folder (.github/skills in darriousliu/PiPixiv) into .claude/skills/jetpack-compose in your project. Claude Code loads it when a task matches its description.

How do I install Jetpack Compose in Codex?

Run `npx skills add darriousliu/PiPixiv --skill jetpack-compose -a codex`. Or copy the skill folder (.github/skills in darriousliu/PiPixiv) into .agents/skills/jetpack-compose in your project. Codex loads it when a task matches its description.

Can I use Jetpack Compose 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 darriousliu/PiPixiv --skill jetpack-compose -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/jetpack-compose, .gemini/skills/jetpack-compose, .github/skills/jetpack-compose and .opencode/skills/jetpack-compose in your project.

What does Jetpack Compose need to run?

SKILL.md names no scripts, command-line tools or credentials: Jetpack Compose is instructions for the agent only.

Does Jetpack Compose 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 Jetpack Compose 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 Jetpack Compose use?

Jetpack Compose is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Jetpack Compose use?

About 1.5k tokens (SKILL.md is roughly 6.2k 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 617k tokens, read only when the agent opens those files.

What are the alternatives to Jetpack Compose?

Skills that share tags, products or a category with Jetpack Compose: Ksafe (ioannisa/KSafe, 332 stars), Xcodebuildmcp CLI (c5inco/compose-pokedexer, 143 stars), Ktormonitor (CosminMihuMDC/KtorMonitor, 254 stars) and Composewebview Development (parkwoocheol/compose-webview, 103 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Jetpack Compose?

darriousliu (a GitHub user) maintains it in darriousliu/PiPixiv, which has 262 GitHub stars. The repository was last updated on October 7, 2026.

Source: darriousliu/PiPixiv on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Install Jetpack Compose

Facts

At a glance

What it does

When your agent uses it

Example prompts

Workflow steps

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

Jetpack Compose Expert Skill

Workflow

1. Understand the request

2. Consult the right reference

3. Apply and verify

4. Cite the source

Key Principles

Source Code Receipts

Two-layer approach

Source tree map

Files

Compare with similar skills

Similar skills

Ksafe

Xcodebuildmcp CLI

Ktormonitor

Composewebview Development

Jetpack Compose and Multiplatform Expert

Eas Simulator

Related

Questions about Jetpack Compose