[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-openai-swiftui-patterns":3,"mdc--2a7l0v-key":39,"related-repo-openai-swiftui-patterns":1265,"related-org-openai-swiftui-patterns":1385},{"slug":4,"name":4,"fn":5,"description":6,"org":7,"tags":11,"stars":28,"repoUrl":29,"updatedAt":30,"license":31,"forks":32,"topics":33,"repo":34,"sourceUrl":37,"mdContent":38},"swiftui-patterns","apply native macOS SwiftUI patterns","Build macOS SwiftUI scenes and components with desktop patterns. Use when shaping windows, commands, toolbars, settings, split views, or inspectors.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},"openai","OpenAI","https:\u002F\u002Fpexgzepcugksgbtrxkhf.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Forg-logos\u002Fopenai.png",[12,16,19,22,25],{"name":13,"slug":14,"type":15},"SwiftUI","swiftui","tag",{"name":17,"slug":18,"type":15},"macOS","macos",{"name":20,"slug":21,"type":15},"Desktop","desktop",{"name":23,"slug":24,"type":15},"Frontend","frontend",{"name":26,"slug":27,"type":15},"Design","design",3992,"https:\u002F\u002Fgithub.com\u002Fopenai\u002Fplugins","2026-04-08T20:37:38.145354",null,465,[],{"repoUrl":29,"stars":28,"forks":32,"topics":35,"description":36},[],"OpenAI Plugins","https:\u002F\u002Fgithub.com\u002Fopenai\u002Fplugins\u002Ftree\u002FHEAD\u002Fplugins\u002Fbuild-macos-apps\u002Fskills\u002Fswiftui-patterns","---\nname: swiftui-patterns\ndescription: Build macOS SwiftUI scenes and components with desktop patterns. Use when shaping windows, commands, toolbars, settings, split views, or inspectors.\n---\n\n# SwiftUI Patterns\n\n## Quick Start\n\nChoose a track based on your goal:\n\n### Existing project\n\n- Identify the feature or scene and the primary interaction model: document, editor, sidebar-detail, utility window, settings, or menu bar extra.\n- Read the nearest existing scene or root view before inventing a new desktop structure.\n- Choose the relevant reference from `references\u002Fcomponents-index.md`.\n- If SwiftUI cannot express the required platform behavior cleanly, use the `appkit-interop` skill rather than forcing a shaky workaround.\n\n### New app scaffolding\n\n- Choose the scene model first: `WindowGroup`, `Window`, `Settings`, `MenuBarExtra`, or `DocumentGroup`.\n- If the app combines a normal main window and a `MenuBarExtra`, use `WindowGroup(..., id:)` for the primary window when it should appear at launch. Treat `Window(...)` as a better fit for auxiliary\u002Fon-demand singleton windows; in menu-bar-heavy apps, a `Window(...)` scene may not present the main window automatically at launch.\n- Before creating the scaffold, check whether the workspace is already inside a git repo with `git rev-parse --is-inside-work-tree`. If not, run `git init` at the project root so Codex app git-backed features are available from the start. Do not initialize a nested repo inside an existing parent checkout.\n- For a new app scaffold, also create one project-local `script\u002Fbuild_and_run.sh` and `.codex\u002Fenvironments\u002Fenvironment.toml` so the Codex app Run button works immediately. Use the exact bootstrap contract from `build-run-debug` and its `references\u002Frun-button-bootstrap.md` file rather than inventing a second variant here.\n- Decide which state is app-wide, scene-scoped, or window-scoped before writing views.\n- Sketch file and module boundaries before writing the full UI. For any non-trivial app, create the folder structure first and split files by responsibility from the start.\n- Use a single Swift file only for tiny throwaway examples or snippets: roughly under 50 lines, one screen, no persistence, no networking\u002Fprocess client, and no reusable models. Anything beyond that should be multi-file immediately.\n- Use system-adaptive colors and materials by default (`Color.primary`, `Color.secondary`, semantic foreground styles, `.regularMaterial`, etc.) so the app follows Light\u002FDark mode automatically. Do not hardcode white or light backgrounds unless the user explicitly asks for a fixed theme, and do not reach for opaque `windowBackgroundColor` fills for root panes by default.\n- Pick the references for the first feature surface you need: windowing, commands, split layouts, or settings.\n\n## New App File Structure\n\nFor any non-trivial macOS app, start with this shape instead of putting the app,\nall views, models, stores, services, and helpers in one Swift file:\n\n- `App\u002F\u003CAppName>App.swift`: the `@main` app type and `AppDelegate` only.\n- `Views\u002FContentView.swift`: root layout and high-level composition only.\n- `Views\u002FSidebarView.swift`, `Views\u002FDetailView.swift`, `Views\u002FComposerView.swift`, etc.: feature views named after their primary type.\n- `Models\u002F*.swift`: value models, identifiers, and selection enums.\n- `Stores\u002F*.swift`: persistence and state stores.\n- `Services\u002F*.swift`: app-server, network, process, or platform clients.\n- `Support\u002F*.swift`: small formatters, resolvers, extensions, and glue helpers.\n\nKeep files small and named after the primary type they contain. If a file starts\ncollecting unrelated views, models, stores, networking clients, and helper\nextensions, split it before adding more behavior.\n\n## Pre-Edit Checklist For New App Scaffolds\n\nBefore writing the full UI:\n\n1. Choose the scene model.\n2. Choose state ownership: app-wide, scene-scoped, window-scoped, or view-local.\n3. Sketch file and module boundaries.\n4. Create the folder structure before filling in the UI.\n5. Keep `script\u002Fbuild_and_run.sh` and `.codex\u002Fenvironments\u002Fenvironment.toml` separate from app source.\n\n## General Rules To Follow\n\n- Design for pointer, keyboard, menus, and multiple windows.\n- Keep scenes explicit. A separate settings window, utility window, or menu bar extra should be modeled as its own scene, not hidden inside one monolithic `ContentView`.\n- Prefer system desktop affordances: `commands`, toolbars, sidebars, inspectors, contextual menus, and `searchable`.\n- For menu bar apps, keep `MenuBarExtra` item titles and action labels short and scannable. Cap visible menu item text at 30 characters; if source content is longer, truncate or summarize it before rendering and open the full content in a dedicated window or detail surface.\n- If a `MenuBarExtra` app should still behave like a regular Dock app with a visible main window\u002Fprocess, install an `NSApplicationDelegate` via `@NSApplicationDelegateAdaptor`, call `NSApp.setActivationPolicy(.regular)` during launch, and activate the app with `NSApp.activate(ignoringOtherApps: true)`. If the app is intentionally menu-bar-only, document that `.accessory` \u002F no-Dock behavior is a deliberate product choice.\n- Prefer system-adaptive colors, materials, and semantic foreground styles. Avoid fixed white\u002Flight backgrounds in scaffolding and examples unless the requested design explicitly calls for a custom non-adaptive theme.\n- Do not paint `NavigationSplitView` sidebars or root window panes with opaque custom `Color(...)` or `Color(nsColor: .windowBackgroundColor)` fills by default. Prefer native macOS sidebar\u002Fwindow materials and system-provided backgrounds unless the user explicitly asks for a custom opaque surface. In sidebar-detail-inspector layouts, let the sidebar keep the standard source-list\u002Fmaterial appearance and reserve custom backgrounds for detail or inspector content cards where needed.\n- Use `@SceneStorage` for per-window ephemeral state and `@AppStorage` for durable user preferences.\n- Keep selection state explicit and stable. macOS layouts often pivot around sidebar selection rather than push navigation.\n- Prefer `NavigationSplitView` or a deliberate manual split layout over iOS-style stacked flows when the app benefits from always-visible structure.\n- For `List(...).listStyle(.sidebar)` and `NavigationSplitView` sidebars, prefer flat native rows with standard system selection\u002Fhighlight behavior. Keep rows visually lightweight and Mail-like: at most one leading icon, one strong title line, and one optional secondary detail line in `.secondary`. Avoid stacked metadata rows, repeated inline utility icons, or dense multi-column status text in the sidebar. Reserve card-style and metadata-heavy surfaces for detail or inspector panes unless the user explicitly asks for a highly custom sidebar treatment.\n- Keep primary actions discoverable from both UI chrome and keyboard shortcuts when appropriate.\n- Use SwiftUI-native scenes and views first. If you need low-level window, responder-chain, text system, or panel control, switch to `appkit-interop`.\n\nFor concrete sidebar row and split-view background examples, read\n`references\u002Fsplit-inspectors.md`.\n\n## State Ownership Summary\n\nUse the narrowest state tool that matches the ownership model:\n\n| Scenario | Preferred pattern |\n| --- | --- |\n| Local view or control state | `@State` |\n| Child mutates parent-owned value state | `@Binding` |\n| Root-owned reference model on macOS 14+ | `@State` with an `@Observable` type |\n| Child reads or mutates an injected `@Observable` model | Pass it explicitly as a stored property |\n| Window-scoped ephemeral selection or expansion state | `@SceneStorage` when practical, otherwise scene-owned `@State` |\n| Shared user preference | `@AppStorage` |\n| Shared app service or configuration | `@Environment(Type.self)` |\n| Legacy reference model on older targets | `@StateObject` at the owner and `@ObservedObject` when injected |\n\nChoose the ownership location first, then the wrapper. Do not turn simple desktop state into a view model by reflex.\n\n## Cross-Cutting References\n\n- `references\u002Fcomponents-index.md`: entry point for scene and component guidance.\n- `references\u002Fwindowing.md`: choosing between `WindowGroup`, `Window`, `DocumentGroup`, and window-opening patterns.\n- `references\u002Fsettings.md`: dedicated settings scenes, `SettingsLink`, and preference layouts.\n- `references\u002Fcommands-menus.md`: command menus, keyboard shortcuts, focused values, and desktop action routing.\n- `references\u002Fsplit-inspectors.md`: sidebars, split views, selection-driven layout, and inspectors.\n- `references\u002Fmenu-bar-extra.md`: menu bar extra structure and when it fits.\n\n## Anti-Patterns\n\n- One huge `ContentView` pretending the whole app is a single screen.\n- A single Swift file containing the `@main` app, all views, models, stores, networking\u002Fprocess clients, formatters, and extensions. This is acceptable only for tiny throwaway snippets under the new-app threshold above.\n- Touch-first interaction models ported directly from iOS without desktop affordances.\n- Hiding core actions behind gestures with no menu, toolbar, or keyboard path.\n- Building a menu-bar-plus-window app around only a `Window(...)` scene and then expecting the main window to appear at launch. Use `WindowGroup(..., id:)` for the primary launch window and reserve `Window(...)` for auxiliary\u002Fon-demand windows.\n- Rendering full unbounded document titles, prompts, or message text directly inside a menu bar extra. Menu item labels should stay at or below 30 characters, with longer content moved into a dedicated window or detail view.\n- Treating settings as another navigation destination in the main content window.\n- Hardcoding `.background(.white)`, `Color.white`, or a fixed light palette in a brand-new scaffold without an explicit design requirement.\n- Wrapping each sidebar item in large rounded custom cards inside a `.sidebar` list, which fights native source-list density, alignment, and selection behavior unless the user explicitly asked for a bespoke visual sidebar.\n- Building sidebar rows with multiple repeated icons, three or more text lines, or a dense strip of inline metadata counters\u002Ftimestamps\u002Fmodels. Keep the sidebar row to one icon and one or two text lines, then move richer metadata into the detail pane.\n- Painting `NavigationSplitView` sidebars or root window panes with opaque custom color fills by default, instead of letting the sidebar use native source-list\u002Fmaterial appearance and reserving custom backgrounds for actual content cards.\n- Using push navigation for layouts that want stable sidebar selection and detail panes.\n- Reaching for AppKit before the SwiftUI scene and command APIs have been used properly.\n\n## Workflow For A New macOS Scene Or View\n\n1. Define the scene type and ownership model before writing child views.\n2. Decide which actions live in content, toolbars, commands, inspectors, or settings.\n3. Sketch the selection model and layout: sidebar-detail, editor-inspector, document window, or utility window.\n4. Create the file\u002Ffolder structure for app entrypoint, root layout, feature views, models, stores, services, and support helpers.\n5. Build with small, focused subviews and explicit inputs rather than giant computed fragments.\n6. Add keyboard shortcuts and menu or toolbar exposure for actions that matter on desktop.\n7. Validate the flow with a build and a quick usability pass: multiwindow assumptions, settings entry points, and selection stability.\n\n## Component References\n\nUse `references\u002Fcomponents-index.md` as the entry point. Each component reference should include:\n- intent and best-fit scenarios\n- minimal usage pattern with desktop conventions\n- pitfalls and discoverability notes\n- when to fall back to `appkit-interop`\n",{"data":40,"body":41},{"name":4,"description":6},{"type":42,"children":43},"root",[44,52,59,65,72,114,120,314,320,325,435,440,446,451,493,499,718,730,736,741,932,937,943,1037,1043,1176,1182,1220,1226,1237],{"type":45,"tag":46,"props":47,"children":48},"element","h1",{"id":4},[49],{"type":50,"value":51},"text","SwiftUI Patterns",{"type":45,"tag":53,"props":54,"children":56},"h2",{"id":55},"quick-start",[57],{"type":50,"value":58},"Quick Start",{"type":45,"tag":60,"props":61,"children":62},"p",{},[63],{"type":50,"value":64},"Choose a track based on your goal:",{"type":45,"tag":66,"props":67,"children":69},"h3",{"id":68},"existing-project",[70],{"type":50,"value":71},"Existing project",{"type":45,"tag":73,"props":74,"children":75},"ul",{},[76,82,87,101],{"type":45,"tag":77,"props":78,"children":79},"li",{},[80],{"type":50,"value":81},"Identify the feature or scene and the primary interaction model: document, editor, sidebar-detail, utility window, settings, or menu bar extra.",{"type":45,"tag":77,"props":83,"children":84},{},[85],{"type":50,"value":86},"Read the nearest existing scene or root view before inventing a new desktop structure.",{"type":45,"tag":77,"props":88,"children":89},{},[90,92,99],{"type":50,"value":91},"Choose the relevant reference from ",{"type":45,"tag":93,"props":94,"children":96},"code",{"className":95},[],[97],{"type":50,"value":98},"references\u002Fcomponents-index.md",{"type":50,"value":100},".",{"type":45,"tag":77,"props":102,"children":103},{},[104,106,112],{"type":50,"value":105},"If SwiftUI cannot express the required platform behavior cleanly, use the ",{"type":45,"tag":93,"props":107,"children":109},{"className":108},[],[110],{"type":50,"value":111},"appkit-interop",{"type":50,"value":113}," skill rather than forcing a shaky workaround.",{"type":45,"tag":66,"props":115,"children":117},{"id":116},"new-app-scaffolding",[118],{"type":50,"value":119},"New app scaffolding",{"type":45,"tag":73,"props":121,"children":122},{},[123,165,200,221,258,263,268,273,309],{"type":45,"tag":77,"props":124,"children":125},{},[126,128,134,136,142,143,149,150,156,158,164],{"type":50,"value":127},"Choose the scene model first: ",{"type":45,"tag":93,"props":129,"children":131},{"className":130},[],[132],{"type":50,"value":133},"WindowGroup",{"type":50,"value":135},", ",{"type":45,"tag":93,"props":137,"children":139},{"className":138},[],[140],{"type":50,"value":141},"Window",{"type":50,"value":135},{"type":45,"tag":93,"props":144,"children":146},{"className":145},[],[147],{"type":50,"value":148},"Settings",{"type":50,"value":135},{"type":45,"tag":93,"props":151,"children":153},{"className":152},[],[154],{"type":50,"value":155},"MenuBarExtra",{"type":50,"value":157},", or ",{"type":45,"tag":93,"props":159,"children":161},{"className":160},[],[162],{"type":50,"value":163},"DocumentGroup",{"type":50,"value":100},{"type":45,"tag":77,"props":166,"children":167},{},[168,170,175,177,183,185,191,193,198],{"type":50,"value":169},"If the app combines a normal main window and a ",{"type":45,"tag":93,"props":171,"children":173},{"className":172},[],[174],{"type":50,"value":155},{"type":50,"value":176},", use ",{"type":45,"tag":93,"props":178,"children":180},{"className":179},[],[181],{"type":50,"value":182},"WindowGroup(..., id:)",{"type":50,"value":184}," for the primary window when it should appear at launch. Treat ",{"type":45,"tag":93,"props":186,"children":188},{"className":187},[],[189],{"type":50,"value":190},"Window(...)",{"type":50,"value":192}," as a better fit for auxiliary\u002Fon-demand singleton windows; in menu-bar-heavy apps, a ",{"type":45,"tag":93,"props":194,"children":196},{"className":195},[],[197],{"type":50,"value":190},{"type":50,"value":199}," scene may not present the main window automatically at launch.",{"type":45,"tag":77,"props":201,"children":202},{},[203,205,211,213,219],{"type":50,"value":204},"Before creating the scaffold, check whether the workspace is already inside a git repo with ",{"type":45,"tag":93,"props":206,"children":208},{"className":207},[],[209],{"type":50,"value":210},"git rev-parse --is-inside-work-tree",{"type":50,"value":212},". If not, run ",{"type":45,"tag":93,"props":214,"children":216},{"className":215},[],[217],{"type":50,"value":218},"git init",{"type":50,"value":220}," at the project root so Codex app git-backed features are available from the start. Do not initialize a nested repo inside an existing parent checkout.",{"type":45,"tag":77,"props":222,"children":223},{},[224,226,232,234,240,242,248,250,256],{"type":50,"value":225},"For a new app scaffold, also create one project-local ",{"type":45,"tag":93,"props":227,"children":229},{"className":228},[],[230],{"type":50,"value":231},"script\u002Fbuild_and_run.sh",{"type":50,"value":233}," and ",{"type":45,"tag":93,"props":235,"children":237},{"className":236},[],[238],{"type":50,"value":239},".codex\u002Fenvironments\u002Fenvironment.toml",{"type":50,"value":241}," so the Codex app Run button works immediately. Use the exact bootstrap contract from ",{"type":45,"tag":93,"props":243,"children":245},{"className":244},[],[246],{"type":50,"value":247},"build-run-debug",{"type":50,"value":249}," and its ",{"type":45,"tag":93,"props":251,"children":253},{"className":252},[],[254],{"type":50,"value":255},"references\u002Frun-button-bootstrap.md",{"type":50,"value":257}," file rather than inventing a second variant here.",{"type":45,"tag":77,"props":259,"children":260},{},[261],{"type":50,"value":262},"Decide which state is app-wide, scene-scoped, or window-scoped before writing views.",{"type":45,"tag":77,"props":264,"children":265},{},[266],{"type":50,"value":267},"Sketch file and module boundaries before writing the full UI. For any non-trivial app, create the folder structure first and split files by responsibility from the start.",{"type":45,"tag":77,"props":269,"children":270},{},[271],{"type":50,"value":272},"Use a single Swift file only for tiny throwaway examples or snippets: roughly under 50 lines, one screen, no persistence, no networking\u002Fprocess client, and no reusable models. Anything beyond that should be multi-file immediately.",{"type":45,"tag":77,"props":274,"children":275},{},[276,278,284,285,291,293,299,301,307],{"type":50,"value":277},"Use system-adaptive colors and materials by default (",{"type":45,"tag":93,"props":279,"children":281},{"className":280},[],[282],{"type":50,"value":283},"Color.primary",{"type":50,"value":135},{"type":45,"tag":93,"props":286,"children":288},{"className":287},[],[289],{"type":50,"value":290},"Color.secondary",{"type":50,"value":292},", semantic foreground styles, ",{"type":45,"tag":93,"props":294,"children":296},{"className":295},[],[297],{"type":50,"value":298},".regularMaterial",{"type":50,"value":300},", etc.) so the app follows Light\u002FDark mode automatically. Do not hardcode white or light backgrounds unless the user explicitly asks for a fixed theme, and do not reach for opaque ",{"type":45,"tag":93,"props":302,"children":304},{"className":303},[],[305],{"type":50,"value":306},"windowBackgroundColor",{"type":50,"value":308}," fills for root panes by default.",{"type":45,"tag":77,"props":310,"children":311},{},[312],{"type":50,"value":313},"Pick the references for the first feature surface you need: windowing, commands, split layouts, or settings.",{"type":45,"tag":53,"props":315,"children":317},{"id":316},"new-app-file-structure",[318],{"type":50,"value":319},"New App File Structure",{"type":45,"tag":60,"props":321,"children":322},{},[323],{"type":50,"value":324},"For any non-trivial macOS app, start with this shape instead of putting the app,\nall views, models, stores, services, and helpers in one Swift file:",{"type":45,"tag":73,"props":326,"children":327},{},[328,355,366,391,402,413,424],{"type":45,"tag":77,"props":329,"children":330},{},[331,337,339,345,347,353],{"type":45,"tag":93,"props":332,"children":334},{"className":333},[],[335],{"type":50,"value":336},"App\u002F\u003CAppName>App.swift",{"type":50,"value":338},": the ",{"type":45,"tag":93,"props":340,"children":342},{"className":341},[],[343],{"type":50,"value":344},"@main",{"type":50,"value":346}," app type and ",{"type":45,"tag":93,"props":348,"children":350},{"className":349},[],[351],{"type":50,"value":352},"AppDelegate",{"type":50,"value":354}," only.",{"type":45,"tag":77,"props":356,"children":357},{},[358,364],{"type":45,"tag":93,"props":359,"children":361},{"className":360},[],[362],{"type":50,"value":363},"Views\u002FContentView.swift",{"type":50,"value":365},": root layout and high-level composition only.",{"type":45,"tag":77,"props":367,"children":368},{},[369,375,376,382,383,389],{"type":45,"tag":93,"props":370,"children":372},{"className":371},[],[373],{"type":50,"value":374},"Views\u002FSidebarView.swift",{"type":50,"value":135},{"type":45,"tag":93,"props":377,"children":379},{"className":378},[],[380],{"type":50,"value":381},"Views\u002FDetailView.swift",{"type":50,"value":135},{"type":45,"tag":93,"props":384,"children":386},{"className":385},[],[387],{"type":50,"value":388},"Views\u002FComposerView.swift",{"type":50,"value":390},", etc.: feature views named after their primary type.",{"type":45,"tag":77,"props":392,"children":393},{},[394,400],{"type":45,"tag":93,"props":395,"children":397},{"className":396},[],[398],{"type":50,"value":399},"Models\u002F*.swift",{"type":50,"value":401},": value models, identifiers, and selection enums.",{"type":45,"tag":77,"props":403,"children":404},{},[405,411],{"type":45,"tag":93,"props":406,"children":408},{"className":407},[],[409],{"type":50,"value":410},"Stores\u002F*.swift",{"type":50,"value":412},": persistence and state stores.",{"type":45,"tag":77,"props":414,"children":415},{},[416,422],{"type":45,"tag":93,"props":417,"children":419},{"className":418},[],[420],{"type":50,"value":421},"Services\u002F*.swift",{"type":50,"value":423},": app-server, network, process, or platform clients.",{"type":45,"tag":77,"props":425,"children":426},{},[427,433],{"type":45,"tag":93,"props":428,"children":430},{"className":429},[],[431],{"type":50,"value":432},"Support\u002F*.swift",{"type":50,"value":434},": small formatters, resolvers, extensions, and glue helpers.",{"type":45,"tag":60,"props":436,"children":437},{},[438],{"type":50,"value":439},"Keep files small and named after the primary type they contain. If a file starts\ncollecting unrelated views, models, stores, networking clients, and helper\nextensions, split it before adding more behavior.",{"type":45,"tag":53,"props":441,"children":443},{"id":442},"pre-edit-checklist-for-new-app-scaffolds",[444],{"type":50,"value":445},"Pre-Edit Checklist For New App Scaffolds",{"type":45,"tag":60,"props":447,"children":448},{},[449],{"type":50,"value":450},"Before writing the full UI:",{"type":45,"tag":452,"props":453,"children":454},"ol",{},[455,460,465,470,475],{"type":45,"tag":77,"props":456,"children":457},{},[458],{"type":50,"value":459},"Choose the scene model.",{"type":45,"tag":77,"props":461,"children":462},{},[463],{"type":50,"value":464},"Choose state ownership: app-wide, scene-scoped, window-scoped, or view-local.",{"type":45,"tag":77,"props":466,"children":467},{},[468],{"type":50,"value":469},"Sketch file and module boundaries.",{"type":45,"tag":77,"props":471,"children":472},{},[473],{"type":50,"value":474},"Create the folder structure before filling in the UI.",{"type":45,"tag":77,"props":476,"children":477},{},[478,480,485,486,491],{"type":50,"value":479},"Keep ",{"type":45,"tag":93,"props":481,"children":483},{"className":482},[],[484],{"type":50,"value":231},{"type":50,"value":233},{"type":45,"tag":93,"props":487,"children":489},{"className":488},[],[490],{"type":50,"value":239},{"type":50,"value":492}," separate from app source.",{"type":45,"tag":53,"props":494,"children":496},{"id":495},"general-rules-to-follow",[497],{"type":50,"value":498},"General Rules To Follow",{"type":45,"tag":73,"props":500,"children":501},{},[502,507,519,539,551,603,608,637,658,663,675,702,707],{"type":45,"tag":77,"props":503,"children":504},{},[505],{"type":50,"value":506},"Design for pointer, keyboard, menus, and multiple windows.",{"type":45,"tag":77,"props":508,"children":509},{},[510,512,518],{"type":50,"value":511},"Keep scenes explicit. A separate settings window, utility window, or menu bar extra should be modeled as its own scene, not hidden inside one monolithic ",{"type":45,"tag":93,"props":513,"children":515},{"className":514},[],[516],{"type":50,"value":517},"ContentView",{"type":50,"value":100},{"type":45,"tag":77,"props":520,"children":521},{},[522,524,530,532,538],{"type":50,"value":523},"Prefer system desktop affordances: ",{"type":45,"tag":93,"props":525,"children":527},{"className":526},[],[528],{"type":50,"value":529},"commands",{"type":50,"value":531},", toolbars, sidebars, inspectors, contextual menus, and ",{"type":45,"tag":93,"props":533,"children":535},{"className":534},[],[536],{"type":50,"value":537},"searchable",{"type":50,"value":100},{"type":45,"tag":77,"props":540,"children":541},{},[542,544,549],{"type":50,"value":543},"For menu bar apps, keep ",{"type":45,"tag":93,"props":545,"children":547},{"className":546},[],[548],{"type":50,"value":155},{"type":50,"value":550}," item titles and action labels short and scannable. Cap visible menu item text at 30 characters; if source content is longer, truncate or summarize it before rendering and open the full content in a dedicated window or detail surface.",{"type":45,"tag":77,"props":552,"children":553},{},[554,556,561,563,569,571,577,579,585,587,593,595,601],{"type":50,"value":555},"If a ",{"type":45,"tag":93,"props":557,"children":559},{"className":558},[],[560],{"type":50,"value":155},{"type":50,"value":562}," app should still behave like a regular Dock app with a visible main window\u002Fprocess, install an ",{"type":45,"tag":93,"props":564,"children":566},{"className":565},[],[567],{"type":50,"value":568},"NSApplicationDelegate",{"type":50,"value":570}," via ",{"type":45,"tag":93,"props":572,"children":574},{"className":573},[],[575],{"type":50,"value":576},"@NSApplicationDelegateAdaptor",{"type":50,"value":578},", call ",{"type":45,"tag":93,"props":580,"children":582},{"className":581},[],[583],{"type":50,"value":584},"NSApp.setActivationPolicy(.regular)",{"type":50,"value":586}," during launch, and activate the app with ",{"type":45,"tag":93,"props":588,"children":590},{"className":589},[],[591],{"type":50,"value":592},"NSApp.activate(ignoringOtherApps: true)",{"type":50,"value":594},". If the app is intentionally menu-bar-only, document that ",{"type":45,"tag":93,"props":596,"children":598},{"className":597},[],[599],{"type":50,"value":600},".accessory",{"type":50,"value":602}," \u002F no-Dock behavior is a deliberate product choice.",{"type":45,"tag":77,"props":604,"children":605},{},[606],{"type":50,"value":607},"Prefer system-adaptive colors, materials, and semantic foreground styles. Avoid fixed white\u002Flight backgrounds in scaffolding and examples unless the requested design explicitly calls for a custom non-adaptive theme.",{"type":45,"tag":77,"props":609,"children":610},{},[611,613,619,621,627,629,635],{"type":50,"value":612},"Do not paint ",{"type":45,"tag":93,"props":614,"children":616},{"className":615},[],[617],{"type":50,"value":618},"NavigationSplitView",{"type":50,"value":620}," sidebars or root window panes with opaque custom ",{"type":45,"tag":93,"props":622,"children":624},{"className":623},[],[625],{"type":50,"value":626},"Color(...)",{"type":50,"value":628}," or ",{"type":45,"tag":93,"props":630,"children":632},{"className":631},[],[633],{"type":50,"value":634},"Color(nsColor: .windowBackgroundColor)",{"type":50,"value":636}," fills by default. Prefer native macOS sidebar\u002Fwindow materials and system-provided backgrounds unless the user explicitly asks for a custom opaque surface. In sidebar-detail-inspector layouts, let the sidebar keep the standard source-list\u002Fmaterial appearance and reserve custom backgrounds for detail or inspector content cards where needed.",{"type":45,"tag":77,"props":638,"children":639},{},[640,642,648,650,656],{"type":50,"value":641},"Use ",{"type":45,"tag":93,"props":643,"children":645},{"className":644},[],[646],{"type":50,"value":647},"@SceneStorage",{"type":50,"value":649}," for per-window ephemeral state and ",{"type":45,"tag":93,"props":651,"children":653},{"className":652},[],[654],{"type":50,"value":655},"@AppStorage",{"type":50,"value":657}," for durable user preferences.",{"type":45,"tag":77,"props":659,"children":660},{},[661],{"type":50,"value":662},"Keep selection state explicit and stable. macOS layouts often pivot around sidebar selection rather than push navigation.",{"type":45,"tag":77,"props":664,"children":665},{},[666,668,673],{"type":50,"value":667},"Prefer ",{"type":45,"tag":93,"props":669,"children":671},{"className":670},[],[672],{"type":50,"value":618},{"type":50,"value":674}," or a deliberate manual split layout over iOS-style stacked flows when the app benefits from always-visible structure.",{"type":45,"tag":77,"props":676,"children":677},{},[678,680,686,687,692,694,700],{"type":50,"value":679},"For ",{"type":45,"tag":93,"props":681,"children":683},{"className":682},[],[684],{"type":50,"value":685},"List(...).listStyle(.sidebar)",{"type":50,"value":233},{"type":45,"tag":93,"props":688,"children":690},{"className":689},[],[691],{"type":50,"value":618},{"type":50,"value":693}," sidebars, prefer flat native rows with standard system selection\u002Fhighlight behavior. Keep rows visually lightweight and Mail-like: at most one leading icon, one strong title line, and one optional secondary detail line in ",{"type":45,"tag":93,"props":695,"children":697},{"className":696},[],[698],{"type":50,"value":699},".secondary",{"type":50,"value":701},". Avoid stacked metadata rows, repeated inline utility icons, or dense multi-column status text in the sidebar. Reserve card-style and metadata-heavy surfaces for detail or inspector panes unless the user explicitly asks for a highly custom sidebar treatment.",{"type":45,"tag":77,"props":703,"children":704},{},[705],{"type":50,"value":706},"Keep primary actions discoverable from both UI chrome and keyboard shortcuts when appropriate.",{"type":45,"tag":77,"props":708,"children":709},{},[710,712,717],{"type":50,"value":711},"Use SwiftUI-native scenes and views first. If you need low-level window, responder-chain, text system, or panel control, switch to ",{"type":45,"tag":93,"props":713,"children":715},{"className":714},[],[716],{"type":50,"value":111},{"type":50,"value":100},{"type":45,"tag":60,"props":719,"children":720},{},[721,723,729],{"type":50,"value":722},"For concrete sidebar row and split-view background examples, read\n",{"type":45,"tag":93,"props":724,"children":726},{"className":725},[],[727],{"type":50,"value":728},"references\u002Fsplit-inspectors.md",{"type":50,"value":100},{"type":45,"tag":53,"props":731,"children":733},{"id":732},"state-ownership-summary",[734],{"type":50,"value":735},"State Ownership Summary",{"type":45,"tag":60,"props":737,"children":738},{},[739],{"type":50,"value":740},"Use the narrowest state tool that matches the ownership model:",{"type":45,"tag":742,"props":743,"children":744},"table",{},[745,764],{"type":45,"tag":746,"props":747,"children":748},"thead",{},[749],{"type":45,"tag":750,"props":751,"children":752},"tr",{},[753,759],{"type":45,"tag":754,"props":755,"children":756},"th",{},[757],{"type":50,"value":758},"Scenario",{"type":45,"tag":754,"props":760,"children":761},{},[762],{"type":50,"value":763},"Preferred pattern",{"type":45,"tag":765,"props":766,"children":767},"tbody",{},[768,786,803,829,849,872,888,905],{"type":45,"tag":750,"props":769,"children":770},{},[771,777],{"type":45,"tag":772,"props":773,"children":774},"td",{},[775],{"type":50,"value":776},"Local view or control state",{"type":45,"tag":772,"props":778,"children":779},{},[780],{"type":45,"tag":93,"props":781,"children":783},{"className":782},[],[784],{"type":50,"value":785},"@State",{"type":45,"tag":750,"props":787,"children":788},{},[789,794],{"type":45,"tag":772,"props":790,"children":791},{},[792],{"type":50,"value":793},"Child mutates parent-owned value state",{"type":45,"tag":772,"props":795,"children":796},{},[797],{"type":45,"tag":93,"props":798,"children":800},{"className":799},[],[801],{"type":50,"value":802},"@Binding",{"type":45,"tag":750,"props":804,"children":805},{},[806,811],{"type":45,"tag":772,"props":807,"children":808},{},[809],{"type":50,"value":810},"Root-owned reference model on macOS 14+",{"type":45,"tag":772,"props":812,"children":813},{},[814,819,821,827],{"type":45,"tag":93,"props":815,"children":817},{"className":816},[],[818],{"type":50,"value":785},{"type":50,"value":820}," with an ",{"type":45,"tag":93,"props":822,"children":824},{"className":823},[],[825],{"type":50,"value":826},"@Observable",{"type":50,"value":828}," type",{"type":45,"tag":750,"props":830,"children":831},{},[832,844],{"type":45,"tag":772,"props":833,"children":834},{},[835,837,842],{"type":50,"value":836},"Child reads or mutates an injected ",{"type":45,"tag":93,"props":838,"children":840},{"className":839},[],[841],{"type":50,"value":826},{"type":50,"value":843}," model",{"type":45,"tag":772,"props":845,"children":846},{},[847],{"type":50,"value":848},"Pass it explicitly as a stored property",{"type":45,"tag":750,"props":850,"children":851},{},[852,857],{"type":45,"tag":772,"props":853,"children":854},{},[855],{"type":50,"value":856},"Window-scoped ephemeral selection or expansion state",{"type":45,"tag":772,"props":858,"children":859},{},[860,865,867],{"type":45,"tag":93,"props":861,"children":863},{"className":862},[],[864],{"type":50,"value":647},{"type":50,"value":866}," when practical, otherwise scene-owned ",{"type":45,"tag":93,"props":868,"children":870},{"className":869},[],[871],{"type":50,"value":785},{"type":45,"tag":750,"props":873,"children":874},{},[875,880],{"type":45,"tag":772,"props":876,"children":877},{},[878],{"type":50,"value":879},"Shared user preference",{"type":45,"tag":772,"props":881,"children":882},{},[883],{"type":45,"tag":93,"props":884,"children":886},{"className":885},[],[887],{"type":50,"value":655},{"type":45,"tag":750,"props":889,"children":890},{},[891,896],{"type":45,"tag":772,"props":892,"children":893},{},[894],{"type":50,"value":895},"Shared app service or configuration",{"type":45,"tag":772,"props":897,"children":898},{},[899],{"type":45,"tag":93,"props":900,"children":902},{"className":901},[],[903],{"type":50,"value":904},"@Environment(Type.self)",{"type":45,"tag":750,"props":906,"children":907},{},[908,913],{"type":45,"tag":772,"props":909,"children":910},{},[911],{"type":50,"value":912},"Legacy reference model on older targets",{"type":45,"tag":772,"props":914,"children":915},{},[916,922,924,930],{"type":45,"tag":93,"props":917,"children":919},{"className":918},[],[920],{"type":50,"value":921},"@StateObject",{"type":50,"value":923}," at the owner and ",{"type":45,"tag":93,"props":925,"children":927},{"className":926},[],[928],{"type":50,"value":929},"@ObservedObject",{"type":50,"value":931}," when injected",{"type":45,"tag":60,"props":933,"children":934},{},[935],{"type":50,"value":936},"Choose the ownership location first, then the wrapper. Do not turn simple desktop state into a view model by reflex.",{"type":45,"tag":53,"props":938,"children":940},{"id":939},"cross-cutting-references",[941],{"type":50,"value":942},"Cross-Cutting References",{"type":45,"tag":73,"props":944,"children":945},{},[946,956,986,1005,1016,1026],{"type":45,"tag":77,"props":947,"children":948},{},[949,954],{"type":45,"tag":93,"props":950,"children":952},{"className":951},[],[953],{"type":50,"value":98},{"type":50,"value":955},": entry point for scene and component guidance.",{"type":45,"tag":77,"props":957,"children":958},{},[959,965,967,972,973,978,979,984],{"type":45,"tag":93,"props":960,"children":962},{"className":961},[],[963],{"type":50,"value":964},"references\u002Fwindowing.md",{"type":50,"value":966},": choosing between ",{"type":45,"tag":93,"props":968,"children":970},{"className":969},[],[971],{"type":50,"value":133},{"type":50,"value":135},{"type":45,"tag":93,"props":974,"children":976},{"className":975},[],[977],{"type":50,"value":141},{"type":50,"value":135},{"type":45,"tag":93,"props":980,"children":982},{"className":981},[],[983],{"type":50,"value":163},{"type":50,"value":985},", and window-opening patterns.",{"type":45,"tag":77,"props":987,"children":988},{},[989,995,997,1003],{"type":45,"tag":93,"props":990,"children":992},{"className":991},[],[993],{"type":50,"value":994},"references\u002Fsettings.md",{"type":50,"value":996},": dedicated settings scenes, ",{"type":45,"tag":93,"props":998,"children":1000},{"className":999},[],[1001],{"type":50,"value":1002},"SettingsLink",{"type":50,"value":1004},", and preference layouts.",{"type":45,"tag":77,"props":1006,"children":1007},{},[1008,1014],{"type":45,"tag":93,"props":1009,"children":1011},{"className":1010},[],[1012],{"type":50,"value":1013},"references\u002Fcommands-menus.md",{"type":50,"value":1015},": command menus, keyboard shortcuts, focused values, and desktop action routing.",{"type":45,"tag":77,"props":1017,"children":1018},{},[1019,1024],{"type":45,"tag":93,"props":1020,"children":1022},{"className":1021},[],[1023],{"type":50,"value":728},{"type":50,"value":1025},": sidebars, split views, selection-driven layout, and inspectors.",{"type":45,"tag":77,"props":1027,"children":1028},{},[1029,1035],{"type":45,"tag":93,"props":1030,"children":1032},{"className":1031},[],[1033],{"type":50,"value":1034},"references\u002Fmenu-bar-extra.md",{"type":50,"value":1036},": menu bar extra structure and when it fits.",{"type":45,"tag":53,"props":1038,"children":1040},{"id":1039},"anti-patterns",[1041],{"type":50,"value":1042},"Anti-Patterns",{"type":45,"tag":73,"props":1044,"children":1045},{},[1046,1058,1070,1075,1080,1106,1111,1116,1136,1149,1154,1166,1171],{"type":45,"tag":77,"props":1047,"children":1048},{},[1049,1051,1056],{"type":50,"value":1050},"One huge ",{"type":45,"tag":93,"props":1052,"children":1054},{"className":1053},[],[1055],{"type":50,"value":517},{"type":50,"value":1057}," pretending the whole app is a single screen.",{"type":45,"tag":77,"props":1059,"children":1060},{},[1061,1063,1068],{"type":50,"value":1062},"A single Swift file containing the ",{"type":45,"tag":93,"props":1064,"children":1066},{"className":1065},[],[1067],{"type":50,"value":344},{"type":50,"value":1069}," app, all views, models, stores, networking\u002Fprocess clients, formatters, and extensions. This is acceptable only for tiny throwaway snippets under the new-app threshold above.",{"type":45,"tag":77,"props":1071,"children":1072},{},[1073],{"type":50,"value":1074},"Touch-first interaction models ported directly from iOS without desktop affordances.",{"type":45,"tag":77,"props":1076,"children":1077},{},[1078],{"type":50,"value":1079},"Hiding core actions behind gestures with no menu, toolbar, or keyboard path.",{"type":45,"tag":77,"props":1081,"children":1082},{},[1083,1085,1090,1092,1097,1099,1104],{"type":50,"value":1084},"Building a menu-bar-plus-window app around only a ",{"type":45,"tag":93,"props":1086,"children":1088},{"className":1087},[],[1089],{"type":50,"value":190},{"type":50,"value":1091}," scene and then expecting the main window to appear at launch. Use ",{"type":45,"tag":93,"props":1093,"children":1095},{"className":1094},[],[1096],{"type":50,"value":182},{"type":50,"value":1098}," for the primary launch window and reserve ",{"type":45,"tag":93,"props":1100,"children":1102},{"className":1101},[],[1103],{"type":50,"value":190},{"type":50,"value":1105}," for auxiliary\u002Fon-demand windows.",{"type":45,"tag":77,"props":1107,"children":1108},{},[1109],{"type":50,"value":1110},"Rendering full unbounded document titles, prompts, or message text directly inside a menu bar extra. Menu item labels should stay at or below 30 characters, with longer content moved into a dedicated window or detail view.",{"type":45,"tag":77,"props":1112,"children":1113},{},[1114],{"type":50,"value":1115},"Treating settings as another navigation destination in the main content window.",{"type":45,"tag":77,"props":1117,"children":1118},{},[1119,1121,1127,1128,1134],{"type":50,"value":1120},"Hardcoding ",{"type":45,"tag":93,"props":1122,"children":1124},{"className":1123},[],[1125],{"type":50,"value":1126},".background(.white)",{"type":50,"value":135},{"type":45,"tag":93,"props":1129,"children":1131},{"className":1130},[],[1132],{"type":50,"value":1133},"Color.white",{"type":50,"value":1135},", or a fixed light palette in a brand-new scaffold without an explicit design requirement.",{"type":45,"tag":77,"props":1137,"children":1138},{},[1139,1141,1147],{"type":50,"value":1140},"Wrapping each sidebar item in large rounded custom cards inside a ",{"type":45,"tag":93,"props":1142,"children":1144},{"className":1143},[],[1145],{"type":50,"value":1146},".sidebar",{"type":50,"value":1148}," list, which fights native source-list density, alignment, and selection behavior unless the user explicitly asked for a bespoke visual sidebar.",{"type":45,"tag":77,"props":1150,"children":1151},{},[1152],{"type":50,"value":1153},"Building sidebar rows with multiple repeated icons, three or more text lines, or a dense strip of inline metadata counters\u002Ftimestamps\u002Fmodels. Keep the sidebar row to one icon and one or two text lines, then move richer metadata into the detail pane.",{"type":45,"tag":77,"props":1155,"children":1156},{},[1157,1159,1164],{"type":50,"value":1158},"Painting ",{"type":45,"tag":93,"props":1160,"children":1162},{"className":1161},[],[1163],{"type":50,"value":618},{"type":50,"value":1165}," sidebars or root window panes with opaque custom color fills by default, instead of letting the sidebar use native source-list\u002Fmaterial appearance and reserving custom backgrounds for actual content cards.",{"type":45,"tag":77,"props":1167,"children":1168},{},[1169],{"type":50,"value":1170},"Using push navigation for layouts that want stable sidebar selection and detail panes.",{"type":45,"tag":77,"props":1172,"children":1173},{},[1174],{"type":50,"value":1175},"Reaching for AppKit before the SwiftUI scene and command APIs have been used properly.",{"type":45,"tag":53,"props":1177,"children":1179},{"id":1178},"workflow-for-a-new-macos-scene-or-view",[1180],{"type":50,"value":1181},"Workflow For A New macOS Scene Or View",{"type":45,"tag":452,"props":1183,"children":1184},{},[1185,1190,1195,1200,1205,1210,1215],{"type":45,"tag":77,"props":1186,"children":1187},{},[1188],{"type":50,"value":1189},"Define the scene type and ownership model before writing child views.",{"type":45,"tag":77,"props":1191,"children":1192},{},[1193],{"type":50,"value":1194},"Decide which actions live in content, toolbars, commands, inspectors, or settings.",{"type":45,"tag":77,"props":1196,"children":1197},{},[1198],{"type":50,"value":1199},"Sketch the selection model and layout: sidebar-detail, editor-inspector, document window, or utility window.",{"type":45,"tag":77,"props":1201,"children":1202},{},[1203],{"type":50,"value":1204},"Create the file\u002Ffolder structure for app entrypoint, root layout, feature views, models, stores, services, and support helpers.",{"type":45,"tag":77,"props":1206,"children":1207},{},[1208],{"type":50,"value":1209},"Build with small, focused subviews and explicit inputs rather than giant computed fragments.",{"type":45,"tag":77,"props":1211,"children":1212},{},[1213],{"type":50,"value":1214},"Add keyboard shortcuts and menu or toolbar exposure for actions that matter on desktop.",{"type":45,"tag":77,"props":1216,"children":1217},{},[1218],{"type":50,"value":1219},"Validate the flow with a build and a quick usability pass: multiwindow assumptions, settings entry points, and selection stability.",{"type":45,"tag":53,"props":1221,"children":1223},{"id":1222},"component-references",[1224],{"type":50,"value":1225},"Component References",{"type":45,"tag":60,"props":1227,"children":1228},{},[1229,1230,1235],{"type":50,"value":641},{"type":45,"tag":93,"props":1231,"children":1233},{"className":1232},[],[1234],{"type":50,"value":98},{"type":50,"value":1236}," as the entry point. Each component reference should include:",{"type":45,"tag":73,"props":1238,"children":1239},{},[1240,1245,1250,1255],{"type":45,"tag":77,"props":1241,"children":1242},{},[1243],{"type":50,"value":1244},"intent and best-fit scenarios",{"type":45,"tag":77,"props":1246,"children":1247},{},[1248],{"type":50,"value":1249},"minimal usage pattern with desktop conventions",{"type":45,"tag":77,"props":1251,"children":1252},{},[1253],{"type":50,"value":1254},"pitfalls and discoverability notes",{"type":45,"tag":77,"props":1256,"children":1257},{},[1258,1260],{"type":50,"value":1259},"when to fall back to ",{"type":45,"tag":93,"props":1261,"children":1263},{"className":1262},[],[1264],{"type":50,"value":111},{"items":1266,"total":1384},[1267,1284,1300,1312,1332,1352,1372],{"slug":1268,"name":1268,"fn":1269,"description":1270,"org":1271,"tags":1272,"stars":28,"repoUrl":29,"updatedAt":1283},"accessibility-and-inclusive-visualization","make data visualizations accessible","Make data visualizations accessible and inclusive. Use when the user needs chart or diagram accessibility guidance, text alternatives for complex visuals, color and contrast review, keyboard support, reduced-motion behavior for animation or parallax, or an accessibility QA workflow for exported figures, UML-like diagrams, and dashboards.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1273,1276,1279,1282],{"name":1274,"slug":1275,"type":15},"Accessibility","accessibility",{"name":1277,"slug":1278,"type":15},"Charts","charts",{"name":1280,"slug":1281,"type":15},"Data Visualization","data-visualization",{"name":26,"slug":27,"type":15},"2026-06-30T19:00:57.102",{"slug":1285,"name":1285,"fn":1286,"description":1287,"org":1288,"tags":1289,"stars":28,"repoUrl":29,"updatedAt":1299},"agent-browser","automate browser interactions for agents","Browser automation CLI for AI agents. Use when the user needs to interact with websites, verify dev server output, test web apps, navigate pages, fill forms, click buttons, take screenshots, extract data, or automate any browser task. Also triggers when a dev server starts so you can verify it visually.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1290,1293,1296],{"name":1291,"slug":1292,"type":15},"Agents","agents",{"name":1294,"slug":1295,"type":15},"Browser Automation","browser-automation",{"name":1297,"slug":1298,"type":15},"Testing","testing","2026-04-06T18:41:03.44016",{"slug":1301,"name":1301,"fn":1302,"description":1303,"org":1304,"tags":1305,"stars":28,"repoUrl":29,"updatedAt":1311},"agent-browser-verify","verify dev server output with automated browser","Automated browser verification for dev servers. Triggers when a dev server starts to run a visual gut-check with agent-browser — verifies the page loads, checks for console errors, validates key UI elements, and reports pass\u002Ffail before continuing.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1306,1307,1310],{"name":1294,"slug":1295,"type":15},{"name":1308,"slug":1309,"type":15},"Local Development","local-development",{"name":1297,"slug":1298,"type":15},"2026-04-06T18:41:17.526867",{"slug":1313,"name":1313,"fn":1314,"description":1315,"org":1316,"tags":1317,"stars":28,"repoUrl":29,"updatedAt":1331},"agents-sdk","build AI agents on Cloudflare Workers","Build AI agents on Cloudflare Workers using the Agents SDK. Load when creating stateful agents, durable workflows, real-time WebSocket apps, scheduled tasks, MCP servers, or chat applications. Covers Agent class, state management, callable RPC, Workflows integration, and React hooks. Biases towards retrieval from Cloudflare docs over pre-trained knowledge.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1318,1319,1322,1325,1328],{"name":1291,"slug":1292,"type":15},{"name":1320,"slug":1321,"type":15},"Cloudflare Workers","cloudflare-workers",{"name":1323,"slug":1324,"type":15},"SDK","sdk",{"name":1326,"slug":1327,"type":15},"Serverless","serverless",{"name":1329,"slug":1330,"type":15},"WebSockets","websockets","2026-04-06T18:39:51.717063",{"slug":1333,"name":1333,"fn":1334,"description":1335,"org":1336,"tags":1337,"stars":28,"repoUrl":29,"updatedAt":1351},"ai-elements","build chat UIs with AI Elements","AI Elements component library guidance — pre-built React components for AI interfaces built on shadcn\u002Fui. Use when building chat UIs, message displays, tool call rendering, streaming responses, reasoning panels, or any AI-native interface with the AI SDK.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1338,1339,1342,1345,1348],{"name":23,"slug":24,"type":15},{"name":1340,"slug":1341,"type":15},"React","react",{"name":1343,"slug":1344,"type":15},"shadcn\u002Fui","shadcn-ui",{"name":1346,"slug":1347,"type":15},"UI Components","ui-components",{"name":1349,"slug":1350,"type":15},"Vercel","vercel","2026-04-06T18:40:59.619419",{"slug":1353,"name":1353,"fn":1354,"description":1355,"org":1356,"tags":1357,"stars":28,"repoUrl":29,"updatedAt":1371},"ai-gateway","configure Vercel AI Gateway","Vercel AI Gateway expert guidance. Use when configuring model routing, provider failover, cost tracking, or managing multiple AI providers through a unified API.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1358,1361,1364,1367,1370],{"name":1359,"slug":1360,"type":15},"AI Infrastructure","ai-infrastructure",{"name":1362,"slug":1363,"type":15},"Cost Optimization","cost-optimization",{"name":1365,"slug":1366,"type":15},"LLM","llm",{"name":1368,"slug":1369,"type":15},"Performance","performance",{"name":1349,"slug":1350,"type":15},"2026-04-06T18:40:44.377464",{"slug":1373,"name":1373,"fn":1374,"description":1375,"org":1376,"tags":1377,"stars":28,"repoUrl":29,"updatedAt":1383},"ai-generation-persistence","implement persistence patterns for AI generations","AI generation persistence patterns — unique IDs, addressable URLs, database storage, and cost tracking for every LLM generation",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1378,1379,1382],{"name":1362,"slug":1363,"type":15},{"name":1380,"slug":1381,"type":15},"Database","database",{"name":1365,"slug":1366,"type":15},"2026-04-06T18:41:08.513425",600,{"items":1386,"total":1583},[1387,1408,1431,1448,1464,1481,1500,1512,1526,1540,1552,1567],{"slug":1388,"name":1388,"fn":1389,"description":1390,"org":1391,"tags":1392,"stars":1405,"repoUrl":1406,"updatedAt":1407},"prior-auth-packet-builder","build healthcare prior authorization packets","Build a concise prior authorization packet from local case files and payer policy docs.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1393,1396,1399,1402],{"name":1394,"slug":1395,"type":15},"Documents","documents",{"name":1397,"slug":1398,"type":15},"Healthcare","healthcare",{"name":1400,"slug":1401,"type":15},"Insurance","insurance",{"name":1403,"slug":1404,"type":15},"Regulatory Compliance","regulatory-compliance",28169,"https:\u002F\u002Fgithub.com\u002Fopenai\u002Fopenai-agents-python","2026-04-16T05:11:39.180399",{"slug":1409,"name":1409,"fn":1410,"description":1411,"org":1412,"tags":1413,"stars":1428,"repoUrl":1429,"updatedAt":1430},"aspnet-core","build ASP.NET Core web applications","Build, review, refactor, or architect ASP.NET Core web applications using current official guidance for .NET web development. Use when working on Blazor Web Apps, Razor Pages, MVC, Minimal APIs, controller-based Web APIs, SignalR, gRPC, middleware, dependency injection, configuration, authentication, authorization, testing, performance, deployment, or ASP.NET Core upgrades.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1414,1417,1419,1422,1425],{"name":1415,"slug":1416,"type":15},".NET","dotnet",{"name":1418,"slug":1409,"type":15},"ASP.NET Core",{"name":1420,"slug":1421,"type":15},"Blazor","blazor",{"name":1423,"slug":1424,"type":15},"C#","csharp",{"name":1426,"slug":1427,"type":15},"Web Development","web-development",23787,"https:\u002F\u002Fgithub.com\u002Fopenai\u002Fskills","2026-04-12T05:07:02.819491",{"slug":1432,"name":1432,"fn":1433,"description":1434,"org":1435,"tags":1436,"stars":1428,"repoUrl":1429,"updatedAt":1447},"chatgpt-apps","build ChatGPT Apps SDK applications","Build, scaffold, refactor, and troubleshoot ChatGPT Apps SDK applications that combine an MCP server and widget UI. Use when Codex needs to design tools, register UI resources, wire the MCP Apps bridge or ChatGPT compatibility APIs, apply Apps SDK metadata or CSP or domain settings, or produce a docs-aligned project scaffold. Prefer a docs-first workflow by invoking the openai-docs skill or OpenAI developer docs MCP tools before generating code.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1437,1440,1443,1446],{"name":1438,"slug":1439,"type":15},"Apps SDK","apps-sdk",{"name":1441,"slug":1442,"type":15},"ChatGPT","chatgpt",{"name":1444,"slug":1445,"type":15},"MCP","mcp",{"name":9,"slug":8,"type":15},"2026-04-12T05:07:05.468097",{"slug":1449,"name":1449,"fn":1450,"description":1451,"org":1452,"tags":1453,"stars":1428,"repoUrl":1429,"updatedAt":1463},"cli-creator","build CLIs from API docs","Build a composable CLI for Codex from API docs, an OpenAPI spec, existing curl examples, an SDK, a web app, an admin tool, or a local script. Use when the user wants Codex to create a command-line tool that can run from any repo, expose composable read\u002Fwrite commands, return stable JSON, manage auth, and pair with a companion skill.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1454,1457,1460],{"name":1455,"slug":1456,"type":15},"API Development","api-development",{"name":1458,"slug":1459,"type":15},"CLI","cli",{"name":1461,"slug":1462,"type":15},"Codex","codex","2026-04-12T05:07:04.132762",{"slug":1465,"name":1465,"fn":1466,"description":1467,"org":1468,"tags":1469,"stars":1428,"repoUrl":1429,"updatedAt":1480},"cloudflare-deploy","deploy projects to Cloudflare","Deploy applications and infrastructure to Cloudflare using Workers, Pages, and related platform services. Use when the user asks to deploy, host, publish, or set up a project on Cloudflare.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1470,1473,1476,1477],{"name":1471,"slug":1472,"type":15},"Cloudflare","cloudflare",{"name":1474,"slug":1475,"type":15},"Cloudflare Pages","cloudflare-pages",{"name":1320,"slug":1321,"type":15},{"name":1478,"slug":1479,"type":15},"Deployment","deployment","2026-04-12T05:07:14.275118",{"slug":1482,"name":1482,"fn":1483,"description":1484,"org":1485,"tags":1486,"stars":1428,"repoUrl":1429,"updatedAt":1499},"define-goal","define and set measurable project goals","Help the user define a concrete, measurable goal before starting work, especially when they ask to use the goal tool, create a goal, set an objective, clarify success criteria, or turn a fuzzy intention into a quantitative outcome. Use this skill for goal creation and goal refinement only; it does not manage durable snapshots, decision logs, or long-running execution artifacts.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1487,1490,1493,1496],{"name":1488,"slug":1489,"type":15},"Productivity","productivity",{"name":1491,"slug":1492,"type":15},"Project Management","project-management",{"name":1494,"slug":1495,"type":15},"Strategy","strategy",{"name":1497,"slug":1498,"type":15},"Task Management","task-management","2026-05-23T06:17:16.870838",{"slug":1501,"name":1501,"fn":1502,"description":1503,"org":1504,"tags":1505,"stars":1428,"repoUrl":1429,"updatedAt":1511},"figma","translate Figma designs into code","Use the Figma MCP server to fetch design context, screenshots, variables, and assets from Figma, and to translate Figma nodes into production code. Trigger when a task involves Figma URLs, node IDs, design-to-code implementation, or Figma MCP setup and troubleshooting.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1506,1507,1509,1510],{"name":26,"slug":27,"type":15},{"name":1508,"slug":1501,"type":15},"Figma",{"name":23,"slug":24,"type":15},{"name":1444,"slug":1445,"type":15},"2026-04-12T05:06:47.939943",{"slug":1513,"name":1513,"fn":1514,"description":1515,"org":1516,"tags":1517,"stars":1428,"repoUrl":1429,"updatedAt":1525},"figma-code-connect-components","connect Figma designs to code components","Connects Figma design components to code components using Code Connect mapping tools. Use when user says \"code connect\", \"connect this component to code\", \"map this component\", \"link component to code\", \"create code connect mapping\", or wants to establish mappings between Figma designs and code implementations. For canvas writes via `use_figma`, use `figma-use`.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1518,1519,1522,1523,1524],{"name":26,"slug":27,"type":15},{"name":1520,"slug":1521,"type":15},"Design System","design-system",{"name":1508,"slug":1501,"type":15},{"name":23,"slug":24,"type":15},{"name":1346,"slug":1347,"type":15},"2026-05-10T05:59:52.971881",{"slug":1527,"name":1527,"fn":1528,"description":1529,"org":1530,"tags":1531,"stars":1428,"repoUrl":1429,"updatedAt":1539},"figma-create-design-system-rules","generate design system rules from Figma","Generates custom design system rules for the user's codebase. Use when user says \"create design system rules\", \"generate rules for my project\", \"set up design rules\", \"customize design system guidelines\", or wants to establish project-specific conventions for Figma-to-code workflows. Requires Figma MCP server connection.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1532,1533,1534,1537,1538],{"name":26,"slug":27,"type":15},{"name":1520,"slug":1521,"type":15},{"name":1535,"slug":1536,"type":15},"Documentation","documentation",{"name":1508,"slug":1501,"type":15},{"name":23,"slug":24,"type":15},"2026-05-16T06:07:47.821474",{"slug":1541,"name":1541,"fn":1542,"description":1543,"org":1544,"tags":1545,"stars":1428,"repoUrl":1429,"updatedAt":1551},"figma-implement-design","translate Figma designs into application code","Translates Figma designs into production-ready application code with 1:1 visual fidelity. Use when implementing UI code from Figma files, when user mentions \"implement design\", \"generate code\", \"implement component\", provides Figma URLs, or asks to build components matching Figma specs. For Figma canvas writes via `use_figma`, use `figma-use`.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1546,1547,1548,1549,1550],{"name":26,"slug":27,"type":15},{"name":1508,"slug":1501,"type":15},{"name":23,"slug":24,"type":15},{"name":1346,"slug":1347,"type":15},{"name":1426,"slug":1427,"type":15},"2026-05-16T06:07:40.583615",{"slug":1553,"name":1553,"fn":1554,"description":1555,"org":1556,"tags":1557,"stars":1428,"repoUrl":1429,"updatedAt":1566},"hatch-pet","create animated pets for Codex","Create, repair, validate, visually QA, and package Codex-compatible animated pets and pet spritesheets from character art, generated images, company or prospect brand cues, or visual references. Use when a user wants a lightweight-worker Codex pet workflow, a non-pixel custom pet style, a prospect or company mascot pet, or a full 8x9 animated pet atlas with transparent unused cells, QA contact sheets, and pet.json packaging. This skill composes the installed $imagegen system skill for visual generation and uses bundled scripts for deterministic spritesheet assembly.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1558,1561,1562,1565],{"name":1559,"slug":1560,"type":15},"Animation","animation",{"name":1461,"slug":1462,"type":15},{"name":1563,"slug":1564,"type":15},"Creative","creative",{"name":26,"slug":27,"type":15},"2026-05-02T05:31:48.48485",{"slug":1568,"name":1568,"fn":1569,"description":1570,"org":1571,"tags":1572,"stars":1428,"repoUrl":1429,"updatedAt":1582},"imagegen","generate and edit raster images","Generate or edit raster images when the task benefits from AI-created bitmap visuals such as photos, illustrations, textures, sprites, mockups, or transparent-background cutouts. Use when Codex should create a brand-new image, transform an existing image, or derive visual variants from references, and the output should be a bitmap asset rather than repo-native code or vector. Do not use when the task is better handled by editing existing SVG\u002Fvector\u002Fcode-native assets, extending an established icon or logo system, or building the visual directly in HTML\u002FCSS\u002Fcanvas.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1573,1574,1575,1578,1581],{"name":1563,"slug":1564,"type":15},{"name":26,"slug":27,"type":15},{"name":1576,"slug":1577,"type":15},"Image Generation","image-generation",{"name":1579,"slug":1580,"type":15},"Images","images",{"name":9,"slug":8,"type":15},"2026-05-15T06:23:24.312127",675]