This project was built entirely using the android-lead-agent-skills skill. Every pattern, architecture decision, animation, and design system choice in this codebase follows the guidance documented in that skill library. It serves as a living proof-of-concept for what the skill produces when applied end-to-end to a real Android project.
A beautiful news reader app demonstrating production-grade Android UI patterns: shared element transitions, Material 3 design system, skeleton loading, staggered animations, and Clean Architecture.
This sample is the direct output of applying android-lead-agent-skills — a comprehensive Android engineering skill library covering architecture, Jetpack Compose, animations, performance, security, and more.
Every file in this project traces back to a specific section of that skill:
| What you see in the app | Skill reference used |
|---|---|
| Shared element transitions (image + title) | shared-element-transitions.md |
| Material 3 teal theme + serif typography | compose-ui-system.md |
| Skeleton shimmer loading states | compose-ui-system.md |
| Spring + stagger animations | motion-and-animation.md |
| Type-safe navigation + SharedTransitionLayout | navigation.md |
| StateFlow + SharedFlow(replay=0) | architecture.md |
| Sealed UI state (Loading/Ready/Error) | architecture.md |
| Offline-first Flow repository | data-layer.md |
| Hilt DI graph + @HiltViewModel | architecture.md |
| Coil3 image loading + SubcomposeAsyncImage | image-loading.md |
| Edge-to-edge + WindowInsets | adaptive-layouts.md |
| Convention plugins + version catalog | build-and-modules.md |
| Canvas open-book illustration (Bookmarks) | compose-ui-system.md |
- Featured hero card with full-bleed image and gradient overlay
- 2-column article grid with staggered entry animations (60ms per item)
- Skeleton shimmer loading states mirroring exact content geometry
- Shared element transition: image and title flow from card to detail
- Back button fades in after transition completes (180ms delay)
- Full scrollable article body in serif font
- Category chip filtering with FlowRow
- Trending horizontal scroll
- Search bar
- Custom Canvas open-book illustration
- Empty state with call-to-action
| Pattern | Where |
|---|---|
sharedBounds() container transform |
FeaturedArticleCard |
sharedElement() image transition |
HomeScreen → DetailScreen |
sharedElement() text continuation |
Article title in list → heading in detail |
animateEnterExit for back button |
DetailScreen |
SharedTransitionLayout wrapping NavHost |
AppNavigation.kt |
StateFlow + SharedFlow |
HomeViewModel, DetailViewModel |
collectAsStateWithLifecycle() |
Both screens |
SavedStateHandle.toRoute() |
DetailViewModel |
stateIn(WhileSubscribed(5000)) |
DetailViewModel |
| Sealed UI state | HomeUiState, DetailUiState |
| Skeleton shimmer matching layout | HomeLoadingSkeleton, DetailLoadingSkeleton |
| Staggered list entry | HomeContent grid items |
| Material 3 dynamic color | LuminaryTheme |
| Edge-to-edge with proper insets | MainActivity, all screens |
| Library | Version | Purpose |
|---|---|---|
| AGP | 8.5.2 | Android Gradle Plugin |
| Gradle | 8.7 (pinned via wrapper) | Build system |
| Jetpack Compose | BOM 2024.09.00 | UI |
| Navigation Compose | 2.8.4 | Type-safe navigation |
| Hilt | 2.52 | Dependency injection |
| Coil3 | 3.0.4 | Image loading |
| Lifecycle | 2.8.7 | collectAsStateWithLifecycle |
| kotlinx.serialization | 1.7.3 | Navigation route serialization |
| KSP | 2.0.21-1.0.25 | Kotlin Symbol Processing (Hilt) |
- Clone:
git clone https://github.com/ayush016/luminary-android - Open in Android Studio Ladybug (2024.2.1) or newer
- Let Android Studio download Gradle 8.7 via the wrapper (first sync only)
- Run on a device or emulator with API 26+ (Android 8.0+)
- Images load from
picsum.photos— internet connection required
No API keys or configuration needed.
app/src/main/kotlin/com/example/luminary/
├── data/
│ ├── model/Article.kt — data class
│ └── repository/ArticleRepository.kt — @Singleton, Flow-based
├── feature/
│ ├── home/ — HomeScreen, HomeViewModel, HomeUiState
│ ├── detail/ — DetailScreen, DetailViewModel
│ ├── discover/ — DiscoverScreen
│ └── bookmarks/— BookmarksScreen
├── navigation/
│ ├── Routes.kt — @Serializable route objects
│ └── AppNavigation.kt — NavHost wrapped in SharedTransitionLayout
├── ui/
│ ├── theme/ — Color, Type, LuminaryTheme
│ └── component/— ShimmerBox, CategoryChip
├── LuminaryApp.kt — @HiltAndroidApp + Coil singleton
└── MainActivity.kt — enableEdgeToEdge() entry point