[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6JCRN2P58BXXJJK9XK86WDX":3,"skill-same:01M6JCRN2P58BXXJJK9XK86WDX":66},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":22,"publishedAt":38,"linkOnly":39,"markdownContent":40,"markdownBody":41,"frontMatter":42,"refName":44,"commitSha":45,"skillDirectory":46,"forksCount":47,"repositoryHtmlUrl":48,"repositoryHomepageUrl":49,"ownerHtmlUrl":50,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":51,"install":52,"resources":65},"01M6JCRN2P58BXXJJK9XK86WDX","compose-multiplatform-patterns",null,"Compose Multiplatform and Jetpack Compose patterns for KMP projects — state management, navigation, theming, performance, and platform-specific UI.","S3YED\u002Fappie-kit","S3YED","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F62743867?v=4","01M6JBKBRRVP6KMS0VWZ27T3R6","01M6JBKBX0KG30284PW1DBYJT1",14,"MIT","https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fecc\u002Fcompose-multiplatform-patterns\u002FSKILL.md",[17],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[23,24,25,26,27,28,29,30,31,32,33,34,35,36,37],"compose multiplatform patterns","compose","patterns","performance","state management","state","ui","projects","management","jetpack compose","navigation","jetpack","platform","theming","for","2026-11-10 10:12:30",false,"---\nname: compose-multiplatform-patterns\ndescription: Compose Multiplatform and Jetpack Compose patterns for KMP projects — state management, navigation, theming, performance, and platform-specific UI.\norigin: ECC\n---\n\n# Compose Multiplatform Patterns\n\nPatterns for building shared UI across Android, iOS, Desktop, and Web using Compose Multiplatform and Jetpack Compose. Covers state management, navigation, theming, and performance.\n\n## When to Activate\n\n- Building Compose UI (Jetpack Compose or Compose Multiplatform)\n- Managing UI state with ViewModels and Compose state\n- Implementing navigation in KMP or Android projects\n- Designing reusable composables and design systems\n- Optimizing recomposition and rendering performance\n\n## State Management\n\n### ViewModel + Single State Object\n\nUse a single data class for screen state. Expose it as `StateFlow` and collect in Compose:\n\n```kotlin\ndata class ItemListState(\n    val items: List\u003CItem> = emptyList(),\n    val isLoading: Boolean = false,\n    val error: String? = null,\n    val searchQuery: String = \"\"\n)\n\nclass ItemListViewModel(\n    private val getItems: GetItemsUseCase\n) : ViewModel() {\n    private val _state = MutableStateFlow(ItemListState())\n    val state: StateFlow\u003CItemListState> = _state.asStateFlow()\n\n    fun onSearch(query: String) {\n        _state.update { it.copy(searchQuery = query) }\n        loadItems(query)\n    }\n\n    private fun loadItems(query: String) {\n        viewModelScope.launch {\n            _state.update { it.copy(isLoading = true) }\n            getItems(query).fold(\n                onSuccess = { items -> _state.update { it.copy(items = items, isLoading = false) } },\n                onFailure = { e -> _state.update { it.copy(error = e.message, isLoading = false) } }\n            )\n        }\n    }\n}\n```\n\n### Collecting State in Compose\n\n```kotlin\n@Composable\nfun ItemListScreen(viewModel: ItemListViewModel = koinViewModel()) {\n    val state by viewModel.state.collectAsStateWithLifecycle()\n\n    ItemListContent(\n        state = state,\n        onSearch = viewModel::onSearch\n    )\n}\n\n@Composable\nprivate fun ItemListContent(\n    state: ItemListState,\n    onSearch: (String) -> Unit\n) {\n    \u002F\u002F Stateless composable — easy to preview and test\n}\n```\n\n### Event Sink Pattern\n\nFor complex screens, use a sealed interface for events instead of multiple callback lambdas:\n\n```kotlin\nsealed interface ItemListEvent {\n    data class Search(val query: String) : ItemListEvent\n    data class Delete(val itemId: String) : ItemListEvent\n    data object Refresh : ItemListEvent\n}\n\n\u002F\u002F In ViewModel\nfun onEvent(event: ItemListEvent) {\n    when (event) {\n        is ItemListEvent.Search -> onSearch(event.query)\n        is ItemListEvent.Delete -> deleteItem(event.itemId)\n        is ItemListEvent.Refresh -> loadItems(_state.value.searchQuery)\n    }\n}\n\n\u002F\u002F In Composable — single lambda instead of many\nItemListContent(\n    state = state,\n    onEvent = viewModel::onEvent\n)\n```\n\n## Navigation\n\n### Type-Safe Navigation (Compose Navigation 2.8+)\n\nDefine routes as `@Serializable` objects:\n\n```kotlin\n@Serializable data object HomeRoute\n@Serializable data class DetailRoute(val id: String)\n@Serializable data object SettingsRoute\n\n@Composable\nfun AppNavHost(navController: NavHostController = rememberNavController()) {\n    NavHost(navController, startDestination = HomeRoute) {\n        composable\u003CHomeRoute> {\n            HomeScreen(onNavigateToDetail = { id -> navController.navigate(DetailRoute(id)) })\n        }\n        composable\u003CDetailRoute> { backStackEntry ->\n            val route = backStackEntry.toRoute\u003CDetailRoute>()\n            DetailScreen(id = route.id)\n        }\n        composable\u003CSettingsRoute> { SettingsScreen() }\n    }\n}\n```\n\n### Dialog and Bottom Sheet Navigation\n\nUse `dialog()` and overlay patterns instead of imperative show\u002Fhide:\n\n```kotlin\nNavHost(navController, startDestination = HomeRoute) {\n    composable\u003CHomeRoute> { \u002F* ... *\u002F }\n    dialog\u003CConfirmDeleteRoute> { backStackEntry ->\n        val route = backStackEntry.toRoute\u003CConfirmDeleteRoute>()\n        ConfirmDeleteDialog(\n            itemId = route.itemId,\n            onConfirm = { navController.popBackStack() },\n            onDismiss = { navController.popBackStack() }\n        )\n    }\n}\n```\n\n## Composable Design\n\n### Slot-Based APIs\n\nDesign composables with slot parameters for flexibility:\n\n```kotlin\n@Composable\nfun AppCard(\n    modifier: Modifier = Modifier,\n    header: @Composable () -> Unit = {},\n    content: @Composable ColumnScope.() -> Unit,\n    actions: @Composable RowScope.() -> Unit = {}\n) {\n    Card(modifier = modifier) {\n        Column {\n            header()\n            Column(content = content)\n            Row(horizontalArrangement = Arrangement.End, content = actions)\n        }\n    }\n}\n```\n\n### Modifier Ordering\n\nModifier order matters — apply in this sequence:\n\n```kotlin\nText(\n    text = \"Hello\",\n    modifier = Modifier\n        .padding(16.dp)          \u002F\u002F 1. Layout (padding, size)\n        .clip(RoundedCornerShape(8.dp))  \u002F\u002F 2. Shape\n        .background(Color.White) \u002F\u002F 3. Drawing (background, border)\n        .clickable { }           \u002F\u002F 4. Interaction\n)\n```\n\n## KMP Platform-Specific UI\n\n### expect\u002Factual for Platform Composables\n\n```kotlin\n\u002F\u002F commonMain\n@Composable\nexpect fun PlatformStatusBar(darkIcons: Boolean)\n\n\u002F\u002F androidMain\n@Composable\nactual fun PlatformStatusBar(darkIcons: Boolean) {\n    val systemUiController = rememberSystemUiController()\n    SideEffect { systemUiController.setStatusBarColor(Color.Transparent, darkIcons) }\n}\n\n\u002F\u002F iosMain\n@Composable\nactual fun PlatformStatusBar(darkIcons: Boolean) {\n    \u002F\u002F iOS handles this via UIKit interop or Info.plist\n}\n```\n\n## Performance\n\n### Stable Types for Skippable Recomposition\n\nMark classes as `@Stable` or `@Immutable` when all properties are stable:\n\n```kotlin\n@Immutable\ndata class ItemUiModel(\n    val id: String,\n    val title: String,\n    val description: String,\n    val progress: Float\n)\n```\n\n### Use `key()` and Lazy Lists Correctly\n\n```kotlin\nLazyColumn {\n    items(\n        items = items,\n        key = { it.id }  \u002F\u002F Stable keys enable item reuse and animations\n    ) { item ->\n        ItemRow(item = item)\n    }\n}\n```\n\n### Defer Reads with `derivedStateOf`\n\n```kotlin\nval listState = rememberLazyListState()\nval showScrollToTop by remember {\n    derivedStateOf { listState.firstVisibleItemIndex > 5 }\n}\n```\n\n### Avoid Allocations in Recomposition\n\n```kotlin\n\u002F\u002F BAD — new lambda and list every recomposition\nitems.filter { it.isActive }.forEach { ActiveItem(it, onClick = { handle(it) }) }\n\n\u002F\u002F GOOD — key each item so callbacks stay attached to the right row\nval activeItems = remember(items) { items.filter { it.isActive } }\nactiveItems.forEach { item ->\n    key(item.id) {\n        ActiveItem(item, onClick = { handle(item) })\n    }\n}\n```\n\n## Theming\n\n### Material 3 Dynamic Theming\n\n```kotlin\n@Composable\nfun AppTheme(\n    darkTheme: Boolean = isSystemInDarkTheme(),\n    dynamicColor: Boolean = true,\n    content: @Composable () -> Unit\n) {\n    val colorScheme = when {\n        dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {\n            if (darkTheme) dynamicDarkColorScheme(LocalContext.current)\n            else dynamicLightColorScheme(LocalContext.current)\n        }\n        darkTheme -> darkColorScheme()\n        else -> lightColorScheme()\n    }\n\n    MaterialTheme(colorScheme = colorScheme, content = content)\n}\n```\n\n## Anti-Patterns to Avoid\n\n- Using `mutableStateOf` in ViewModels when `MutableStateFlow` with `collectAsStateWithLifecycle` is safer for lifecycle\n- Passing `NavController` deep into composables — pass lambda callbacks instead\n- Heavy computation inside `@Composable` functions — move to ViewModel or `remember {}`\n- Using `LaunchedEffect(Unit)` as a substitute for ViewModel init — it re-runs on configuration change in some setups\n- Creating new object instances in composable parameters — causes unnecessary recomposition\n\n## References\n\nSee skill: `android-clean-architecture` for module structure and layering.\nSee skill: `kotlin-coroutines-flows` for coroutine and Flow patterns.\n","# Compose Multiplatform Patterns\n\nPatterns for building shared UI across Android, iOS, Desktop, and Web using Compose Multiplatform and Jetpack Compose. Covers state management, navigation, theming, and performance.\n\n## When to Activate\n\n- Building Compose UI (Jetpack Compose or Compose Multiplatform)\n- Managing UI state with ViewModels and Compose state\n- Implementing navigation in KMP or Android projects\n- Designing reusable composables and design systems\n- Optimizing recomposition and rendering performance\n\n## State Management\n\n### ViewModel + Single State Object\n\nUse a single data class for screen state. Expose it as `StateFlow` and collect in Compose:\n\n```kotlin\ndata class ItemListState(\n    val items: List\u003CItem> = emptyList(),\n    val isLoading: Boolean = false,\n    val error: String? = null,\n    val searchQuery: String = \"\"\n)\n\nclass ItemListViewModel(\n    private val getItems: GetItemsUseCase\n) : ViewModel() {\n    private val _state = MutableStateFlow(ItemListState())\n    val state: StateFlow\u003CItemListState> = _state.asStateFlow()\n\n    fun onSearch(query: String) {\n        _state.update { it.copy(searchQuery = query) }\n        loadItems(query)\n    }\n\n    private fun loadItems(query: String) {\n        viewModelScope.launch {\n            _state.update { it.copy(isLoading = true) }\n            getItems(query).fold(\n                onSuccess = { items -> _state.update { it.copy(items = items, isLoading = false) } },\n                onFailure = { e -> _state.update { it.copy(error = e.message, isLoading = false) } }\n            )\n        }\n    }\n}\n```\n\n### Collecting State in Compose\n\n```kotlin\n@Composable\nfun ItemListScreen(viewModel: ItemListViewModel = koinViewModel()) {\n    val state by viewModel.state.collectAsStateWithLifecycle()\n\n    ItemListContent(\n        state = state,\n        onSearch = viewModel::onSearch\n    )\n}\n\n@Composable\nprivate fun ItemListContent(\n    state: ItemListState,\n    onSearch: (String) -> Unit\n) {\n    \u002F\u002F Stateless composable — easy to preview and test\n}\n```\n\n### Event Sink Pattern\n\nFor complex screens, use a sealed interface for events instead of multiple callback lambdas:\n\n```kotlin\nsealed interface ItemListEvent {\n    data class Search(val query: String) : ItemListEvent\n    data class Delete(val itemId: String) : ItemListEvent\n    data object Refresh : ItemListEvent\n}\n\n\u002F\u002F In ViewModel\nfun onEvent(event: ItemListEvent) {\n    when (event) {\n        is ItemListEvent.Search -> onSearch(event.query)\n        is ItemListEvent.Delete -> deleteItem(event.itemId)\n        is ItemListEvent.Refresh -> loadItems(_state.value.searchQuery)\n    }\n}\n\n\u002F\u002F In Composable — single lambda instead of many\nItemListContent(\n    state = state,\n    onEvent = viewModel::onEvent\n)\n```\n\n## Navigation\n\n### Type-Safe Navigation (Compose Navigation 2.8+)\n\nDefine routes as `@Serializable` objects:\n\n```kotlin\n@Serializable data object HomeRoute\n@Serializable data class DetailRoute(val id: String)\n@Serializable data object SettingsRoute\n\n@Composable\nfun AppNavHost(navController: NavHostController = rememberNavController()) {\n    NavHost(navController, startDestination = HomeRoute) {\n        composable\u003CHomeRoute> {\n            HomeScreen(onNavigateToDetail = { id -> navController.navigate(DetailRoute(id)) })\n        }\n        composable\u003CDetailRoute> { backStackEntry ->\n            val route = backStackEntry.toRoute\u003CDetailRoute>()\n            DetailScreen(id = route.id)\n        }\n        composable\u003CSettingsRoute> { SettingsScreen() }\n    }\n}\n```\n\n### Dialog and Bottom Sheet Navigation\n\nUse `dialog()` and overlay patterns instead of imperative show\u002Fhide:\n\n```kotlin\nNavHost(navController, startDestination = HomeRoute) {\n    composable\u003CHomeRoute> { \u002F* ... *\u002F }\n    dialog\u003CConfirmDeleteRoute> { backStackEntry ->\n        val route = backStackEntry.toRoute\u003CConfirmDeleteRoute>()\n        ConfirmDeleteDialog(\n            itemId = route.itemId,\n            onConfirm = { navController.popBackStack() },\n            onDismiss = { navController.popBackStack() }\n        )\n    }\n}\n```\n\n## Composable Design\n\n### Slot-Based APIs\n\nDesign composables with slot parameters for flexibility:\n\n```kotlin\n@Composable\nfun AppCard(\n    modifier: Modifier = Modifier,\n    header: @Composable () -> Unit = {},\n    content: @Composable ColumnScope.() -> Unit,\n    actions: @Composable RowScope.() -> Unit = {}\n) {\n    Card(modifier = modifier) {\n        Column {\n            header()\n            Column(content = content)\n            Row(horizontalArrangement = Arrangement.End, content = actions)\n        }\n    }\n}\n```\n\n### Modifier Ordering\n\nModifier order matters — apply in this sequence:\n\n```kotlin\nText(\n    text = \"Hello\",\n    modifier = Modifier\n        .padding(16.dp)          \u002F\u002F 1. Layout (padding, size)\n        .clip(RoundedCornerShape(8.dp))  \u002F\u002F 2. Shape\n        .background(Color.White) \u002F\u002F 3. Drawing (background, border)\n        .clickable { }           \u002F\u002F 4. Interaction\n)\n```\n\n## KMP Platform-Specific UI\n\n### expect\u002Factual for Platform Composables\n\n```kotlin\n\u002F\u002F commonMain\n@Composable\nexpect fun PlatformStatusBar(darkIcons: Boolean)\n\n\u002F\u002F androidMain\n@Composable\nactual fun PlatformStatusBar(darkIcons: Boolean) {\n    val systemUiController = rememberSystemUiController()\n    SideEffect { systemUiController.setStatusBarColor(Color.Transparent, darkIcons) }\n}\n\n\u002F\u002F iosMain\n@Composable\nactual fun PlatformStatusBar(darkIcons: Boolean) {\n    \u002F\u002F iOS handles this via UIKit interop or Info.plist\n}\n```\n\n## Performance\n\n### Stable Types for Skippable Recomposition\n\nMark classes as `@Stable` or `@Immutable` when all properties are stable:\n\n```kotlin\n@Immutable\ndata class ItemUiModel(\n    val id: String,\n    val title: String,\n    val description: String,\n    val progress: Float\n)\n```\n\n### Use `key()` and Lazy Lists Correctly\n\n```kotlin\nLazyColumn {\n    items(\n        items = items,\n        key = { it.id }  \u002F\u002F Stable keys enable item reuse and animations\n    ) { item ->\n        ItemRow(item = item)\n    }\n}\n```\n\n### Defer Reads with `derivedStateOf`\n\n```kotlin\nval listState = rememberLazyListState()\nval showScrollToTop by remember {\n    derivedStateOf { listState.firstVisibleItemIndex > 5 }\n}\n```\n\n### Avoid Allocations in Recomposition\n\n```kotlin\n\u002F\u002F BAD — new lambda and list every recomposition\nitems.filter { it.isActive }.forEach { ActiveItem(it, onClick = { handle(it) }) }\n\n\u002F\u002F GOOD — key each item so callbacks stay attached to the right row\nval activeItems = remember(items) { items.filter { it.isActive } }\nactiveItems.forEach { item ->\n    key(item.id) {\n        ActiveItem(item, onClick = { handle(item) })\n    }\n}\n```\n\n## Theming\n\n### Material 3 Dynamic Theming\n\n```kotlin\n@Composable\nfun AppTheme(\n    darkTheme: Boolean = isSystemInDarkTheme(),\n    dynamicColor: Boolean = true,\n    content: @Composable () -> Unit\n) {\n    val colorScheme = when {\n        dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {\n            if (darkTheme) dynamicDarkColorScheme(LocalContext.current)\n            else dynamicLightColorScheme(LocalContext.current)\n        }\n        darkTheme -> darkColorScheme()\n        else -> lightColorScheme()\n    }\n\n    MaterialTheme(colorScheme = colorScheme, content = content)\n}\n```\n\n## Anti-Patterns to Avoid\n\n- Using `mutableStateOf` in ViewModels when `MutableStateFlow` with `collectAsStateWithLifecycle` is safer for lifecycle\n- Passing `NavController` deep into composables — pass lambda callbacks instead\n- Heavy computation inside `@Composable` functions — move to ViewModel or `remember {}`\n- Using `LaunchedEffect(Unit)` as a substitute for ViewModel init — it re-runs on configuration change in some setups\n- Creating new object instances in composable parameters — causes unnecessary recomposition\n\n## References\n\nSee skill: `android-clean-architecture` for module structure and layering.\nSee skill: `kotlin-coroutines-flows` for coroutine and Flow patterns.\n",{"name":5,"origin":43,"description":7},"ECC","master","8ec37df6d71fb664ea19d32c079e7d3ff931a8e0","skills\u002Fecc\u002Fcompose-multiplatform-patterns",3,"https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit","https:\u002F\u002Fweblyfe.ai","https:\u002F\u002Fgithub.com\u002FS3YED","2026-08-27 01:54:02",{"source":8,"skillName":5,"commands":53,"prompt":63,"zipAvailable":64},[54,57,60],{"tool":55,"command":56},"npx","npx skills add S3YED\u002Fappie-kit --skill compose-multiplatform-patterns",{"tool":58,"command":59},"bunx","bunx skills add S3YED\u002Fappie-kit --skill compose-multiplatform-patterns",{"tool":61,"command":62},"pnpm","pnpm dlx skills add S3YED\u002Fappie-kit --skill compose-multiplatform-patterns","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fecc\u002Fcompose-multiplatform-patterns\u002FSKILL.md",true,[],[67,103,133,159,190,214],{"skillNo":68,"name":69,"nameZh":6,"description":70,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":71,"categories":72,"keywords":84,"publishedAt":38},"01M6JFD4M6N4DSGC7TXEJ5R3J2","ai-music","AI music generation and audio tools: HeartMuLa lyrics-to-music generation, songwriting craft (+ Suno prompts), and audio spectrogram\u002Ffeature visualization.","https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fwethlete\u002Fai-music\u002FSKILL.md",[73,78,81],{"categoryNo":74,"categoryName":75,"taxonomyType":76,"taxonomyTypeDesc":77},"01JBSEEDCAT000000000000013","分析与可视化","SCENARIO","使用场景",{"categoryNo":79,"categoryName":80,"taxonomyType":76,"taxonomyTypeDesc":77},"01JBSEEDCAT000000000000016","图像与多媒体",{"categoryNo":82,"categoryName":83,"taxonomyType":76,"taxonomyTypeDesc":77},"01JBSEEDCAT000000000000023","Skill与智能体开发",[85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100,101,102],"music","ai music","humanizer","visualization","Tools","Audio","hermes","hermes agent","songwriting","suno","lyrics","prompts","heartmula","craft","generation","feature","ai music generation","music generation",{"skillNo":104,"name":105,"nameZh":6,"description":106,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":107,"categories":108,"keywords":113,"publishedAt":38},"01M6JFCZE4XNFQFMNZDHKHT5V5","agentic-webdesign-design-system-ingestion","Use v0 Design Systems 2.0, Bolt Design System Agents, or Lovable to generate production UI from a client's real design system components — not generic Tailwind. Use when building a client website where brand consistency matters.","https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fweb-design\u002Fagentic-webdesign-design-system-ingestion\u002FSKILL.md",[109,112],{"categoryNo":110,"categoryName":111,"taxonomyType":76,"taxonomyTypeDesc":77},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},[114,115,116,117,118,119,120,121,122,123,124,29,125,126,127,128,129,130,131,132],"design","agentic","design system","system","ingestion","webdesign","agentic webdesign design system ingestion","components","generate","design systems","website","Tailwind","bolt","lovable","v0","design-system","wed","design system components","appie",{"skillNo":134,"name":135,"nameZh":6,"description":136,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":137,"categories":138,"keywords":141,"publishedAt":38},"01M6JFCVPX3913CFAS6QQJ33ZB","agentic-webdesign-agent-elements","Use 21st.dev Agent Elements — 25 shadcn\u002Fui components purpose-built for AI agent UIs. Tool cards (Bash, Edit, Search, Plan, Subagent, MCP), chat, input, streaming. Open source, shadcn-registry install, no runtime lock-in.","https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fweb-design\u002Fagentic-webdesign-agent-elements\u002FSKILL.md",[139,140],{"categoryNo":82,"categoryName":83,"taxonomyType":76,"taxonomyTypeDesc":77},{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},[115,142,119,143,144,145,121,146,147,148,149,150,151,152,153,154,155,156,157,158],"elements","agentic webdesign agent elements","MCP","ai agent","registry","search","streaming","open source","open","Bash","plan","subagent","edit","install","input","lock","source",{"skillNo":160,"name":161,"nameZh":6,"description":162,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":163,"categories":164,"keywords":169,"publishedAt":38},"01M6JFCQC7H65M9QJ6TRE71BS1","vercel-deployment","Deploy static sites and frontends to Vercel — handles both CLI and REST API paths, including the CLI token sanitization workaround.","https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fsoftware-development\u002Fvercel-deployment\u002FSKILL.md",[165,168],{"categoryNo":166,"categoryName":167,"taxonomyType":76,"taxonomyTypeDesc":77},"01JBSEEDCAT000000000000011","运维与部署",{"categoryNo":82,"categoryName":83,"taxonomyType":76,"taxonomyTypeDesc":77},[170,171,172,173,174,175,176,177,178,179,180,181,182,183,184,185,186,187,188,189],"deployment","vercel deployment","vercel","macos","cli","linux","windows","deploy","vercel deploy","REST","api","site","deploy to vercel","token","rest api","host","sites","paths","sanitization","static site",{"skillNo":191,"name":192,"nameZh":6,"description":193,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":194,"categories":195,"keywords":197,"publishedAt":38},"01M6JFCM4SMTXBM5A01BK2YQG1","software-quality-workflows","Umbrella workflow for TDD, debugging, code simplification, spikes, pre-commit review, and debugger-assisted investigation.","https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fsoftware-development\u002Fsoftware-quality-workflows\u002FSKILL.md",[196],{"categoryNo":82,"categoryName":83,"taxonomyType":76,"taxonomyTypeDesc":77},[198,199,200,201,202,203,204,205,206,207,208,209,210,211,212,213,37],"workflows","quality","software","software quality workflows","review","tdd","workflow","commit","debugging","code","debugger","pre-commit","investigation","code simplification","user","simplification",{"skillNo":215,"name":216,"nameZh":6,"description":217,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":218,"categories":219,"keywords":227,"publishedAt":38},"01M6JFCGD0M6CEATY01W7YN6DB","react-component-refactoring","Safely refactor large React components into smaller, maintainable pieces using proven patterns","https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fsoftware-development\u002Freact-component-refactoring\u002FSKILL.md",[220,223,226],{"categoryNo":221,"categoryName":222,"taxonomyType":76,"taxonomyTypeDesc":77},"01JBSEEDCAT000000000000007","代码审查",{"categoryNo":224,"categoryName":225,"taxonomyType":76,"taxonomyTypeDesc":77},"01JBSEEDCAT000000000000009","前端开发",{"categoryNo":82,"categoryName":83,"taxonomyType":76,"taxonomyTypeDesc":77},[228,229,230,231,232,233,234,235,173,236,237,121,238,176,239,207,240,241,25,242],"react","component","refactoring","component refactoring","react component","react component refactoring","frontend","writing","safe","typescript","react components","modular","refactor","simplify","test-driven-development"]