# Compose Ui

> >-

- **Type:** Skill
- **Install:** `agentstack add skill-liuyi0808-android-review-compose-ui`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [liuyi0808](https://agentstack.voostack.com/s/liuyi0808)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [liuyi0808](https://github.com/liuyi0808)
- **Source:** https://github.com/liuyi0808/android-review/tree/main/skills/compose-ui

## Install

```sh
agentstack add skill-liuyi0808-android-review-compose-ui
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Compose UI Best Practices

Provide guidance and review for Jetpack Compose UI code following Material 3
design patterns and modern Android conventions.

## Review Process

Evaluate Compose code against ALL categories. Output findings as:

```
[COMPOSE-XXXXX] severity: CRITICAL | HIGH | MEDIUM | LOW
  Finding: 
  Location: 
  Fix: 
```

---

## Reference Guide — Load on Demand

Each reference file contains full code examples and patterns. **Read the relevant file when reviewing that area.**

| # | Reference File | Content | When to Load |
|---|---------------|---------|-------------|
| 1 | [references/state-and-effects.md](references/state-and-effects.md) | State hoisting, rememberSaveable, collectAsStateWithLifecycle, LaunchedEffect, DisposableEffect, SideEffect | Reviewing state management or side effects |
| 2 | [references/navigation.md](references/navigation.md) | Type-safe navigation, back stack, navigation events | Reviewing navigation setup |
| 3 | [references/theming.md](references/theming.md) | Material 3 tokens, dynamic colors, custom extensions | Reviewing theme or color usage |
| 4 | [references/accessibility.md](references/accessibility.md) | Content descriptions, touch targets, semantics merging | Reviewing accessibility compliance |
| 5 | [references/layout-and-animation.md](references/layout-and-animation.md) | WindowSizeClass, responsive layout, AnimatedVisibility, animateXAsState | Reviewing layout or animation code |

---

## Rules Summary

### State Management
1. State ownership: state hoisted to the lowest common ancestor.
2. Use `rememberSaveable` for state that survives configuration changes.
3. Complex state belongs in ViewModel, exposed as `StateFlow`. See architecture skill for ViewModel implementation patterns.
4. ALWAYS use `collectAsStateWithLifecycle()` (NOT `collectAsState()`).
5. Use sealed interface for UI state.

### Side Effects
1. `LaunchedEffect` for coroutine-based side effects.
2. `DisposableEffect` for cleanup-requiring side effects.
3. `SideEffect` for non-suspend side effects on every successful recomposition.
4. `rememberCoroutineScope` for event-triggered coroutines.
5. NEVER launch coroutines directly in Composable body.

### Navigation
1. Use type-safe navigation (Navigation Compose 2.8+).
2. Navigate with `popUpTo` to avoid back stack buildup.
3. NEVER pass complex objects as navigation arguments. Pass IDs, fetch in destination.
4. One-time navigation events via Channel/SharedFlow. See architecture skill for event channel pattern.

### Theming & Material 3
1. Use Material 3 tokens, NEVER hardcoded colors.
2. Support dynamic colors (Android 12+).
3. Define custom theme extensions via `CompositionLocal`.
4. Use `MaterialTheme.typography` for text styles, NEVER hardcoded sizes.

### Accessibility
1. ALL interactive elements MUST have content descriptions.
2. Decorative elements use `null` contentDescription.
3. Minimum touch target: 48dp x 48dp.
4. Merge semantics for grouped content.
5. Use `Modifier.clearAndSetSemantics` for custom announcements.
6. State descriptions for toggles.

### Responsive Layout
1. Use `WindowSizeClass` for adaptive layouts.
2. Use `Modifier.fillMaxWidth()` with constraints, not fixed widths.
3. Use `BoxWithConstraints` for constraint-dependent layouts.

### Animation
1. Use `animateXAsState` for simple value animations.
2. Use `AnimatedVisibility` for enter/exit.
3. Use `AnimatedContent` for content transitions.
4. ALWAYS provide `label` parameter for animations.
5. Use `Modifier.graphicsLayer` for GPU-accelerated transforms.

---

## Checklists

### State Management
- [ ] UI state exposed as StateFlow from ViewModel
- [ ] collectAsStateWithLifecycle used (not collectAsState)
- [ ] Composable parameters are stable/immutable
- [ ] State hoisted to appropriate level
- [ ] rememberSaveable for user input that survives rotation
- [ ] Sealed interface for screen state

### Side Effects
- [ ] No coroutine launches outside side effect handlers
- [ ] LaunchedEffect keys match the data they depend on
- [ ] DisposableEffect used when cleanup is needed
- [ ] rememberCoroutineScope for user-triggered actions

### Navigation
- [ ] Type-safe navigation routes (Serializable objects)
- [ ] No complex objects passed as arguments
- [ ] Back stack managed properly (popUpTo where needed)
- [ ] One-time events use Channel, not StateFlow

### Theming & Material 3
- [ ] No hardcoded colors (use colorScheme tokens)
- [ ] No hardcoded text sizes (use typography tokens)
- [ ] Dark theme supported
- [ ] Dynamic colors supported (Android 12+)
- [ ] Custom tokens use CompositionLocal

### Accessibility
- [ ] All clickable elements have contentDescription
- [ ] Touch targets >= 48dp
- [ ] Semantics merged for logical groups
- [ ] Screen reader tested (TalkBack)
- [ ] Sufficient color contrast (4.5:1 for text)

### Animation
- [ ] Animations use appropriate API (animateXAsState, AnimatedVisibility, etc.)
- [ ] All animations have label parameter
- [ ] No infinite animations without user control
- [ ] Animations respect `prefers-reduced-motion` accessibility setting
- [ ] Complex animations use `Transition` for coordination

---

## Component Design Principles

### Composable Function Signature Convention

```kotlin
@Composable
fun MyComponent(
    // 1. Required data parameters
    title: String,
    items: ImmutableList,
    // 2. Optional data parameters with defaults
    subtitle: String = "",
    // 3. Event callbacks
    onClick: () -> Unit,
    onItemSelected: (Item) -> Unit,
    // 4. Modifier (always last with default)
    modifier: Modifier = Modifier
) {
    // Implementation
}
```

### Preview

```kotlin
@Preview(showBackground = true)
@Preview(showBackground = true, uiMode = UI_MODE_NIGHT_YES)
@Preview(showBackground = true, device = Devices.TABLET)
@Composable
private fun MyComponentPreview() {
    AppTheme {
        MyComponent(
            title = "Preview Title",
            items = persistentListOf(Item("1", "Sample")),
            onClick = {},
            onItemSelected = {}
        )
    }
}
```

### Component Checklist
- [ ] Modifier is last parameter with default
- [ ] Previews for light/dark/tablet
- [ ] Stateless where possible (state hoisted)
- [ ] Parameters are stable types

---

*For ViewModel implementation patterns, see the `architecture` skill. For performance optimization of Compose recomposition, see the `performance` skill.*

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [liuyi0808](https://github.com/liuyi0808)
- **Source:** [liuyi0808/android-review](https://github.com/liuyi0808/android-review)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-liuyi0808-android-review-compose-ui
- Seller: https://agentstack.voostack.com/s/liuyi0808
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.