[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6JDKWPPTYDV7TVHTQ5H50JV":3,"skill-same:01M6JDKWPPTYDV7TVHTQ5H50JV":65},{"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":17,"publishedAt":38,"linkOnly":39,"markdownContent":40,"markdownBody":41,"frontMatter":42,"refName":43,"commitSha":44,"skillDirectory":45,"forksCount":46,"repositoryHtmlUrl":47,"repositoryHomepageUrl":48,"ownerHtmlUrl":49,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":50,"install":51,"resources":64},"01M6JDKWPPTYDV7TVHTQ5H50JV","swiftui-patterns",null,"SwiftUI architecture patterns, state management with @Observable, view composition, navigation, performance optimization, and modern iOS\u002FmacOS UI best practices.","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\u002Fswiftui-patterns\u002FSKILL.md",[],[18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37],"patterns","swiftui patterns","swiftui","architecture patterns","with","navigation","swiftui architecture","management","view","performance optimization","Composition","macos","ios","Optimization","ui","state","best practices","state management","architecture","performance","2026-11-10 10:12:30",false,"---\nname: swiftui-patterns\ndescription: SwiftUI architecture patterns, state management with @Observable, view composition, navigation, performance optimization, and modern iOS\u002FmacOS UI best practices.\n---\n\n# SwiftUI Patterns\n\nModern SwiftUI patterns for building declarative, performant user interfaces on Apple platforms. Covers the Observation framework, view composition, type-safe navigation, and performance optimization.\n\n## When to Activate\n\n- Building SwiftUI views and managing state (`@State`, `@Observable`, `@Binding`)\n- Designing navigation flows with `NavigationStack`\n- Structuring view models and data flow\n- Optimizing rendering performance for lists and complex layouts\n- Working with environment values and dependency injection in SwiftUI\n\n## State Management\n\n### Property Wrapper Selection\n\nChoose the simplest wrapper that fits:\n\n| Wrapper | Use Case |\n|---------|----------|\n| `@State` | View-local value types (toggles, form fields, sheet presentation) |\n| `@Binding` | Two-way reference to parent's `@State` |\n| `@Observable` class + `@State` | Owned model with multiple properties |\n| `@Observable` class (no wrapper) | Read-only reference passed from parent |\n| `@Bindable` | Two-way binding to an `@Observable` property |\n| `@Environment` | Shared dependencies injected via `.environment()` |\n\n### @Observable ViewModel\n\nUse `@Observable` (not `ObservableObject`) — it tracks property-level changes so SwiftUI only re-renders views that read the changed property:\n\n```swift\n@Observable\nfinal class ItemListViewModel {\n    private(set) var items: [Item] = []\n    private(set) var isLoading = false\n    var searchText = \"\"\n\n    private let repository: any ItemRepository\n\n    init(repository: any ItemRepository = DefaultItemRepository()) {\n        self.repository = repository\n    }\n\n    func load() async {\n        isLoading = true\n        defer { isLoading = false }\n        items = (try? await repository.fetchAll()) ?? []\n    }\n}\n```\n\n### View Consuming the ViewModel\n\n```swift\nstruct ItemListView: View {\n    @State private var viewModel: ItemListViewModel\n\n    init(viewModel: ItemListViewModel = ItemListViewModel()) {\n        _viewModel = State(initialValue: viewModel)\n    }\n\n    var body: some View {\n        List(viewModel.items) { item in\n            ItemRow(item: item)\n        }\n        .searchable(text: $viewModel.searchText)\n        .overlay { if viewModel.isLoading { ProgressView() } }\n        .task { await viewModel.load() }\n    }\n}\n```\n\n### Environment Injection\n\nReplace `@EnvironmentObject` with `@Environment`:\n\n```swift\n\u002F\u002F Inject\nContentView()\n    .environment(authManager)\n\n\u002F\u002F Consume\nstruct ProfileView: View {\n    @Environment(AuthManager.self) private var auth\n\n    var body: some View {\n        Text(auth.currentUser?.name ?? \"Guest\")\n    }\n}\n```\n\n## View Composition\n\n### Extract Subviews to Limit Invalidation\n\nBreak views into small, focused structs. When state changes, only the subview reading that state re-renders:\n\n```swift\nstruct OrderView: View {\n    @State private var viewModel = OrderViewModel()\n\n    var body: some View {\n        VStack {\n            OrderHeader(title: viewModel.title)\n            OrderItemList(items: viewModel.items)\n            OrderTotal(total: viewModel.total)\n        }\n    }\n}\n```\n\n### ViewModifier for Reusable Styling\n\n```swift\nstruct CardModifier: ViewModifier {\n    func body(content: Content) -> some View {\n        content\n            .padding()\n            .background(.regularMaterial)\n            .clipShape(RoundedRectangle(cornerRadius: 12))\n    }\n}\n\nextension View {\n    func cardStyle() -> some View {\n        modifier(CardModifier())\n    }\n}\n```\n\n## Navigation\n\n### Type-Safe NavigationStack\n\nUse `NavigationStack` with `NavigationPath` for programmatic, type-safe routing:\n\n```swift\n@Observable\nfinal class Router {\n    var path = NavigationPath()\n\n    func navigate(to destination: Destination) {\n        path.append(destination)\n    }\n\n    func popToRoot() {\n        path = NavigationPath()\n    }\n}\n\nenum Destination: Hashable {\n    case detail(Item.ID)\n    case settings\n    case profile(User.ID)\n}\n\nstruct RootView: View {\n    @State private var router = Router()\n\n    var body: some View {\n        NavigationStack(path: $router.path) {\n            HomeView()\n                .navigationDestination(for: Destination.self) { dest in\n                    switch dest {\n                    case .detail(let id): ItemDetailView(itemID: id)\n                    case .settings: SettingsView()\n                    case .profile(let id): ProfileView(userID: id)\n                    }\n                }\n        }\n        .environment(router)\n    }\n}\n```\n\n## Performance\n\n### Use Lazy Containers for Large Collections\n\n`LazyVStack` and `LazyHStack` create views only when visible:\n\n```swift\nScrollView {\n    LazyVStack(spacing: 8) {\n        ForEach(items) { item in\n            ItemRow(item: item)\n        }\n    }\n}\n```\n\n### Stable Identifiers\n\nAlways use stable, unique IDs in `ForEach` — avoid using array indices:\n\n```swift\n\u002F\u002F Use Identifiable conformance or explicit id\nForEach(items, id: \\.stableID) { item in\n    ItemRow(item: item)\n}\n```\n\n### Avoid Expensive Work in body\n\n- Never perform I\u002FO, network calls, or heavy computation inside `body`\n- Use `.task {}` for async work — it cancels automatically when the view disappears\n- Use `.sensoryFeedback()` and `.geometryGroup()` sparingly in scroll views\n- Minimize `.shadow()`, `.blur()`, and `.mask()` in lists — they trigger offscreen rendering\n\n### Equatable Conformance\n\nFor views with expensive bodies, conform to `Equatable` to skip unnecessary re-renders:\n\n```swift\nstruct ExpensiveChartView: View, Equatable {\n    let dataPoints: [DataPoint] \u002F\u002F DataPoint must conform to Equatable\n\n    static func == (lhs: Self, rhs: Self) -> Bool {\n        lhs.dataPoints == rhs.dataPoints\n    }\n\n    var body: some View {\n        \u002F\u002F Complex chart rendering\n    }\n}\n```\n\n## Previews\n\nUse `#Preview` macro with inline mock data for fast iteration:\n\n```swift\n#Preview(\"Empty state\") {\n    ItemListView(viewModel: ItemListViewModel(repository: EmptyMockRepository()))\n}\n\n#Preview(\"Loaded\") {\n    ItemListView(viewModel: ItemListViewModel(repository: PopulatedMockRepository()))\n}\n```\n\n## Anti-Patterns to Avoid\n\n- Using `ObservableObject` \u002F `@Published` \u002F `@StateObject` \u002F `@EnvironmentObject` in new code — migrate to `@Observable`\n- Putting async work directly in `body` or `init` — use `.task {}` or explicit load methods\n- Creating view models as `@State` inside child views that don't own the data — pass from parent instead\n- Using `AnyView` type erasure — prefer `@ViewBuilder` or `Group` for conditional views\n- Ignoring `Sendable` requirements when passing data to\u002Ffrom actors\n\n## References\n\nSee skill: `swift-actor-persistence` for actor-based persistence patterns.\nSee skill: `swift-protocol-di-testing` for protocol-based DI and testing with Swift Testing.\n","# SwiftUI Patterns\n\nModern SwiftUI patterns for building declarative, performant user interfaces on Apple platforms. Covers the Observation framework, view composition, type-safe navigation, and performance optimization.\n\n## When to Activate\n\n- Building SwiftUI views and managing state (`@State`, `@Observable`, `@Binding`)\n- Designing navigation flows with `NavigationStack`\n- Structuring view models and data flow\n- Optimizing rendering performance for lists and complex layouts\n- Working with environment values and dependency injection in SwiftUI\n\n## State Management\n\n### Property Wrapper Selection\n\nChoose the simplest wrapper that fits:\n\n| Wrapper | Use Case |\n|---------|----------|\n| `@State` | View-local value types (toggles, form fields, sheet presentation) |\n| `@Binding` | Two-way reference to parent's `@State` |\n| `@Observable` class + `@State` | Owned model with multiple properties |\n| `@Observable` class (no wrapper) | Read-only reference passed from parent |\n| `@Bindable` | Two-way binding to an `@Observable` property |\n| `@Environment` | Shared dependencies injected via `.environment()` |\n\n### @Observable ViewModel\n\nUse `@Observable` (not `ObservableObject`) — it tracks property-level changes so SwiftUI only re-renders views that read the changed property:\n\n```swift\n@Observable\nfinal class ItemListViewModel {\n    private(set) var items: [Item] = []\n    private(set) var isLoading = false\n    var searchText = \"\"\n\n    private let repository: any ItemRepository\n\n    init(repository: any ItemRepository = DefaultItemRepository()) {\n        self.repository = repository\n    }\n\n    func load() async {\n        isLoading = true\n        defer { isLoading = false }\n        items = (try? await repository.fetchAll()) ?? []\n    }\n}\n```\n\n### View Consuming the ViewModel\n\n```swift\nstruct ItemListView: View {\n    @State private var viewModel: ItemListViewModel\n\n    init(viewModel: ItemListViewModel = ItemListViewModel()) {\n        _viewModel = State(initialValue: viewModel)\n    }\n\n    var body: some View {\n        List(viewModel.items) { item in\n            ItemRow(item: item)\n        }\n        .searchable(text: $viewModel.searchText)\n        .overlay { if viewModel.isLoading { ProgressView() } }\n        .task { await viewModel.load() }\n    }\n}\n```\n\n### Environment Injection\n\nReplace `@EnvironmentObject` with `@Environment`:\n\n```swift\n\u002F\u002F Inject\nContentView()\n    .environment(authManager)\n\n\u002F\u002F Consume\nstruct ProfileView: View {\n    @Environment(AuthManager.self) private var auth\n\n    var body: some View {\n        Text(auth.currentUser?.name ?? \"Guest\")\n    }\n}\n```\n\n## View Composition\n\n### Extract Subviews to Limit Invalidation\n\nBreak views into small, focused structs. When state changes, only the subview reading that state re-renders:\n\n```swift\nstruct OrderView: View {\n    @State private var viewModel = OrderViewModel()\n\n    var body: some View {\n        VStack {\n            OrderHeader(title: viewModel.title)\n            OrderItemList(items: viewModel.items)\n            OrderTotal(total: viewModel.total)\n        }\n    }\n}\n```\n\n### ViewModifier for Reusable Styling\n\n```swift\nstruct CardModifier: ViewModifier {\n    func body(content: Content) -> some View {\n        content\n            .padding()\n            .background(.regularMaterial)\n            .clipShape(RoundedRectangle(cornerRadius: 12))\n    }\n}\n\nextension View {\n    func cardStyle() -> some View {\n        modifier(CardModifier())\n    }\n}\n```\n\n## Navigation\n\n### Type-Safe NavigationStack\n\nUse `NavigationStack` with `NavigationPath` for programmatic, type-safe routing:\n\n```swift\n@Observable\nfinal class Router {\n    var path = NavigationPath()\n\n    func navigate(to destination: Destination) {\n        path.append(destination)\n    }\n\n    func popToRoot() {\n        path = NavigationPath()\n    }\n}\n\nenum Destination: Hashable {\n    case detail(Item.ID)\n    case settings\n    case profile(User.ID)\n}\n\nstruct RootView: View {\n    @State private var router = Router()\n\n    var body: some View {\n        NavigationStack(path: $router.path) {\n            HomeView()\n                .navigationDestination(for: Destination.self) { dest in\n                    switch dest {\n                    case .detail(let id): ItemDetailView(itemID: id)\n                    case .settings: SettingsView()\n                    case .profile(let id): ProfileView(userID: id)\n                    }\n                }\n        }\n        .environment(router)\n    }\n}\n```\n\n## Performance\n\n### Use Lazy Containers for Large Collections\n\n`LazyVStack` and `LazyHStack` create views only when visible:\n\n```swift\nScrollView {\n    LazyVStack(spacing: 8) {\n        ForEach(items) { item in\n            ItemRow(item: item)\n        }\n    }\n}\n```\n\n### Stable Identifiers\n\nAlways use stable, unique IDs in `ForEach` — avoid using array indices:\n\n```swift\n\u002F\u002F Use Identifiable conformance or explicit id\nForEach(items, id: \\.stableID) { item in\n    ItemRow(item: item)\n}\n```\n\n### Avoid Expensive Work in body\n\n- Never perform I\u002FO, network calls, or heavy computation inside `body`\n- Use `.task {}` for async work — it cancels automatically when the view disappears\n- Use `.sensoryFeedback()` and `.geometryGroup()` sparingly in scroll views\n- Minimize `.shadow()`, `.blur()`, and `.mask()` in lists — they trigger offscreen rendering\n\n### Equatable Conformance\n\nFor views with expensive bodies, conform to `Equatable` to skip unnecessary re-renders:\n\n```swift\nstruct ExpensiveChartView: View, Equatable {\n    let dataPoints: [DataPoint] \u002F\u002F DataPoint must conform to Equatable\n\n    static func == (lhs: Self, rhs: Self) -> Bool {\n        lhs.dataPoints == rhs.dataPoints\n    }\n\n    var body: some View {\n        \u002F\u002F Complex chart rendering\n    }\n}\n```\n\n## Previews\n\nUse `#Preview` macro with inline mock data for fast iteration:\n\n```swift\n#Preview(\"Empty state\") {\n    ItemListView(viewModel: ItemListViewModel(repository: EmptyMockRepository()))\n}\n\n#Preview(\"Loaded\") {\n    ItemListView(viewModel: ItemListViewModel(repository: PopulatedMockRepository()))\n}\n```\n\n## Anti-Patterns to Avoid\n\n- Using `ObservableObject` \u002F `@Published` \u002F `@StateObject` \u002F `@EnvironmentObject` in new code — migrate to `@Observable`\n- Putting async work directly in `body` or `init` — use `.task {}` or explicit load methods\n- Creating view models as `@State` inside child views that don't own the data — pass from parent instead\n- Using `AnyView` type erasure — prefer `@ViewBuilder` or `Group` for conditional views\n- Ignoring `Sendable` requirements when passing data to\u002Ffrom actors\n\n## References\n\nSee skill: `swift-actor-persistence` for actor-based persistence patterns.\nSee skill: `swift-protocol-di-testing` for protocol-based DI and testing with Swift Testing.\n",{"name":5,"description":7},"master","8ec37df6d71fb664ea19d32c079e7d3ff931a8e0","skills\u002Fecc\u002Fswiftui-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":52,"prompt":62,"zipAvailable":63},[53,56,59],{"tool":54,"command":55},"npx","npx skills add S3YED\u002Fappie-kit --skill swiftui-patterns",{"tool":57,"command":58},"bunx","bunx skills add S3YED\u002Fappie-kit --skill swiftui-patterns",{"tool":60,"command":61},"pnpm","pnpm dlx skills add S3YED\u002Fappie-kit --skill swiftui-patterns","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fecc\u002Fswiftui-patterns\u002FSKILL.md",true,[],[66,102,136,162,192,217],{"skillNo":67,"name":68,"nameZh":6,"description":69,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":70,"categories":71,"keywords":83,"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",[72,77,80],{"categoryNo":73,"categoryName":74,"taxonomyType":75,"taxonomyTypeDesc":76},"01JBSEEDCAT000000000000013","分析与可视化","SCENARIO","使用场景",{"categoryNo":78,"categoryName":79,"taxonomyType":75,"taxonomyTypeDesc":76},"01JBSEEDCAT000000000000016","图像与多媒体",{"categoryNo":81,"categoryName":82,"taxonomyType":75,"taxonomyTypeDesc":76},"01JBSEEDCAT000000000000023","Skill与智能体开发",[84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100,101],"music","ai music","humanizer","visualization","Tools","Audio","hermes","hermes agent","songwriting","suno","lyrics","prompts","heartmula","craft","generation","feature","ai music generation","music generation",{"skillNo":103,"name":104,"nameZh":6,"description":105,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":106,"categories":107,"keywords":116,"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",[108,111],{"categoryNo":109,"categoryName":110,"taxonomyType":75,"taxonomyTypeDesc":76},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":112,"categoryName":113,"taxonomyType":114,"taxonomyTypeDesc":115},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[117,118,119,120,121,122,123,124,125,126,127,32,128,129,130,131,132,133,134,135],"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":137,"name":138,"nameZh":6,"description":139,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":140,"categories":141,"keywords":144,"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",[142,143],{"categoryNo":81,"categoryName":82,"taxonomyType":75,"taxonomyTypeDesc":76},{"categoryNo":112,"categoryName":113,"taxonomyType":114,"taxonomyTypeDesc":115},[118,145,122,146,147,148,124,149,150,151,152,153,154,155,156,157,158,159,160,161],"elements","agentic webdesign agent elements","MCP","ai agent","registry","search","streaming","open source","open","Bash","plan","subagent","edit","install","input","lock","source",{"skillNo":163,"name":164,"nameZh":6,"description":165,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":166,"categories":167,"keywords":172,"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",[168,171],{"categoryNo":169,"categoryName":170,"taxonomyType":75,"taxonomyTypeDesc":76},"01JBSEEDCAT000000000000011","运维与部署",{"categoryNo":81,"categoryName":82,"taxonomyType":75,"taxonomyTypeDesc":76},[173,174,175,29,176,177,178,179,180,181,182,183,184,185,186,187,188,189,190,191],"deployment","vercel deployment","vercel","cli","linux","windows","deploy","vercel deploy","REST","api","site","deploy to vercel","token","rest api","host","sites","paths","sanitization","static site",{"skillNo":193,"name":194,"nameZh":6,"description":195,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":196,"categories":197,"keywords":199,"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",[198],{"categoryNo":81,"categoryName":82,"taxonomyType":75,"taxonomyTypeDesc":76},[200,201,202,203,204,205,206,207,208,209,210,211,212,213,214,215,216],"workflows","quality","software","software quality workflows","review","tdd","workflow","commit","debugging","code","debugger","pre-commit","investigation","code simplification","user","simplification","for",{"skillNo":218,"name":219,"nameZh":6,"description":220,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":221,"categories":222,"keywords":230,"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",[223,226,229],{"categoryNo":224,"categoryName":225,"taxonomyType":75,"taxonomyTypeDesc":76},"01JBSEEDCAT000000000000007","代码审查",{"categoryNo":227,"categoryName":228,"taxonomyType":75,"taxonomyTypeDesc":76},"01JBSEEDCAT000000000000009","前端开发",{"categoryNo":81,"categoryName":82,"taxonomyType":75,"taxonomyTypeDesc":76},[231,232,233,234,235,236,237,238,29,239,240,124,241,178,242,209,243,244,18,245],"react","component","refactoring","component refactoring","react component","react component refactoring","frontend","writing","safe","typescript","react components","modular","refactor","simplify","test-driven-development"]