Kotlin Composable Preview Generator

Kotlin Composable Preview Generator

Skill for generating production-quality @Preview functions for Jetpack Compose UI components.

When to Use

• Adding previews to new Composable functions
• Enhancing existing previews with more state coverage
• Creating previews for components with sealed class states
• Generating multi-configuration previews (light/​dark, device sizes)

Preview Categories

1. Simple Preview - Basic single-state preview
2. Multi-State Preview - Separate @Preview for each state (sealed class, enum)
3. Variant Preview - Column/​Row showing all variants in one preview
4. Interactive Preview - Using PreviewParameter for data-driven previews
5. Configuration Preview - Device, font scale, UI mode configurations

Generation Workflow

1. Analyze Composable signature

   • Extract parameters (required/​optional)
   • Identify state classes (data class, sealed class, enum)
   • Find callback parameters (lambdas)

2. Identify preview requirements

   • Check for HazeState dependency → needs hazeSource setup
   • Check for modifier patterns → use appropriate sizing
   • Check for sealed class states → generate preview for each subtype

3. Generate previews

   • Follow naming: {ComposableName}Preview, {ComposableName}{State}Preview
   • Use private modifier for preview functions
   • Add dark background wrapper when needed
   • Provide realistic sample data

Preview Patterns Reference

See references/​preview-patterns.md for detailed examples.

Output Guidelines

Quality Checklist

• All sealed class/​enum states have dedicated previews
• Required parameters have realistic sample values
• Preview renders correctly in Android Studio
• Dark backgrounds used for dark-themed components
• HazeState properly configured when needed
• Proper imports added