Using Design System

Using Design System Skill

Auto-activates when: Working in feature/*/ui/ directories, creating Composables, mentions "UI", "screen", "component"

Design System Enforcement

Ensures X-components are used instead of Material3, preventing design drift.

Component Mappings

// ❌ Material3          // ✅ X-Components
Scaffold           →     XScaffold
Button             →     XButton
OutlinedButton     →     XOutlinedButton
TextButton         →     XTextButton
Text               →     XText
TextField          →     XTextField
OutlinedTextField  →     XOutlinedTextField
Card               →     XCard
Icon               →     XIcon
IconButton         →     XIconButton
Switch             →     XSwitch
Checkbox           →     XCheckbox
RadioButton        →     XRadioButton
Divider            →     XDivider
CircularProgressIndicator → XLoadingIndicator

Examples

Creating a Login Form

> Create a login form with email, password, and submit button

AI generates:

@Composable
fun LoginForm(
    email: String,
    password: String,
    onEmailChange: (String) -> Unit,
    onPasswordChange: (String) -> Unit,
    onSubmit: () -> Unit
) {
    Column {
        XTextField(
            value = email,
            onValueChange = onEmailChange,
            label = { XText("Email") }
        )

        XTextField(
            value = password,
            onValueChange = onPasswordChange,
            label = { XText("Password") },
            visualTransformation = PasswordVisualTransformation()
        )

        XButton(
            onClick = onSubmit,
            text = "Login"
        )
    }
}

Creating a Product Card

> Create a product card component with image, title, price, and add to cart button

AI generates using XCard, XText, XButton (not Material3 components)

Theme Usage

// ✅ Correct
XTheme {
    XScaffold { }
}

// ❌ Wrong
MaterialTheme {
    Scaffold { }
}

---

Back to Skills