using-design-system

# Using Design System Use X-components from `:core:designsystem` instead of Material3 in feature modules. **Architecture Reference:** @../_shared/patterns.md ## Design-Aware Mode If a Stitch design blueprint exists (`.claude/docs/{featurename}/designs/{featurename}_blueprint.md` with `blueprintConsumed == false` in `stitch-project.json.features[featurename]`), implementation skills auto-detect it and use the blueprint's component tree for UI implementation. This skill provides component mappings for existing code. ## Core Rule **X-components ONLY in features. NO Material3 components.** ## Common Replacements | Material3 | X-component | |-----------|-------------| | `Button` | `XButton` (7 variants) | | `TextField` | `XTextField` | | `Text` | `XText` | | `Scaffold` (feature screen) | `XScreen` (Rule 13 — `XScaffold` is app-shell only) | | `CircularProgressIndicator` | `XCircularProgressIndicator` | | `coil3.compose.AsyncImage` | `{CORE_DESIGNSYSTEM_PKG}.AsyncImage` | Full mappings: @references/component-mappings.md Usage examples: @references/usage-examples.md ## Key Rules 1. **Imports**: `import {CORE_DESIGNSYSTEM_PKG}.*` (avoid Material3 in features) 2. **4-State UI**: Uninitialized → Loading → Success → Failed (mandatory) 3. **Theme**: Never wrap screens in `XTheme` (app-level only). Feature screens use `XScreen` (Rule 13) — never a `Scaffold`/`XScaffold`, which would nest a second Scaffold and double the insets 4. **Navigation**: Use `XNavHost` (pre-configured a...