[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M71SHW2GGPD63909M5XVXM4B":3,"skill-same:01M71SHW2GGPD63909M5XVXM4B":66},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":18,"publishedAt":37,"linkOnly":38,"markdownContent":39,"markdownBody":40,"frontMatter":41,"refName":42,"commitSha":43,"skillDirectory":44,"forksCount":45,"repositoryHtmlUrl":46,"repositoryHomepageUrl":47,"ownerHtmlUrl":48,"ownerBlogUrl":49,"ownerDescription":50,"updatedAt":51,"install":52,"resources":65},"01M71SHW2GGPD63909M5XVXM4B","swiftui-macos-form-alignment",null,"SwiftUI macOS Form layout: alignment override bug, background control, and VStack-based alternative. Load when debugging alignment issues inside Form rows, or when row controls (toggles, text fields, pickers) are visually misaligned with their labels on macOS.","JustinDFuller\u002Fagent-session-manager","JustinDFuller","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F11914897?v=4","01M71SDTPZETGW0T4KYGMJVEF6","Justin Fuller","01M71SDTQK98BNVXNZ9TMD843D",1,"MIT","https:\u002F\u002Fgithub.com\u002FJustinDFuller\u002Fagent-session-manager\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fswiftui-macos-form-alignment\u002FSKILL.md",[],[19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36],"form","swiftui","swiftui macos form alignment","macos","alignment","background","when","debugging","load","controls","fields","labels","issues","bug","layout","control","with","text","2026-11-10 13:02:02",false,"---\nname: swiftui-macos-form-alignment\ndescription: \"SwiftUI macOS Form layout: alignment override bug, background control, and VStack-based alternative. Load when debugging alignment issues inside Form rows, or when row controls (toggles, text fields, pickers) are visually misaligned with their labels on macOS.\"\n---\n\n# SwiftUI macOS Form Alignment\n\n## The Problem\n\n`Form { }.formStyle(.grouped)` on macOS renders using NSTableView internally. Each direct child of a `Section` is wrapped in a **fixed-height table row cell** that **center-aligns its content vertically**, regardless of any alignment modifiers you put on the view inside the row.\n\nThis means:\n\n```swift\n\u002F\u002F ❌ Does NOT work — HStack(alignment: .top) is ignored by the Form row container\nSection {\n    HStack(alignment: .top) {\n        VStack { Text(label); Text(description) }  \u002F\u002F tall due to description\n        Spacer()\n        TextField(...)  \u002F\u002F shorter — ends up centered, visually below label\n    }\n}\n```\n\nNo matter what alignment you apply to the HStack (`.top`, `.firstTextBaseline`), or whether you use `.overlay(alignment: .topTrailing)`, the Form's row container wins and centers the whole thing.\n\n## Diagnosing Alignment Issues\n\nAdd background colors to every subview to see actual frame extents at runtime:\n\n```swift\nText(label).background(Color.red.opacity(0.4))\nTextField(...).background(Color.blue.opacity(0.4))\nHStack { ... }.background(Color.green.opacity(0.4))\n```\n\nIf the colored boxes show the layout you want but the controls still appear in the wrong place, the Form container is the culprit — not your alignment modifiers.\n\n## Fix 1: Restructure to put label and control on the same line\n\nPut the control **on the same line as the label** (not as a sibling of a tall VStack), and move the description to its own line below. With both items in the same `HStack`, there is no height mismatch and center alignment looks correct:\n\n```swift\n\u002F\u002F ✓ Label and control in the same HStack — always at the same height\nVStack(alignment: .leading, spacing: 4) {\n    HStack(alignment: .top) {\n        Text(label).font(...)\n        Spacer()\n        HStack(alignment: .center, spacing: 4) {\n            Text(modifier)\n            TextField(...)\n        }\n    }\n    Text(description).font(.caption).foregroundStyle(.secondary)\n}\n.padding(.vertical, 8)\n```\n\n## Fix 2: Replace Form with ScrollView + VStack (most reliable)\n\nWhen Fix 1 is insufficient (e.g. complex multi-row alignment), ditch `Form` entirely and use a plain `ScrollView + VStack`. Style the sections manually to match the grouped form appearance:\n\n```swift\nScrollView {\n    VStack(alignment: .leading, spacing: 20) {\n        \u002F\u002F Section\n        VStack(alignment: .leading, spacing: 6) {\n            Text(\"Section Header\")\n                .font(.footnote)\n                .foregroundStyle(.secondary)\n                .textCase(.uppercase)\n                .padding(.leading, 4)\n            VStack(spacing: 0) {\n                MyRow(...)\n                Divider().padding(.leading, 16)\n                MyRow(...)\n            }\n            .background(Color(NSColor.controlBackgroundColor))\n            .clipShape(RoundedRectangle(cornerRadius: 8))\n        }\n    }\n    .padding(20)\n}\n```\n\nEach `MyRow` owns its own horizontal padding (`.padding(.horizontal, 16)`) since Form no longer provides it.\n\nWithout `Form`, alignment modifiers work exactly as documented. `HStack(alignment: .top)` top-aligns all children. No surprises.\n\n## Form Background Control\n\n`Form { }.formStyle(.grouped)` fills the content area with its own background color, which differs from `NSColor.windowBackgroundColor`. To unify backgrounds across pages that mix Form and non-Form layouts:\n\n```swift\nScrollView {\n    Form { ... }\n    .formStyle(.grouped)\n    .scrollContentBackground(.hidden)  \u002F\u002F hides Form's internal scroll background\n}\n.background(Color(NSColor.windowBackgroundColor))  \u002F\u002F shows window background in the gap areas\n```\n\n`.scrollContentBackground(.hidden)` requires macOS 13+. It hides the scrollable view's background but leaves section cell backgrounds intact — sections appear as lighter cards on the darker window background.\n\n## When to Use Form vs VStack\n\n| Situation | Use |\n|-----------|-----|\n| Simple toggle\u002Fcheckbox rows | `Form` — center alignment looks fine when label ≈ control height |\n| Picker or segmented control rows | `Form` — controls are tall enough that centering is acceptable |\n| TextField rows where label top must align with field top | `VStack + ScrollView` |\n| Any row needing `.top` or `.firstTextBaseline` alignment | `VStack + ScrollView` |\n| Rows with multi-line descriptions AND right-side controls | `VStack + ScrollView` |\n","# SwiftUI macOS Form Alignment\n\n## The Problem\n\n`Form { }.formStyle(.grouped)` on macOS renders using NSTableView internally. Each direct child of a `Section` is wrapped in a **fixed-height table row cell** that **center-aligns its content vertically**, regardless of any alignment modifiers you put on the view inside the row.\n\nThis means:\n\n```swift\n\u002F\u002F ❌ Does NOT work — HStack(alignment: .top) is ignored by the Form row container\nSection {\n    HStack(alignment: .top) {\n        VStack { Text(label); Text(description) }  \u002F\u002F tall due to description\n        Spacer()\n        TextField(...)  \u002F\u002F shorter — ends up centered, visually below label\n    }\n}\n```\n\nNo matter what alignment you apply to the HStack (`.top`, `.firstTextBaseline`), or whether you use `.overlay(alignment: .topTrailing)`, the Form's row container wins and centers the whole thing.\n\n## Diagnosing Alignment Issues\n\nAdd background colors to every subview to see actual frame extents at runtime:\n\n```swift\nText(label).background(Color.red.opacity(0.4))\nTextField(...).background(Color.blue.opacity(0.4))\nHStack { ... }.background(Color.green.opacity(0.4))\n```\n\nIf the colored boxes show the layout you want but the controls still appear in the wrong place, the Form container is the culprit — not your alignment modifiers.\n\n## Fix 1: Restructure to put label and control on the same line\n\nPut the control **on the same line as the label** (not as a sibling of a tall VStack), and move the description to its own line below. With both items in the same `HStack`, there is no height mismatch and center alignment looks correct:\n\n```swift\n\u002F\u002F ✓ Label and control in the same HStack — always at the same height\nVStack(alignment: .leading, spacing: 4) {\n    HStack(alignment: .top) {\n        Text(label).font(...)\n        Spacer()\n        HStack(alignment: .center, spacing: 4) {\n            Text(modifier)\n            TextField(...)\n        }\n    }\n    Text(description).font(.caption).foregroundStyle(.secondary)\n}\n.padding(.vertical, 8)\n```\n\n## Fix 2: Replace Form with ScrollView + VStack (most reliable)\n\nWhen Fix 1 is insufficient (e.g. complex multi-row alignment), ditch `Form` entirely and use a plain `ScrollView + VStack`. Style the sections manually to match the grouped form appearance:\n\n```swift\nScrollView {\n    VStack(alignment: .leading, spacing: 20) {\n        \u002F\u002F Section\n        VStack(alignment: .leading, spacing: 6) {\n            Text(\"Section Header\")\n                .font(.footnote)\n                .foregroundStyle(.secondary)\n                .textCase(.uppercase)\n                .padding(.leading, 4)\n            VStack(spacing: 0) {\n                MyRow(...)\n                Divider().padding(.leading, 16)\n                MyRow(...)\n            }\n            .background(Color(NSColor.controlBackgroundColor))\n            .clipShape(RoundedRectangle(cornerRadius: 8))\n        }\n    }\n    .padding(20)\n}\n```\n\nEach `MyRow` owns its own horizontal padding (`.padding(.horizontal, 16)`) since Form no longer provides it.\n\nWithout `Form`, alignment modifiers work exactly as documented. `HStack(alignment: .top)` top-aligns all children. No surprises.\n\n## Form Background Control\n\n`Form { }.formStyle(.grouped)` fills the content area with its own background color, which differs from `NSColor.windowBackgroundColor`. To unify backgrounds across pages that mix Form and non-Form layouts:\n\n```swift\nScrollView {\n    Form { ... }\n    .formStyle(.grouped)\n    .scrollContentBackground(.hidden)  \u002F\u002F hides Form's internal scroll background\n}\n.background(Color(NSColor.windowBackgroundColor))  \u002F\u002F shows window background in the gap areas\n```\n\n`.scrollContentBackground(.hidden)` requires macOS 13+. It hides the scrollable view's background but leaves section cell backgrounds intact — sections appear as lighter cards on the darker window background.\n\n## When to Use Form vs VStack\n\n| Situation | Use |\n|-----------|-----|\n| Simple toggle\u002Fcheckbox rows | `Form` — center alignment looks fine when label ≈ control height |\n| Picker or segmented control rows | `Form` — controls are tall enough that centering is acceptable |\n| TextField rows where label top must align with field top | `VStack + ScrollView` |\n| Any row needing `.top` or `.firstTextBaseline` alignment | `VStack + ScrollView` |\n| Rows with multi-line descriptions AND right-side controls | `VStack + ScrollView` |\n",{"name":5,"description":7},"main","695fc2689b09e8c623d6a9a4fbf694bb21cf7965",".agents\u002Fskills\u002Fswiftui-macos-form-alignment",0,"https:\u002F\u002Fgithub.com\u002FJustinDFuller\u002Fagent-session-manager","https:\u002F\u002Fagent-session-manager.justindfuller.com\u002F","https:\u002F\u002Fgithub.com\u002FJustinDFuller","https:\u002F\u002Fwww.justindfuller.com","Some of my repos live at: https:\u002F\u002Fgithub.com\u002FJustinDFuller-org","2026-10-25 20:28:18",{"source":8,"skillName":5,"commands":53,"prompt":63,"zipAvailable":64},[54,57,60],{"tool":55,"command":56},"npx","npx skills add JustinDFuller\u002Fagent-session-manager --skill swiftui-macos-form-alignment",{"tool":58,"command":59},"bunx","bunx skills add JustinDFuller\u002Fagent-session-manager --skill swiftui-macos-form-alignment",{"tool":61,"command":62},"pnpm","pnpm dlx skills add JustinDFuller\u002Fagent-session-manager --skill swiftui-macos-form-alignment","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FJustinDFuller\u002Fagent-session-manager\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fswiftui-macos-form-alignment\u002FSKILL.md",true,[],[67,93,123,138,156,176],{"skillNo":68,"name":69,"nameZh":6,"description":70,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":71,"categories":72,"keywords":78,"publishedAt":37},"01M71SJ1DXFKKP8YGZ39N48MK5","workflow","Development workflow for this repo: plan → test → implement → human review → repeat. Load when starting any feature, bug fix, or refactor.","https:\u002F\u002Fgithub.com\u002FJustinDFuller\u002Fagent-session-manager\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fworkflow\u002FSKILL.md",[73],{"categoryNo":74,"categoryName":75,"taxonomyType":76,"taxonomyTypeDesc":77},"01JBSEEDCAT000000000000023","Skill与智能体开发","SCENARIO","使用场景",[69,79,80,81,82,83,27,25,84,85,86,87,88,89,90,32,91,92],"feature","development","for","repo","fix","development workflow","human review","implement","review","test","plan","human","bug fix","refactor",{"skillNo":94,"name":95,"nameZh":6,"description":96,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":97,"categories":98,"keywords":104,"publishedAt":37},"01M71SHYJYXTAJ84CJM481VWAQ","usernotifications-documentation","UserNotifications official doc index — load when building notification features, requesting authorization, scheduling local notifications, handling notification actions, or any UserNotifications framework behavior.","https:\u002F\u002Fgithub.com\u002FJustinDFuller\u002Fagent-session-manager\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fusernotifications-documentation\u002FSKILL.md",[99],{"categoryNo":100,"categoryName":101,"taxonomyType":102,"taxonomyTypeDesc":103},"01JBSEEDCAT000000000000030","开发工程师","PROFESSION","适用职业",[105,106,107,108,109,110,27,111,25,112,113,114,115,116,117,118,119,120,121,122],"usernotifications documentation","documentation","official","domain","actions","local","false","scheduling","notifications","apple","notification","webfetch","behavior","features","doc","index","authorization","developer",{"skillNo":124,"name":125,"nameZh":6,"description":126,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":127,"categories":128,"keywords":129,"publishedAt":37},"01M71SHT28R4D9JZANY5PR3966","swiftui-documentation","SwiftUI official doc index — load when building SwiftUI views, modifiers, state management, data flow, AppKit bridging, or any SwiftUI behavior.","https:\u002F\u002Fgithub.com\u002FJustinDFuller\u002Fagent-session-manager\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fswiftui-documentation\u002FSKILL.md",[],[20,106,130,131,107,108,132,27,111,25,133,114,134,116,135,117,136,119,137,120],"swiftui documentation","data flow","appkit","state","state management","bridging","flow","data",{"skillNo":139,"name":140,"nameZh":6,"description":141,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":142,"categories":143,"keywords":144,"publishedAt":37},"01M71SHQF5BMDV4YBZNT21VDZD","swifterm-documentation","SwiftTerm official doc index — load when building SwiftTerm features, terminal emulation, terminal views, process lifecycle, delegate callbacks, GPU rendering, pseudo-terminals, or any SwiftTerm-specific behavior. Any project that uses or interacts with SwiftTerm should load this skill.","https:\u002F\u002Fgithub.com\u002FJustinDFuller\u002Fagent-session-manager\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fswifterm-documentation\u002FSKILL.md",[],[106,145,146,107,147,148,111,25,149,150,118,151,152,119,108,153,27,35,154,155],"swifterm documentation","emulation","project","delegate","io","terminal","rendering","Callbacks","lifecycle","gpu","github",{"skillNo":157,"name":158,"nameZh":6,"description":159,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":160,"categories":161,"keywords":165,"publishedAt":37},"01M71SHM94G4SHFM7083Q85MVK","sqlite-documentation","SQLite official doc index — load when working with SQLite, the C\u002FC++ API, import SQLite3, prepared statements, binding, query execution, result codes, or any SQLite-specific behavior. Any project that uses or interacts with SQLite should load this skill.","https:\u002F\u002Fgithub.com\u002FJustinDFuller\u002Fagent-session-manager\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fsqlite-documentation\u002FSKILL.md",[162],{"categoryNo":163,"categoryName":164,"taxonomyType":76,"taxonomyTypeDesc":77},"01JBSEEDCAT000000000000010","后端与接口",[166,106,167,168,107,169,108,147,170,171,27,111,25,172,173,35,116,174,117,175],"sqlite","sqlite documentation","import","c++","execution","codes","query","api","result","binding",{"skillNo":177,"name":178,"nameZh":6,"description":179,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":180,"categories":181,"keywords":182,"publishedAt":37},"01M71SHJ43SX6DN3DYSZXFNHBZ","ship","Commit, push, ensure a PR exists, capture screenshots, and attach them to the PR.","https:\u002F\u002Fgithub.com\u002FJustinDFuller\u002Fagent-session-manager\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fship\u002FSKILL.md",[],[178,183,184,185,186,187,188],"attach","push","pr","capture","commit","screenshots"]