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 (in feature modules)
XScaffold {
    // Feature content - NO theme wrapper needed
}

// ❌ Wrong (in feature modules)
XTheme {  // XTheme is app-level only!
    XScaffold { }
}

// ❌ Wrong
MaterialTheme {
    Scaffold { }
}

Note: XTheme is applied at the App level (composeApp). Feature modules should NOT wrap their screens in XTheme.

Spec Cross-Reference

When spec exists at .claude/docs/{feature}/spec.md:

• Validates 4-state pattern matches spec's State Management section
• Ensures UI flows match spec's Navigation section

---

Back to Skills