AgentSkillsCN

new-screen

以ViewModel和UI状态为基础，快速搭建全新的Compose Multiplatform界面。只需传入功能或屏幕名称作为参数，即可轻松完成新界面的开发。

SKILL.md
--- frontmatter
name: new-screen
description: Scaffold a new Compose Multiplatform screen with ViewModel and UI state. Provide the feature/screen name as an argument.
allowed-tools: Bash, Read, Write, Glob, Grep
user-invocable: true

Create a new Compose Multiplatform screen for: $ARGUMENTS

Steps:

  1. •

    Read composeApp/src/commonMain/kotlin/io/ak1/docubox/App.kt to understand existing patterns and imports.

  2. •

    Create the screen Composable at composeApp/src/commonMain/kotlin/io/ak1/docubox/ui/screens/${ARGUMENTS}Screen.kt:

    • •Use @Composable function named ${ARGUMENTS}Screen
    • •Accept state and event callbacks as parameters (unidirectional data flow)
    • •Use only Compose Multiplatform APIs (no Android-specific imports)
    • •Use Material3 components
  3. •

    Create the UI state at composeApp/src/commonMain/kotlin/io/ak1/docubox/ui/screens/${ARGUMENTS}State.kt:

    • •Data class for UI state
    • •Sealed interface for UI events
  4. •

    Create the ViewModel at composeApp/src/commonMain/kotlin/io/ak1/docubox/ui/screens/${ARGUMENTS}ViewModel.kt:

    • •Use StateFlow for state management
    • •Expose an immutable state and an event handler function
  5. •

    After creating files, verify the project compiles:

    code
    ./gradlew :composeApp:assembleDebug