Compose Component Design
Communitychrisbanes
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.
Overview
- Repository
- chrisbanes/skills
- Publisher
- chrisbanes
- Stars
- 1.2K
- Forks
- 58
- Bundled files
- 2
- License
- Apache-2.0
- Updated
- Nov 14, 2026
Installation
tmp=$(mktemp -d)
git clone --depth 1 https://github.com/chrisbanes/skills.git "$tmp"
mkdir -p ~/.claude/skills
cp -R "$tmp/skills/compose-component-design" ~/.claude/skills/compose-component-design
rm -rf "$tmp"tmp=$(mktemp -d)
git clone --depth 1 https://github.com/chrisbanes/skills.git "$tmp"
mkdir -p ~/.codex/skills
cp -R "$tmp/skills/compose-component-design" ~/.codex/skills/compose-component-design
rm -rf "$tmp"Install the Compose Component Design agent skill from https://github.com/chrisbanes/skills/tree/main/skills/compose-component-design into this project's skills folder.Instructions
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
- State the requested API concern and keep the edit within it. A focused slot review does not authorize unrelated modifier, naming, or cleanup changes.
- 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.
- 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. With conditional roots, apply it to every branch root rather than merging branches into one wrapper.
- 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.
- Keep simple conditional structure inline; extract only a coherent reusable contract.
- Read the relevant focused reference below before editing public signatures.
- 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
| Signal | Read |
|---|---|
| Modifier parameter, root layout placement, modifier ordering, or conditional layout wrappers | Modifier and layout |
| Caller-controlled variable visual regions, optional content, primitive content parameters, or Boolean shape flags | Slot APIs |
| Animation belongs to the public component contract | Compose animations |
| State ownership changes while designing the component | Compose state and effects |
| Semantics or screenshot coverage is needed | Compose UI testing patterns |
Bundled files
FAQ
What does Compose Component Design do?
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.
Who made Compose Component Design?
chrisbanes (a community member) publishes it in the chrisbanes/skills repository on GitHub.
Is Compose Component Design free?
Yes. Compose Component Design is open source, published by chrisbanes under the Apache-2.0 license.
What comes with Compose Component Design?
Its instructions and 2 files the agent reads only when a task needs them, such as references, examples or scripts.
Which agents can use Compose Component Design?
Any coding agent that reads SKILL.md files, including Claude Code, Codex, Cursor, GitHub Copilot and Gemini CLI. The agent loads the skill when a task matches its description.
What are agent skills?
An agent skill is a folder with a SKILL.md file: instructions that teach a coding agent how to do one kind of task, and optionally files it can read while it works. The agent keeps only the skill's name and description in mind and reads the rest when a task calls for it.
How are agent skills different from MCP servers?
An MCP server gives an agent new tools to call, code that runs somewhere and returns results. A skill gives it knowledge: how to approach a task with the tools it already has. Many agents use both.
How can my agent test my Android app?
Robomori lets coding agents create, start and control Android emulators and devices from one command, so they can install your app, take screenshots and check dark mode, font sizes and languages.
Instructions to make or update an app's UI so that it adapts to different Android devices including phones, tablets, foldables, laptops, desktop, TV, Auto, and XR. It includes how to handle different window sizes, pointing devices (such as mouse) and text entry devices (such as keyboard) using the Compose MediaQuery API, and how to preserve UI, navigation, scroll, and media playback state across configuration changes (such as folding/unfolding a foldable, rotating a device, or resizing a window). It also covers multi-pane layouts using Navigation3 Scenes, adaptive UI components (such as buttons) with varying target sizes, and adaptive layouts (including navigation areas - nav rails and nav bars) using the Compose Grid and FlexBox APIs. It also covers desktop experiences with keyboard shortcuts, tooltips and custom cursors.
Use this skill to migrate your Jetpack Compose app to add adaptive edge-to-edge support and troubleshoot common issues. Use this skill to fix UI components (like buttons or lists) that are obscured by or overlapping with the navigation bar or status bar, fix IME insets, and fix system bar legibility.
Adds inking and freehand drawing capabilities to an Android app using Jetpack Ink (androidx.ink) and Compose. Use this skill when implementing stylus or touch drawing surfaces, rendering wet and dry ink strokes, configuring stock brushes (pressure pen, marker, highlighter), implementing geometry-based erasing, linear undo and redo history, or stroke persistence with Room. Delivers working Compose and ViewModel implementations. Don't use for View-based (XML) inking or programmatic custom BrushFamily creation. For custom BrushFamily creation, custom tip shapes, or behavior node graphs, suggest the ink-custom-brush-builder skill.
Creates custom BrushFamily definitions for an Android app using Jetpack Ink (androidx.ink 1.1.0-alpha03 and higher). Use this skill when configuring custom BrushTip shapes, adding pressure, tilt, speed, or noise sensitivity using BrushBehavior node graphs, creating multi-coat layered brushes, applying tiling or particle stamping textures, configuring SlidingWindowModel input smoothing, or serializing brushes. Delivers complete Kotlin BrushFamily, BrushCoat, BrushTip, BrushPaint, and BrushBehavior implementations. Don't use for View-based (XML) inking, Compose drawing surface setup, or stock brush selection. For Compose drawing surface setup, InProgressStrokes wet and dry rendering, eraser, or persistence, suggest the ink-app-builder skill.
