Compose Agent Skill

An agent skill to help you write smarter, simpler, and more modern Jetpack Compose code, including guidance on API usage, design, performance, and accessibility.

The skill brings years of knowledge and practical experience into your coding agent of choice in just a few minutes. It uses the Agent Skills format, so it will work smoothly with Claude Code, Codex, Gemini, Cursor, and more.

---

Installing this skill

You can install this skill into Claude, Codex, Gemini, Cursor, and more by using npx:

npx skills add https://github.com/BreakZero/Compose-Agent-Skill --skill compose-pro

If you get the error npx: command not found, it means you don't currently have Node installed. You need to run this command to install Node:

# macOS
brew install node

# Windows
choco install nodejs

# Linux (Ubuntu/Debian)
sudo apt install nodejs npm

When using npx, you can select exactly which agents you want to use during the installation. You can also select whether the skill should be installed just for one project, or whether it should be made available for all your projects.

Alternatively, you can clone this whole repository and install it however you want.

---

Using this skill

The skill is called Compose Pro, and can be triggered in various ways. For example, in Claude Code you would use this:

/compose-pro

---

What this skill covers

API Best Practices (references/api.md)

• Material 3 vs Material 2 guidance
• Modern Modifier APIs
• State APIs (remember, rememberSaveable, collectAsStateWithLifecycle)
• Animation APIs
• Window Insets handling
• Deprecated patterns to avoid

Components (references/components.md)

• Composable structure and organization
• Slot APIs for reusable components
• Preview best practices
• Recomposition optimization
• Animation patterns
• Lazy lists optimization

State Management (references/state.md)

• ViewModel and state holder patterns
• StateFlow vs LiveData
• Remember APIs
• Derived state
• Snapshot state APIs
• State hoisting
• CompositionLocal usage

Navigation (references/navigation.md)

• Navigation Compose setup
• Type-safe navigation with Kotlin Serialization
• Deep links
• Bottom navigation
• Dialogs and bottom sheets
• Result handling

Design (references/design.md)

• Material 3 design system
• Color usage and theming
• Elevation and shadows
• Spacing and layout
• Shape system
• Responsive design
• Dark theme support

Accessibility (references/accessibility.md)

• TalkBack support
• Semantic properties
• Touch targets
• Font scaling
• Color contrast
• Reduce motion
• Keyboard navigation

Performance (references/performance.md)

• Recomposition optimization
• Stability annotations
• Lazy lists performance
• Modifier order
• Graphics performance
• Image loading
• State read optimization
• Baseline profiles

Kotlin (references/kotlin.md)

• Modern Kotlin features
• Null safety
• Coroutines and Flow
• Data classes
• Sealed classes
• Extension functions
• Scope functions
• Collection operations

Hygiene (references/hygiene.md)

• Project structure
• Naming conventions
• Documentation
• Secrets management
• Static analysis (Detekt, KtLint)
• Testing strategies
• CI/CD best practices

---

Project Structure

compose-pro/
├── SKILL.md                 # Main skill definition
├── agents/
│   └── openai.yaml         # Agent configuration
├── references/
│   ├── api.md              # API best practices
│   ├── components.md       # Component patterns
│   ├── state.md            # State management
│   ├── navigation.md       # Navigation patterns
│   ├── design.md           # Design guidelines
│   ├── accessibility.md    # Accessibility
│   ├── performance.md      # Performance optimization
│   ├── kotlin.md           # Kotlin best practices
│   └── hygiene.md          # Code hygiene
└── assets/                 # Icons and images

---

Acknowledgments

• Inspired by SwiftUI Agent Skill by Paul Hudson
• Thanks to the Jetpack Compose team at Google
• Thanks to the Android developer community