New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Compose Component Design

by chrisbanes in chrisbanes/skills

A skill your agent uses when designing or reviewing reusable Jetpack Compose component APIs with modifier parameters, root layout placement, caller-provided variable content, primitive content…

Apache-2.0Auto-check passedMobile

Install Compose Component Design

skills CLI
$ npx skills add chrisbanes/skills --skill compose-component-design -a claude-code

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

GitHub CLI
$ gh skill install chrisbanes/skills compose-component-design --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/chrisbanes/skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/compose-component-design .claude/skills/compose-component-design && 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/

Facts

Skill name
compose-component-design
GitHub stars
1.1k
Used in
1 other repo
Token cost
~718 tokens
SKILL.md length
330 words
Files
3 (incl. references)
Skills in repo
19
Repo updated
First seen
Licence
Apache-2.0

At a glance

A skill your agent uses when designing or reviewing reusable Jetpack Compose component APIs with modifier parameters, root layout placement, caller-provided variable content, primitive content…

  • Works in 7 steps: State the requested API concern and keep… → State the component's invariant visual… → When root placement is part of the… → …
  • Reviewing reusable Jetpack Compose component APIs with modifier parameters
  • SKILL.md covers Core principle, Procedure and Topic router
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Compose Component Design is an agent skill from chrisbanes/skills. Use when designing or reviewing reusable Jetpack Compose component APIs with modifier parameters, root layout placement, caller-provided variable content, primitive content parameters, optional content, or boolean shape flags.

Its SKILL.md is about 720 tokens, which your agent loads only when the skill is triggered. The skill folder holds 3 other files, including reference files (for example `references/modifier-layout.md` and `references/slot-apis.md`).

It sits in Mobile, covering Android development. It works with Jetpack Compose. The repository describes itself as: Skills for Kotlin, Jetpack Compose, and Android development. The licence is Apache-2.0.

When your agent uses it

  • Reviewing reusable Jetpack Compose component APIs with modifier parameters
  • Root layout placement
  • Caller-provided variable content
  • Primitive content parameters

Example prompts

  • “/compose-component-design”

Workflow steps

7 steps, taken from the first numbered list in SKILL.md.

  1. State the requested API concern and keep the edit within it. A focused slot
  2. State the component's invariant visual structure and identify every varying
  3. When root placement is part of the requested work or a broad component API
  4. Represent caller-controlled, unconstrained visual regions with slots rather
  5. Keep simple conditional structure inline; extract only a coherent reusable
  6. Read the relevant focused reference below before editing public signatures.
  7. In a review, decide explicitly whether each requested variable visual region

What it can do on your machine

Read from SKILL.md and the folder at commit f872f97. 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 Component Design loads about 718 tokens when it runs, and up to ~2k if it reads all its reference files. Until then it costs about 63 tokens; SKILL.md has 330 words of instructions outside code blocks.

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

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 chrisbanes/skills at commit f872f97, republished under its Apache-2.0 licence (© chrisbanes). 330 words, ~718 tokens.

Download SKILL.mdSave it as .claude/skills/compose-component-design/SKILL.md (or your agent's skills folder). This skill also uses 2 other files; get the full folder from GitHub.
name
compose-component-design
description
Use when designing or reviewing reusable Jetpack Compose component APIs with modifier parameters, root layout placement, caller-provided variable content, primitive content parameters, optional content, or boolean shape flags.

Compose component design

Core principle

Make reusable components caller-placeable and caller-composable: the component owns its invariant structure while callers retain placement, content, and policy choices that vary by use.

Procedure

  1. State the requested API concern and keep the edit within it. A focused slot review does not authorize unrelated modifier, naming, or cleanup changes.
  2. State the component's invariant visual structure and identify every varying region, placement concern, and policy choice. In a broad API review, inventory all rendered regions, including hard-coded text or icons, before deciding which are fixed semantic content and which vary by caller. When the request names more than one concern, report each one; do not stop after the first valid modifier or slot finding.
  3. When root placement is part of the requested work or a broad component API design, accept and apply a caller modifier at the component root unless a concrete API boundary makes another placement correct.
  4. Represent caller-controlled, unconstrained visual regions with slots rather than proliferating primitive content parameters or Boolean shape flags. Keep semantic and design-system constraints as primitive parameters.
  5. Keep simple conditional structure inline; extract only a coherent reusable contract.
  6. Read the relevant focused reference below before editing public signatures.
  7. In a review, decide explicitly whether each requested variable visual region should remain a semantic primitive or become a caller slot; naming a content limitation alone does not make that API decision. Finish with no edit when the existing API already satisfies the requested concern. Otherwise finish when callers can position the component, supply variable content, and understand ownership without hidden switches.

Topic router

SignalRead
Modifier parameter, root layout placement, modifier ordering, or conditional layout wrappersModifier and layout
Caller-controlled variable visual regions, optional content, primitive content parameters, or Boolean shape flagsSlot APIs
Animation belongs to the public component contractCompose animations
State ownership changes while designing the componentCompose state and effects
Semantics or screenshot coverage is neededCompose UI testing patterns

© chrisbanes, Apache-2.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 2 other files (references) in skills/compose-component-design of chrisbanes/skills.

  • SKILL.md
  • references/modifier-layout.md
  • references/slot-apis.md

Open the folder on GitHubat commit f872f97

Used in 1 other repository

We found 1 copy of this SKILL.md (exact, near-identical or edited) in other folders, from 1 other GitHub owner. This page covers the copy in chrisbanes/skills, which our catalogue first saw on October 7, 2026.

Compare with similar skills

Compose Component Design 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.

Compose Component Design compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Compose Component Design this skillchrisbanes/skills1.1k1 repos~718Automated safety check: PassApache-2.0
Compose Multiplatform Patternsmonta-app/ocpp-emulator1805 repos~2kAutomated safety check: PassApache-2.0
Stylesarindamxd/camerax-android1324 repos~2.3kAutomated safety check: PassApache-2.0
Compose UIMoustachauve/WLED-Android1693 repos~676Automated safety check: PassApache-2.0
Edge To Edgearindamxd/camerax-android1325 repos~3.6kAutomated safety check: PassApache-2.0
Navigation3new-silvermoon/awesome-android-agent-skills972—~1.9kAutomated safety check: PassApache-2.0

Similar skills

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

    180 GitHub starsUsed in 5 repos~2k tokens
    MobileAuto-check passed

  • Styles

    arindamxd/camerax-android

    A skill your agent uses to integrate the Jetpack Compose Styles API into an Android project.

    132 GitHub starsUsed in 4 repos~2.3k tokens
    MobileAuto-check passed

  • Compose UI

    Moustachauve/WLED-Android

    Best practices for building UI with Jetpack Compose, focusing on state hoisting, detailed performance optimizations, and theming.

    169 GitHub starsUsed in 3 repos~676 tokens
    MobileAuto-check passed

  • Edge To Edge

    arindamxd/camerax-android

    A skill your agent uses to migrate your Jetpack Compose app to add adaptive edge-to-edge support and troubleshoot common issues.

    132 GitHub starsUsed in 5 repos~3.6k tokens
    MobileAuto-check passed

  • Navigation3

    new-silvermoon/awesome-android-agent-skills

    Implement navigation in Jetpack Compose using Navigation 3. An agent skill from new-silvermoon/awesome-android-agent-skills.

    972 GitHub stars~1.9k tokensUpdated 2 mo ago
    MobileAuto-check passed

  • Coil Compose

    Moustachauve/WLED-Android

    Expert guidance on using Coil for image loading in Jetpack Compose.

    169 GitHub starsUsed in 2 repos~789 tokens
    MobileAuto-check passed

More from chrisbanes/skills

All 19 skills in this repo

  • Gradle Run

    chrisbanes/skills

    A skill your agent uses when planning to execute Gradle through gradle, ./gradlew, or a custom gradlew wrapper script, or diagnosing a Gradle build, compact workflow ledger, repeated failure…

    1.1k GitHub stars~1.2k tokensUpdated 4 days ago
    Auto-check passed

  • Compose Animations

    chrisbanes/skills

    A skill your agent uses when writing or reviewing Jetpack Compose motion: visibility enter/exit, animating one property toward a target, color or size transitions, multiple properties from one…

    1.1k GitHub stars~1.1k tokensUpdated 4 days ago
    Auto-check passed

  • Compose UI Testing Patterns

    chrisbanes/skills

    A skill your agent uses when writing or reviewing Jetpack Compose UI tests, screenshot tests or baseline-recording evidence, previews, semantics assertions, fake image loading, keyboard input, focus…

    1.1k GitHub stars~1.8k tokensUpdated 4 days ago
    Auto-check passed

  • Release Kotlin Library

    chrisbanes/skills

    A skill your agent uses when preparing, publishing, or checking readiness for a Kotlin library release, including verifying its gradle-maven-publish-plugin prerequisite, reconciling changelogs and…

    1.1k GitHub stars~1.9k tokensUpdated 4 days ago
    Auto-check: notes

  • Run GitHub Project

    chrisbanes/skills

    A skill your agent uses when asked to set up, review, or operate a repository's GitHub Project workflow, including ready claims, role-labelled human work, unknown remote mutation outcomes, Todo…

    1.1k GitHub stars~1.5k tokensUpdated 4 days ago
    Auto-check passed

  • Compose Focus Navigation

    chrisbanes/skills

    A skill your agent uses when writing or reviewing Jetpack Compose UI for TV, keyboard, desktop, accessibility focus, D-pad navigation, FocusRequester, focusProperties, key events, or initial focus…

    1.1k GitHub stars~994 tokensUpdated 4 days ago
    Auto-check passed

Works with

Categories

Questions about Compose Component Design

What does Compose Component Design do?

A skill your agent uses when designing or reviewing reusable Jetpack Compose component APIs with modifier parameters, root layout placement, caller-provided variable content, primitive content…. Compose Component Design is an agent skill from chrisbanes/skills. Use when designing or reviewing reusable Jetpack Compose component APIs with modifier parameters, root layout placement, caller-provided variable content, primitive content parameters, optional content, or boolean shape flags.

When should I use Compose Component Design?

Compose Component Design fits situations like: reviewing reusable Jetpack Compose component APIs with modifier parameters; root layout placement; caller-provided variable content; primitive content parameters.

How do I install Compose Component Design in Claude Code?

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

How do I install Compose Component Design in Codex?

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

Can I use Compose Component Design 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 chrisbanes/skills --skill compose-component-design -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-component-design, .gemini/skills/compose-component-design, .github/skills/compose-component-design and .opencode/skills/compose-component-design in your project.

What does Compose Component Design need to run?

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

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

Compose Component Design 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 Compose Component Design use?

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

What are the alternatives to Compose Component Design?

Skills that share tags, products or a category with Compose Component Design: Compose Multiplatform Patterns (monta-app/ocpp-emulator, 180 stars), Styles (arindamxd/camerax-android, 132 stars), Compose UI (Moustachauve/WLED-Android, 169 stars) and Edge To Edge (arindamxd/camerax-android, 132 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Compose Component Design?

chrisbanes (a GitHub user) maintains it in chrisbanes/skills, which has 1,092 GitHub stars. The repository holds 19 skills in this directory. The repository was last updated on October 4, 2026.

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