Adapts Jetpack Compose UIs to phones, tablets, foldables, desktops, TVs, and XR devices.
npx skills add https://github.com/IsKenKenYa/skills --skill adaptive-iskenkenya
Please help me install this Agent Skill. Skill: adaptive Source: https://github.com/IsKenKenYa/skills/tree/main/skills/android/jetpack-compose/adaptive Command: npx skills add https://github.com/IsKenKenYa/skills --skill adaptive-iskenkenya
NavigationSuiteScaffold layouts that switch between nav bars and nav rails, with scroll-aware visibility control. - Multi-Pane Layouts: Implements list-detail and supporting-pane layouts using Navigation 3 SceneStrategy APIs (ListDetailSceneStrategy, SupportingPaneSceneStrategy). - Adaptive Lists and Grids: Migrates LazyColumn to LazyVerticalGrid with adaptive column counts, and replaces fixed Column layouts with the experimental Grid and FlexBox APIs. - Use Case: You have a Compose app designed for phones and want it to show a two-pane list-detail layout on tablets and foldables while keeping single-pane navigation on phones. ## Quick Start Use the adaptive skill to make my Compose app's navigation and list-detail screens adapt to tablets and foldables.High-intent search queries and answers about installing and using this skill.
Follow a five-step workflow: verify UI with screenshot tests, replace the bottom navigation bar with NavigationSuiteScaffold, add multi-pane layouts using Navigation 3 SceneStrategy, convert vertical lists to adaptive grids, and hide app bars on scroll.
Add the androidx.compose.material3.adaptive:adaptive-navigation3 library, create a ListDetailSceneStrategy with rememberListDetailSceneStrategy, pass it to NavDisplay, and mark entries with listPane and detailPane metadata. Do not use ListDetailPaneScaffold.
No. The app must use Jetpack Compose for all screens and Jetpack Navigation 3. If the app still uses Fragments or Views, migrate those screens to Compose first using an XML-to-Compose migration approach.
LazyVerticalGrid is for large homogeneous data sets requiring lazy loading, while Grid is an experimental two-dimensional layout API for structural screen layouts with fixed item counts. Grid does not support lazy loading.
No. Grid, FlexBox, and MediaQuery are experimental APIs available from Compose 1.11.0-beta01 and are subject to change. You must opt in with annotations like @OptIn(ExperimentalGridApi::class) and confirm with users before adopting them.
Binh230199Migrate Android XML layouts and View-based screens to Jetpack Compose.
tvh25082004Adapts Android Compose UIs to phones, tablets, foldables, and desktops using Navigation 3 Scenes, Grid, FlexBox, and MediaQuery.
maxrave-devAnalyze Jetpack Compose code and profiling data to diagnose UI performance issues.
androidMigrate Jetpack Compose navigation and layouts to Navigation 3 adaptive multi-pane UIs.