home / skills / pluginagentmarketplace / custom-plugin-android / ui

ui skill

safe

This skill helps you design Android interfaces with ConstraintLayout, Jetpack Compose, and Material Design 3, optimizing layouts, themes, and accessibility.

npx playbooks add skill pluginagentmarketplace/custom-plugin-android --skill ui

Review the files below or copy the command above to add this skill to your agents.

Files (8)

SKILL.md

2.2 KB

---
name: ui
description: XML layouts, ConstraintLayout, Jetpack Compose, Material Design 3.
version: "2.0.0"
sasmp_version: "1.3.0"

# Agent Binding
bonded_agent: 03-ui-development
bond_type: PRIMARY_BOND

# Skill Configuration
atomic: true
single_responsibility: UI design & implementation

# Parameter Validation
parameters:
  paradigm:
    type: string
    enum: [xml, compose, both]
    default: compose
  design_system:
    type: string
    enum: [material2, material3]
    default: material3

# Retry Configuration
retry:
  max_attempts: 2
  backoff: exponential
  on_failure: return_basic_layout

# Observability
logging:
  level: info
  include: [query, ui_type, accessibility_check]
---

# UI Design Skill

## Quick Start

### ConstraintLayout
```xml
<androidx.constraintlayout.widget.ConstraintLayout>
    <Button
        android:id="@+id/btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
```

### Jetpack Compose
```kotlin
Column(modifier = Modifier.fillMaxSize().padding(16.dp)) {
    Text("Hello Compose", fontSize = 20.sp)
    Button(onClick = { }) { Text("Click Me") }
}
```

### Material Design 3
```kotlin
Scaffold(
    topBar = { TopAppBar(title = { Text("MyApp") }) }
) { padding ->
    // Content
}
```

## Key Concepts

### Constraint Types
- Start/End, Top/Bottom
- Chains (spread, packed)
- Guidelines
- Barriers
- Bias

### Compose State
```kotlin
var count by remember { mutableStateOf(0) }
Button(onClick = { count++ }) { Text("Count: $count") }
```

### Material Components
- Buttons (filled, outlined, text)
- Cards, FABs, Dialogs
- Navigation patterns
- Theme system

## Best Practices

✅ Use ConstraintLayout for efficiency
✅ Implement Material Design
✅ Test on multiple screen sizes
✅ Optimize rendering performance
✅ Support accessibility

## Resources

- [ConstraintLayout Guide](https://developer.android.com/training/constraint-layout)
- [Compose Documentation](https://developer.android.com/develop/ui/compose)
- [Material Design 3](https://m3.material.io/)

Overview

This skill helps Android developers design and implement modern user interfaces using XML layouts, ConstraintLayout, Jetpack Compose, and Material Design 3. It provides practical patterns, code snippets, and recommendations to build responsive, accessible, and performant UIs. The focus is on concrete guidance for layout constraints, compose state, and Material theming.

How this skill works

It inspects UI requirements and suggests appropriate primitives: ConstraintLayout chains, guidelines, and barriers for XML layouts, or composables and state holders for Jetpack Compose. It recommends Material Design 3 components and scaffold patterns, points out accessibility and performance considerations, and supplies example code snippets for quick integration. It also suggests testing and adaptation strategies for different screen sizes and form factors.

When to use it

Building complex responsive layouts with multiple constraints
Migrating parts of an XML app to Jetpack Compose
Applying Material Design 3 theming and components across an app
Optimizing rendering performance and accessibility
Prototyping UI flows and navigation patterns

Best practices

Prefer ConstraintLayout in XML for complex relative positioning and performance
Use remember and mutableStateOf for local Compose state; lift state when shared
Adopt Material Design 3 components and follow theming tokens for consistency
Test layouts on multiple screen sizes, orientations, and accessibility settings
Minimize overdraw and expensive recompositions; profile with Layout Inspector and Compose tooling

Example use cases

Centering and constraining a button within a dynamic layout using ConstraintLayout
Creating a Compose screen with Scaffold, TopAppBar, and content padding handling
Implementing a counter or form with Compose state and stable recomposition
Replacing nested LinearLayouts with ConstraintLayout chains to reduce depth
Applying Material 3 color schemes and component variants across light/dark themes

FAQ

When should I prefer ConstraintLayout over Compose?

Use ConstraintLayout when working in XML-based screens that require complex relative positioning or when migrating incrementally; choose Compose for new UIs or when you want declarative state-driven rendering.

How do I manage state in Compose for large screens or navigation flows?

Lift state to a common ViewModel or a state holder scoped to the navigation destination, expose immutable state to composables, and use rememberSaveable for process death restoration.