ui-design

pluginagentmarketplace's avatarfrom pluginagentmarketplace

XML layouts, ConstraintLayout, Jetpack Compose, Material Design 3. Use when building user interfaces and designing layouts.

⭐0stars🔀0forks📁View on GitHub🕐Updated Nov 19, 2025
[Code Generation]

When & Why to Use This Skill

This Claude skill is a specialized assistant for Android UI development, offering expert support for Jetpack Compose, XML layouts, and Material Design 3. It streamlines the process of building responsive and visually appealing mobile interfaces by providing optimized code for ConstraintLayout, state-driven UI components, and modern design systems. It is designed to help developers improve code quality, ensure accessibility, and accelerate the implementation of complex layouts.

Use Cases

  • Case 1: Creating complex, responsive Android layouts using ConstraintLayout to minimize view hierarchy depth and improve rendering performance.
  • Case 2: Developing modern, declarative user interfaces with Jetpack Compose, including efficient state management and recomposition optimization.
  • Case 3: Implementing Material Design 3 components and theming to ensure apps meet the latest visual and interactive standards on Android.
  • Case 4: Enhancing app accessibility and usability by following best practices for touch targets, screen readers, and multi-device support.
nameui
descriptionXML layouts, ConstraintLayout, Jetpack Compose, Material Design 3.
version"2.0.0"
sasmp_version"1.3.0"
bonded_agent03-ui-development
bond_typePRIMARY_BOND
atomictrue
single_responsibilityUI design & implementation
typestring
enum[material2, material3]
defaultmaterial3
max_attempts2
backoffexponential
on_failurereturn_basic_layout
levelinfo
include[query, ui_type, accessibility_check]

UI Design Skill

Quick Start

ConstraintLayout

<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

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

Material Design 3

Scaffold(
    topBar = { TopAppBar(title = { Text("MyApp") }) }
) { padding ->
    // Content
}

Key Concepts

Constraint Types

  • Start/End, Top/Bottom
  • Chains (spread, packed)
  • Guidelines
  • Barriers
  • Bias

Compose State

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