[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-openai-window-management":3,"mdc--envubx-key":39,"related-org-openai-window-management":746,"related-repo-openai-window-management":949},{"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},"window-management","customize macOS SwiftUI windows","Customize macOS SwiftUI windows and scene behavior. Use when tuning window chrome, drag regions, placement, restoration, launch behavior, or borderless windows.",{"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:39.504664",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\u002Fwindow-management","---\nname: window-management\ndescription: Customize macOS SwiftUI windows and scene behavior. Use when tuning window chrome, drag regions, placement, restoration, launch behavior, or borderless windows.\n---\n\n# Window Management\n\n## Overview\n\nUse this skill to tailor each SwiftUI window to its job. Start by identifying\nwhich scene owns the window (`Window`, `WindowGroup`, or a dedicated utility\nscene), then customize the toolbar\u002Ftitle area, background material, resize and\nrestoration behavior, and initial or zoomed placement.\n\nPrefer scene and window modifiers over ad hoc AppKit bridges when SwiftUI offers\nthe behavior directly. Keep each window purpose-built: a main browser window, an\nAbout window, and a media player window usually want different chrome,\nresizability, restoration, and placement rules.\n\nThese APIs are macOS 15+ SwiftUI window\u002Fscene customizations. For older\ndeployment targets, expect to use more AppKit bridging or availability guards.\n\n## Workflow\n\n1. Inspect the relevant scene declaration and classify the window role:\n   main app navigation, inspector\u002Fdetail utility, About\u002Fsupport window, media\n   playback window, welcome window, or a borderless custom surface.\n2. Adjust toolbar and title presentation to match the content.\n3. If the toolbar background or entire toolbar is hidden, make sure the window\n   still has a usable drag region.\n4. Refine window behavior for that role: minimize availability, restoration,\n   resize expectations, and whether the window should appear at launch.\n5. Set default placement for newly opened windows and ideal placement for zoom\n   behavior when content and display size matter.\n6. Build and launch the app with `build-run-debug` to verify the result in\n   a real foreground `.app` bundle.\n7. If SwiftUI scene\u002Fwindow modifiers are not enough, switch to `appkit-interop`\n   for a narrow `NSWindow` bridge rather than spreading AppKit through the view\n   tree.\n\n## Toolbar And Title\n\n- Use `.toolbar(removing: .title)` when the window title should stay associated\n  with the window for accessibility and menus, but not be visibly drawn in the\n  title bar.\n- Use `.toolbarBackgroundVisibility(.hidden, for: .windowToolbar)` when large\n  media or hero content should visually extend to the top edge of the window.\n- If the window still needs close\u002Fminimize\u002Ffull-screen controls, remove only the\n  title and toolbar background. If the toolbar should disappear entirely, use\n  `.toolbarVisibility(.hidden, for: .windowToolbar)` instead.\n- Remove custom toolbar backgrounds and manually painted titlebar fills before\n  layering new SwiftUI toolbar APIs on top.\n- Keep the window's logical title meaningful even if hidden; the system can\n  still use it for accessibility and menu items. These are visual changes only.\n\n## Drag Regions\n\n- If a toolbar background is hidden or the toolbar is removed entirely, use\n  `WindowDragGesture()` to extend the draggable area into your content.\n- Attach the gesture to a transparent overlay or non-interactive header region\n  that does not steal gestures from real controls.\n- For a media player with custom playback controls, insert the drag overlay\n  between the video content and the controls so AVKit or transport controls keep\n  receiving input.\n- Pair the drag gesture with `.allowsWindowActivationEvents(true)` so clicking\n  and immediately dragging a background window still activates and moves it.\n\n## Background And Materials\n\n- Use `.containerBackground(.thickMaterial, for: .window)` when a utility window\n  or About window should replace the default window background with a subtle\n  frosted material.\n- Prefer system materials for stylized windows instead of hardcoded translucent\n  colors.\n- Use this especially for fixed-content utility windows where a softer backdrop\n  is part of the design.\n\n## Window Behavior\n\n- Use `.windowMinimizeBehavior(.disabled)` for always-reachable utility windows\n  such as a custom About window where minimizing adds little value.\n- Disable the green zoom control through fixed sizing or window constraints when\n  the window's content has one intended size.\n- Use `.restorationBehavior(.disabled)` for windows that should not reopen on\n  next launch, such as About panels, transient support\u002Finfo windows, or\n  first-run welcome surfaces.\n- Keep state restoration enabled for primary document or navigation windows when\n  reopening prior size and position is desirable.\n- By default, SwiftUI respects the user's system-wide macOS state restoration\n  setting. Use `restorationBehavior(...)` only when a specific window should\n  intentionally opt into or out of that system behavior.\n- Use `.defaultLaunchBehavior(.presented)` for windows that should appear first\n  on launch, such as a welcome window, and choose that behavior intentionally\n  rather than relying on side effects from scene creation order.\n\n## Window Placement\n\n- Use `.defaultWindowPlacement { content, context in ... }` to control the\n  initial size and optional position of newly opened windows.\n- Inside the placement closure, call `content.sizeThatFits(.unspecified)` to get\n  the content's ideal size.\n- Read `context.defaultDisplay.visibleRect` to get the display's usable region\n  after accounting for the menu bar and Dock.\n- Return `WindowPlacement(size: size)` with a size clamped to the visible rect\n  when media or document content may be larger than the display. If no position\n  is provided, the window is centered by default.\n- Use `.windowIdealPlacement { content, context in ... }` to control what\n  happens when the user chooses Zoom from the Window menu or Option-clicks the\n  green toolbar button. For media windows, preserve aspect ratio and grow to the\n  largest size that fits the display.\n- Treat default placement and ideal placement as separate policies:\n  - default placement controls where a new window first appears,\n  - ideal placement controls how large a zoomed window should become.\n- Always consider external displays and rotated\u002Fnarrow screens when sizing\n  player windows or document windows from content dimensions.\n\n## Borderless And Specialized Windows\n\n- Use `.windowStyle(.plain)` for borderless or highly custom chrome windows, but\n  make sure the content still provides a clear drag\u002Fmove affordance and visible\n  context.\n- For a borderless player, HUD, or welcome window, decide upfront whether losing\n  standard titlebar affordances is worth the custom presentation.\n- Keep one clear path back to regular window management if the plain style makes\n  the window feel invisible or hard to move.\n\nFor concrete window modifier examples, read `references\u002Fapi-snippets.md`.\n\n## Review Checklist\n\n- The scene type matches the window's role and lifecycle.\n- Hidden titles still leave a meaningful logical title for accessibility and\n  menus.\n- Toolbar background removal is intentional and does not hurt titlebar legibility\n  or window control placement.\n- Windows with hidden or removed toolbars still have a reliable drag region and\n  support click-then-drag activation from the background.\n- Utility windows have restoration\u002Fminimize behavior that matches their purpose.\n- Restoration overrides are used only when a scene should intentionally differ\n  from the user's system-wide setting.\n- Default and ideal placement use `content.sizeThatFits(.unspecified)` and\n  `context.defaultDisplay.visibleRect` when content\u002Fdisplay size matters.\n- Media windows preserve aspect ratio and fit on small or rotated displays.\n- Borderless windows still have a usable move\u002Fdrag affordance.\n\n## Guardrails\n\n- Do not use `.toolbar(removing: .title)` just to hide a title you forgot to set.\n  Keep the underlying window title meaningful.\n- Do not hide the toolbar background or the whole toolbar without replacing the\n  lost drag affordance.\n- Do not disable restoration on the main document\u002Fnavigation window unless the\n  user explicitly wants a fresh-start app every launch.\n- Do not hardcode one monitor size or assume a single-display setup when sizing\n  player windows.\n- Do not reach for `NSWindow` mutation before checking whether\n  `.windowMinimizeBehavior`, `.restorationBehavior`, `.defaultWindowPlacement`,\n  `.windowIdealPlacement`, `.windowStyle`, or `.defaultLaunchBehavior` already\n  solve the problem.\n- Do not leave a plain borderless window without any obvious drag or close path.\n\n## When To Use Other Skills\n\n- Use `swiftui-patterns` for broader scene, commands, settings, sidebar,\n  and inspector architecture.\n- Use `liquid-glass` when the main question is modern macOS visual treatment,\n  Liquid Glass, or system material adoption.\n- Use `appkit-interop` if a custom window behavior truly requires `NSWindow`,\n  `NSPanel`, or responder-chain control.\n- Use `build-run-debug` to launch and verify the resulting windows.\n",{"data":40,"body":41},{"name":4,"description":6},{"type":42,"children":43},"root",[44,52,59,82,87,92,98,170,176,228,234,273,279,304,310,372,378,467,473,498,511,517,579,585,677,683],{"type":45,"tag":46,"props":47,"children":48},"element","h1",{"id":4},[49],{"type":50,"value":51},"text","Window Management",{"type":45,"tag":53,"props":54,"children":56},"h2",{"id":55},"overview",[57],{"type":50,"value":58},"Overview",{"type":45,"tag":60,"props":61,"children":62},"p",{},[63,65,72,74,80],{"type":50,"value":64},"Use this skill to tailor each SwiftUI window to its job. Start by identifying\nwhich scene owns the window (",{"type":45,"tag":66,"props":67,"children":69},"code",{"className":68},[],[70],{"type":50,"value":71},"Window",{"type":50,"value":73},", ",{"type":45,"tag":66,"props":75,"children":77},{"className":76},[],[78],{"type":50,"value":79},"WindowGroup",{"type":50,"value":81},", or a dedicated utility\nscene), then customize the toolbar\u002Ftitle area, background material, resize and\nrestoration behavior, and initial or zoomed placement.",{"type":45,"tag":60,"props":83,"children":84},{},[85],{"type":50,"value":86},"Prefer scene and window modifiers over ad hoc AppKit bridges when SwiftUI offers\nthe behavior directly. Keep each window purpose-built: a main browser window, an\nAbout window, and a media player window usually want different chrome,\nresizability, restoration, and placement rules.",{"type":45,"tag":60,"props":88,"children":89},{},[90],{"type":50,"value":91},"These APIs are macOS 15+ SwiftUI window\u002Fscene customizations. For older\ndeployment targets, expect to use more AppKit bridging or availability guards.",{"type":45,"tag":53,"props":93,"children":95},{"id":94},"workflow",[96],{"type":50,"value":97},"Workflow",{"type":45,"tag":99,"props":100,"children":101},"ol",{},[102,108,113,118,123,128,149],{"type":45,"tag":103,"props":104,"children":105},"li",{},[106],{"type":50,"value":107},"Inspect the relevant scene declaration and classify the window role:\nmain app navigation, inspector\u002Fdetail utility, About\u002Fsupport window, media\nplayback window, welcome window, or a borderless custom surface.",{"type":45,"tag":103,"props":109,"children":110},{},[111],{"type":50,"value":112},"Adjust toolbar and title presentation to match the content.",{"type":45,"tag":103,"props":114,"children":115},{},[116],{"type":50,"value":117},"If the toolbar background or entire toolbar is hidden, make sure the window\nstill has a usable drag region.",{"type":45,"tag":103,"props":119,"children":120},{},[121],{"type":50,"value":122},"Refine window behavior for that role: minimize availability, restoration,\nresize expectations, and whether the window should appear at launch.",{"type":45,"tag":103,"props":124,"children":125},{},[126],{"type":50,"value":127},"Set default placement for newly opened windows and ideal placement for zoom\nbehavior when content and display size matter.",{"type":45,"tag":103,"props":129,"children":130},{},[131,133,139,141,147],{"type":50,"value":132},"Build and launch the app with ",{"type":45,"tag":66,"props":134,"children":136},{"className":135},[],[137],{"type":50,"value":138},"build-run-debug",{"type":50,"value":140}," to verify the result in\na real foreground ",{"type":45,"tag":66,"props":142,"children":144},{"className":143},[],[145],{"type":50,"value":146},".app",{"type":50,"value":148}," bundle.",{"type":45,"tag":103,"props":150,"children":151},{},[152,154,160,162,168],{"type":50,"value":153},"If SwiftUI scene\u002Fwindow modifiers are not enough, switch to ",{"type":45,"tag":66,"props":155,"children":157},{"className":156},[],[158],{"type":50,"value":159},"appkit-interop",{"type":50,"value":161},"\nfor a narrow ",{"type":45,"tag":66,"props":163,"children":165},{"className":164},[],[166],{"type":50,"value":167},"NSWindow",{"type":50,"value":169}," bridge rather than spreading AppKit through the view\ntree.",{"type":45,"tag":53,"props":171,"children":173},{"id":172},"toolbar-and-title",[174],{"type":50,"value":175},"Toolbar And Title",{"type":45,"tag":177,"props":178,"children":179},"ul",{},[180,193,205,218,223],{"type":45,"tag":103,"props":181,"children":182},{},[183,185,191],{"type":50,"value":184},"Use ",{"type":45,"tag":66,"props":186,"children":188},{"className":187},[],[189],{"type":50,"value":190},".toolbar(removing: .title)",{"type":50,"value":192}," when the window title should stay associated\nwith the window for accessibility and menus, but not be visibly drawn in the\ntitle bar.",{"type":45,"tag":103,"props":194,"children":195},{},[196,197,203],{"type":50,"value":184},{"type":45,"tag":66,"props":198,"children":200},{"className":199},[],[201],{"type":50,"value":202},".toolbarBackgroundVisibility(.hidden, for: .windowToolbar)",{"type":50,"value":204}," when large\nmedia or hero content should visually extend to the top edge of the window.",{"type":45,"tag":103,"props":206,"children":207},{},[208,210,216],{"type":50,"value":209},"If the window still needs close\u002Fminimize\u002Ffull-screen controls, remove only the\ntitle and toolbar background. If the toolbar should disappear entirely, use\n",{"type":45,"tag":66,"props":211,"children":213},{"className":212},[],[214],{"type":50,"value":215},".toolbarVisibility(.hidden, for: .windowToolbar)",{"type":50,"value":217}," instead.",{"type":45,"tag":103,"props":219,"children":220},{},[221],{"type":50,"value":222},"Remove custom toolbar backgrounds and manually painted titlebar fills before\nlayering new SwiftUI toolbar APIs on top.",{"type":45,"tag":103,"props":224,"children":225},{},[226],{"type":50,"value":227},"Keep the window's logical title meaningful even if hidden; the system can\nstill use it for accessibility and menu items. These are visual changes only.",{"type":45,"tag":53,"props":229,"children":231},{"id":230},"drag-regions",[232],{"type":50,"value":233},"Drag Regions",{"type":45,"tag":177,"props":235,"children":236},{},[237,250,255,260],{"type":45,"tag":103,"props":238,"children":239},{},[240,242,248],{"type":50,"value":241},"If a toolbar background is hidden or the toolbar is removed entirely, use\n",{"type":45,"tag":66,"props":243,"children":245},{"className":244},[],[246],{"type":50,"value":247},"WindowDragGesture()",{"type":50,"value":249}," to extend the draggable area into your content.",{"type":45,"tag":103,"props":251,"children":252},{},[253],{"type":50,"value":254},"Attach the gesture to a transparent overlay or non-interactive header region\nthat does not steal gestures from real controls.",{"type":45,"tag":103,"props":256,"children":257},{},[258],{"type":50,"value":259},"For a media player with custom playback controls, insert the drag overlay\nbetween the video content and the controls so AVKit or transport controls keep\nreceiving input.",{"type":45,"tag":103,"props":261,"children":262},{},[263,265,271],{"type":50,"value":264},"Pair the drag gesture with ",{"type":45,"tag":66,"props":266,"children":268},{"className":267},[],[269],{"type":50,"value":270},".allowsWindowActivationEvents(true)",{"type":50,"value":272}," so clicking\nand immediately dragging a background window still activates and moves it.",{"type":45,"tag":53,"props":274,"children":276},{"id":275},"background-and-materials",[277],{"type":50,"value":278},"Background And Materials",{"type":45,"tag":177,"props":280,"children":281},{},[282,294,299],{"type":45,"tag":103,"props":283,"children":284},{},[285,286,292],{"type":50,"value":184},{"type":45,"tag":66,"props":287,"children":289},{"className":288},[],[290],{"type":50,"value":291},".containerBackground(.thickMaterial, for: .window)",{"type":50,"value":293}," when a utility window\nor About window should replace the default window background with a subtle\nfrosted material.",{"type":45,"tag":103,"props":295,"children":296},{},[297],{"type":50,"value":298},"Prefer system materials for stylized windows instead of hardcoded translucent\ncolors.",{"type":45,"tag":103,"props":300,"children":301},{},[302],{"type":50,"value":303},"Use this especially for fixed-content utility windows where a softer backdrop\nis part of the design.",{"type":45,"tag":53,"props":305,"children":307},{"id":306},"window-behavior",[308],{"type":50,"value":309},"Window Behavior",{"type":45,"tag":177,"props":311,"children":312},{},[313,325,330,342,347,360],{"type":45,"tag":103,"props":314,"children":315},{},[316,317,323],{"type":50,"value":184},{"type":45,"tag":66,"props":318,"children":320},{"className":319},[],[321],{"type":50,"value":322},".windowMinimizeBehavior(.disabled)",{"type":50,"value":324}," for always-reachable utility windows\nsuch as a custom About window where minimizing adds little value.",{"type":45,"tag":103,"props":326,"children":327},{},[328],{"type":50,"value":329},"Disable the green zoom control through fixed sizing or window constraints when\nthe window's content has one intended size.",{"type":45,"tag":103,"props":331,"children":332},{},[333,334,340],{"type":50,"value":184},{"type":45,"tag":66,"props":335,"children":337},{"className":336},[],[338],{"type":50,"value":339},".restorationBehavior(.disabled)",{"type":50,"value":341}," for windows that should not reopen on\nnext launch, such as About panels, transient support\u002Finfo windows, or\nfirst-run welcome surfaces.",{"type":45,"tag":103,"props":343,"children":344},{},[345],{"type":50,"value":346},"Keep state restoration enabled for primary document or navigation windows when\nreopening prior size and position is desirable.",{"type":45,"tag":103,"props":348,"children":349},{},[350,352,358],{"type":50,"value":351},"By default, SwiftUI respects the user's system-wide macOS state restoration\nsetting. Use ",{"type":45,"tag":66,"props":353,"children":355},{"className":354},[],[356],{"type":50,"value":357},"restorationBehavior(...)",{"type":50,"value":359}," only when a specific window should\nintentionally opt into or out of that system behavior.",{"type":45,"tag":103,"props":361,"children":362},{},[363,364,370],{"type":50,"value":184},{"type":45,"tag":66,"props":365,"children":367},{"className":366},[],[368],{"type":50,"value":369},".defaultLaunchBehavior(.presented)",{"type":50,"value":371}," for windows that should appear first\non launch, such as a welcome window, and choose that behavior intentionally\nrather than relying on side effects from scene creation order.",{"type":45,"tag":53,"props":373,"children":375},{"id":374},"window-placement",[376],{"type":50,"value":377},"Window Placement",{"type":45,"tag":177,"props":379,"children":380},{},[381,393,406,419,432,444,462],{"type":45,"tag":103,"props":382,"children":383},{},[384,385,391],{"type":50,"value":184},{"type":45,"tag":66,"props":386,"children":388},{"className":387},[],[389],{"type":50,"value":390},".defaultWindowPlacement { content, context in ... }",{"type":50,"value":392}," to control the\ninitial size and optional position of newly opened windows.",{"type":45,"tag":103,"props":394,"children":395},{},[396,398,404],{"type":50,"value":397},"Inside the placement closure, call ",{"type":45,"tag":66,"props":399,"children":401},{"className":400},[],[402],{"type":50,"value":403},"content.sizeThatFits(.unspecified)",{"type":50,"value":405}," to get\nthe content's ideal size.",{"type":45,"tag":103,"props":407,"children":408},{},[409,411,417],{"type":50,"value":410},"Read ",{"type":45,"tag":66,"props":412,"children":414},{"className":413},[],[415],{"type":50,"value":416},"context.defaultDisplay.visibleRect",{"type":50,"value":418}," to get the display's usable region\nafter accounting for the menu bar and Dock.",{"type":45,"tag":103,"props":420,"children":421},{},[422,424,430],{"type":50,"value":423},"Return ",{"type":45,"tag":66,"props":425,"children":427},{"className":426},[],[428],{"type":50,"value":429},"WindowPlacement(size: size)",{"type":50,"value":431}," with a size clamped to the visible rect\nwhen media or document content may be larger than the display. If no position\nis provided, the window is centered by default.",{"type":45,"tag":103,"props":433,"children":434},{},[435,436,442],{"type":50,"value":184},{"type":45,"tag":66,"props":437,"children":439},{"className":438},[],[440],{"type":50,"value":441},".windowIdealPlacement { content, context in ... }",{"type":50,"value":443}," to control what\nhappens when the user chooses Zoom from the Window menu or Option-clicks the\ngreen toolbar button. For media windows, preserve aspect ratio and grow to the\nlargest size that fits the display.",{"type":45,"tag":103,"props":445,"children":446},{},[447,449],{"type":50,"value":448},"Treat default placement and ideal placement as separate policies:\n",{"type":45,"tag":177,"props":450,"children":451},{},[452,457],{"type":45,"tag":103,"props":453,"children":454},{},[455],{"type":50,"value":456},"default placement controls where a new window first appears,",{"type":45,"tag":103,"props":458,"children":459},{},[460],{"type":50,"value":461},"ideal placement controls how large a zoomed window should become.",{"type":45,"tag":103,"props":463,"children":464},{},[465],{"type":50,"value":466},"Always consider external displays and rotated\u002Fnarrow screens when sizing\nplayer windows or document windows from content dimensions.",{"type":45,"tag":53,"props":468,"children":470},{"id":469},"borderless-and-specialized-windows",[471],{"type":50,"value":472},"Borderless And Specialized Windows",{"type":45,"tag":177,"props":474,"children":475},{},[476,488,493],{"type":45,"tag":103,"props":477,"children":478},{},[479,480,486],{"type":50,"value":184},{"type":45,"tag":66,"props":481,"children":483},{"className":482},[],[484],{"type":50,"value":485},".windowStyle(.plain)",{"type":50,"value":487}," for borderless or highly custom chrome windows, but\nmake sure the content still provides a clear drag\u002Fmove affordance and visible\ncontext.",{"type":45,"tag":103,"props":489,"children":490},{},[491],{"type":50,"value":492},"For a borderless player, HUD, or welcome window, decide upfront whether losing\nstandard titlebar affordances is worth the custom presentation.",{"type":45,"tag":103,"props":494,"children":495},{},[496],{"type":50,"value":497},"Keep one clear path back to regular window management if the plain style makes\nthe window feel invisible or hard to move.",{"type":45,"tag":60,"props":499,"children":500},{},[501,503,509],{"type":50,"value":502},"For concrete window modifier examples, read ",{"type":45,"tag":66,"props":504,"children":506},{"className":505},[],[507],{"type":50,"value":508},"references\u002Fapi-snippets.md",{"type":50,"value":510},".",{"type":45,"tag":53,"props":512,"children":514},{"id":513},"review-checklist",[515],{"type":50,"value":516},"Review Checklist",{"type":45,"tag":177,"props":518,"children":519},{},[520,525,530,535,540,545,550,569,574],{"type":45,"tag":103,"props":521,"children":522},{},[523],{"type":50,"value":524},"The scene type matches the window's role and lifecycle.",{"type":45,"tag":103,"props":526,"children":527},{},[528],{"type":50,"value":529},"Hidden titles still leave a meaningful logical title for accessibility and\nmenus.",{"type":45,"tag":103,"props":531,"children":532},{},[533],{"type":50,"value":534},"Toolbar background removal is intentional and does not hurt titlebar legibility\nor window control placement.",{"type":45,"tag":103,"props":536,"children":537},{},[538],{"type":50,"value":539},"Windows with hidden or removed toolbars still have a reliable drag region and\nsupport click-then-drag activation from the background.",{"type":45,"tag":103,"props":541,"children":542},{},[543],{"type":50,"value":544},"Utility windows have restoration\u002Fminimize behavior that matches their purpose.",{"type":45,"tag":103,"props":546,"children":547},{},[548],{"type":50,"value":549},"Restoration overrides are used only when a scene should intentionally differ\nfrom the user's system-wide setting.",{"type":45,"tag":103,"props":551,"children":552},{},[553,555,560,562,567],{"type":50,"value":554},"Default and ideal placement use ",{"type":45,"tag":66,"props":556,"children":558},{"className":557},[],[559],{"type":50,"value":403},{"type":50,"value":561}," and\n",{"type":45,"tag":66,"props":563,"children":565},{"className":564},[],[566],{"type":50,"value":416},{"type":50,"value":568}," when content\u002Fdisplay size matters.",{"type":45,"tag":103,"props":570,"children":571},{},[572],{"type":50,"value":573},"Media windows preserve aspect ratio and fit on small or rotated displays.",{"type":45,"tag":103,"props":575,"children":576},{},[577],{"type":50,"value":578},"Borderless windows still have a usable move\u002Fdrag affordance.",{"type":45,"tag":53,"props":580,"children":582},{"id":581},"guardrails",[583],{"type":50,"value":584},"Guardrails",{"type":45,"tag":177,"props":586,"children":587},{},[588,600,605,610,615,672],{"type":45,"tag":103,"props":589,"children":590},{},[591,593,598],{"type":50,"value":592},"Do not use ",{"type":45,"tag":66,"props":594,"children":596},{"className":595},[],[597],{"type":50,"value":190},{"type":50,"value":599}," just to hide a title you forgot to set.\nKeep the underlying window title meaningful.",{"type":45,"tag":103,"props":601,"children":602},{},[603],{"type":50,"value":604},"Do not hide the toolbar background or the whole toolbar without replacing the\nlost drag affordance.",{"type":45,"tag":103,"props":606,"children":607},{},[608],{"type":50,"value":609},"Do not disable restoration on the main document\u002Fnavigation window unless the\nuser explicitly wants a fresh-start app every launch.",{"type":45,"tag":103,"props":611,"children":612},{},[613],{"type":50,"value":614},"Do not hardcode one monitor size or assume a single-display setup when sizing\nplayer windows.",{"type":45,"tag":103,"props":616,"children":617},{},[618,620,625,627,633,634,640,641,647,649,655,656,662,664,670],{"type":50,"value":619},"Do not reach for ",{"type":45,"tag":66,"props":621,"children":623},{"className":622},[],[624],{"type":50,"value":167},{"type":50,"value":626}," mutation before checking whether\n",{"type":45,"tag":66,"props":628,"children":630},{"className":629},[],[631],{"type":50,"value":632},".windowMinimizeBehavior",{"type":50,"value":73},{"type":45,"tag":66,"props":635,"children":637},{"className":636},[],[638],{"type":50,"value":639},".restorationBehavior",{"type":50,"value":73},{"type":45,"tag":66,"props":642,"children":644},{"className":643},[],[645],{"type":50,"value":646},".defaultWindowPlacement",{"type":50,"value":648},",\n",{"type":45,"tag":66,"props":650,"children":652},{"className":651},[],[653],{"type":50,"value":654},".windowIdealPlacement",{"type":50,"value":73},{"type":45,"tag":66,"props":657,"children":659},{"className":658},[],[660],{"type":50,"value":661},".windowStyle",{"type":50,"value":663},", or ",{"type":45,"tag":66,"props":665,"children":667},{"className":666},[],[668],{"type":50,"value":669},".defaultLaunchBehavior",{"type":50,"value":671}," already\nsolve the problem.",{"type":45,"tag":103,"props":673,"children":674},{},[675],{"type":50,"value":676},"Do not leave a plain borderless window without any obvious drag or close path.",{"type":45,"tag":53,"props":678,"children":680},{"id":679},"when-to-use-other-skills",[681],{"type":50,"value":682},"When To Use Other Skills",{"type":45,"tag":177,"props":684,"children":685},{},[686,698,710,735],{"type":45,"tag":103,"props":687,"children":688},{},[689,690,696],{"type":50,"value":184},{"type":45,"tag":66,"props":691,"children":693},{"className":692},[],[694],{"type":50,"value":695},"swiftui-patterns",{"type":50,"value":697}," for broader scene, commands, settings, sidebar,\nand inspector architecture.",{"type":45,"tag":103,"props":699,"children":700},{},[701,702,708],{"type":50,"value":184},{"type":45,"tag":66,"props":703,"children":705},{"className":704},[],[706],{"type":50,"value":707},"liquid-glass",{"type":50,"value":709}," when the main question is modern macOS visual treatment,\nLiquid Glass, or system material adoption.",{"type":45,"tag":103,"props":711,"children":712},{},[713,714,719,721,726,727,733],{"type":50,"value":184},{"type":45,"tag":66,"props":715,"children":717},{"className":716},[],[718],{"type":50,"value":159},{"type":50,"value":720}," if a custom window behavior truly requires ",{"type":45,"tag":66,"props":722,"children":724},{"className":723},[],[725],{"type":50,"value":167},{"type":50,"value":648},{"type":45,"tag":66,"props":728,"children":730},{"className":729},[],[731],{"type":50,"value":732},"NSPanel",{"type":50,"value":734},", or responder-chain control.",{"type":45,"tag":103,"props":736,"children":737},{},[738,739,744],{"type":50,"value":184},{"type":45,"tag":66,"props":740,"children":742},{"className":741},[],[743],{"type":50,"value":138},{"type":50,"value":745}," to launch and verify the resulting windows.",{"items":747,"total":948},[748,769,792,809,825,844,863,875,891,905,917,932],{"slug":749,"name":749,"fn":750,"description":751,"org":752,"tags":753,"stars":766,"repoUrl":767,"updatedAt":768},"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},[754,757,760,763],{"name":755,"slug":756,"type":15},"Documents","documents",{"name":758,"slug":759,"type":15},"Healthcare","healthcare",{"name":761,"slug":762,"type":15},"Insurance","insurance",{"name":764,"slug":765,"type":15},"Regulatory Compliance","regulatory-compliance",28169,"https:\u002F\u002Fgithub.com\u002Fopenai\u002Fopenai-agents-python","2026-04-16T05:11:39.180399",{"slug":770,"name":770,"fn":771,"description":772,"org":773,"tags":774,"stars":789,"repoUrl":790,"updatedAt":791},"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},[775,778,780,783,786],{"name":776,"slug":777,"type":15},".NET","dotnet",{"name":779,"slug":770,"type":15},"ASP.NET Core",{"name":781,"slug":782,"type":15},"Blazor","blazor",{"name":784,"slug":785,"type":15},"C#","csharp",{"name":787,"slug":788,"type":15},"Web Development","web-development",23787,"https:\u002F\u002Fgithub.com\u002Fopenai\u002Fskills","2026-04-12T05:07:02.819491",{"slug":793,"name":793,"fn":794,"description":795,"org":796,"tags":797,"stars":789,"repoUrl":790,"updatedAt":808},"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},[798,801,804,807],{"name":799,"slug":800,"type":15},"Apps SDK","apps-sdk",{"name":802,"slug":803,"type":15},"ChatGPT","chatgpt",{"name":805,"slug":806,"type":15},"MCP","mcp",{"name":9,"slug":8,"type":15},"2026-04-12T05:07:05.468097",{"slug":810,"name":810,"fn":811,"description":812,"org":813,"tags":814,"stars":789,"repoUrl":790,"updatedAt":824},"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},[815,818,821],{"name":816,"slug":817,"type":15},"API Development","api-development",{"name":819,"slug":820,"type":15},"CLI","cli",{"name":822,"slug":823,"type":15},"Codex","codex","2026-04-12T05:07:04.132762",{"slug":826,"name":826,"fn":827,"description":828,"org":829,"tags":830,"stars":789,"repoUrl":790,"updatedAt":843},"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},[831,834,837,840],{"name":832,"slug":833,"type":15},"Cloudflare","cloudflare",{"name":835,"slug":836,"type":15},"Cloudflare Pages","cloudflare-pages",{"name":838,"slug":839,"type":15},"Cloudflare Workers","cloudflare-workers",{"name":841,"slug":842,"type":15},"Deployment","deployment","2026-04-12T05:07:14.275118",{"slug":845,"name":845,"fn":846,"description":847,"org":848,"tags":849,"stars":789,"repoUrl":790,"updatedAt":862},"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},[850,853,856,859],{"name":851,"slug":852,"type":15},"Productivity","productivity",{"name":854,"slug":855,"type":15},"Project Management","project-management",{"name":857,"slug":858,"type":15},"Strategy","strategy",{"name":860,"slug":861,"type":15},"Task Management","task-management","2026-05-23T06:17:16.870838",{"slug":864,"name":864,"fn":865,"description":866,"org":867,"tags":868,"stars":789,"repoUrl":790,"updatedAt":874},"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},[869,870,872,873],{"name":26,"slug":27,"type":15},{"name":871,"slug":864,"type":15},"Figma",{"name":23,"slug":24,"type":15},{"name":805,"slug":806,"type":15},"2026-04-12T05:06:47.939943",{"slug":876,"name":876,"fn":877,"description":878,"org":879,"tags":880,"stars":789,"repoUrl":790,"updatedAt":890},"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},[881,882,885,886,887],{"name":26,"slug":27,"type":15},{"name":883,"slug":884,"type":15},"Design System","design-system",{"name":871,"slug":864,"type":15},{"name":23,"slug":24,"type":15},{"name":888,"slug":889,"type":15},"UI Components","ui-components","2026-05-10T05:59:52.971881",{"slug":892,"name":892,"fn":893,"description":894,"org":895,"tags":896,"stars":789,"repoUrl":790,"updatedAt":904},"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},[897,898,899,902,903],{"name":26,"slug":27,"type":15},{"name":883,"slug":884,"type":15},{"name":900,"slug":901,"type":15},"Documentation","documentation",{"name":871,"slug":864,"type":15},{"name":23,"slug":24,"type":15},"2026-05-16T06:07:47.821474",{"slug":906,"name":906,"fn":907,"description":908,"org":909,"tags":910,"stars":789,"repoUrl":790,"updatedAt":916},"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},[911,912,913,914,915],{"name":26,"slug":27,"type":15},{"name":871,"slug":864,"type":15},{"name":23,"slug":24,"type":15},{"name":888,"slug":889,"type":15},{"name":787,"slug":788,"type":15},"2026-05-16T06:07:40.583615",{"slug":918,"name":918,"fn":919,"description":920,"org":921,"tags":922,"stars":789,"repoUrl":790,"updatedAt":931},"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},[923,926,927,930],{"name":924,"slug":925,"type":15},"Animation","animation",{"name":822,"slug":823,"type":15},{"name":928,"slug":929,"type":15},"Creative","creative",{"name":26,"slug":27,"type":15},"2026-05-02T05:31:48.48485",{"slug":933,"name":933,"fn":934,"description":935,"org":936,"tags":937,"stars":789,"repoUrl":790,"updatedAt":947},"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},[938,939,940,943,946],{"name":928,"slug":929,"type":15},{"name":26,"slug":27,"type":15},{"name":941,"slug":942,"type":15},"Image Generation","image-generation",{"name":944,"slug":945,"type":15},"Images","images",{"name":9,"slug":8,"type":15},"2026-05-15T06:23:24.312127",675,{"items":950,"total":1064},[951,968,984,996,1014,1032,1052],{"slug":952,"name":952,"fn":953,"description":954,"org":955,"tags":956,"stars":28,"repoUrl":29,"updatedAt":967},"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},[957,960,963,966],{"name":958,"slug":959,"type":15},"Accessibility","accessibility",{"name":961,"slug":962,"type":15},"Charts","charts",{"name":964,"slug":965,"type":15},"Data Visualization","data-visualization",{"name":26,"slug":27,"type":15},"2026-06-30T19:00:57.102",{"slug":969,"name":969,"fn":970,"description":971,"org":972,"tags":973,"stars":28,"repoUrl":29,"updatedAt":983},"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},[974,977,980],{"name":975,"slug":976,"type":15},"Agents","agents",{"name":978,"slug":979,"type":15},"Browser Automation","browser-automation",{"name":981,"slug":982,"type":15},"Testing","testing","2026-04-06T18:41:03.44016",{"slug":985,"name":985,"fn":986,"description":987,"org":988,"tags":989,"stars":28,"repoUrl":29,"updatedAt":995},"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},[990,991,994],{"name":978,"slug":979,"type":15},{"name":992,"slug":993,"type":15},"Local Development","local-development",{"name":981,"slug":982,"type":15},"2026-04-06T18:41:17.526867",{"slug":997,"name":997,"fn":998,"description":999,"org":1000,"tags":1001,"stars":28,"repoUrl":29,"updatedAt":1013},"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},[1002,1003,1004,1007,1010],{"name":975,"slug":976,"type":15},{"name":838,"slug":839,"type":15},{"name":1005,"slug":1006,"type":15},"SDK","sdk",{"name":1008,"slug":1009,"type":15},"Serverless","serverless",{"name":1011,"slug":1012,"type":15},"WebSockets","websockets","2026-04-06T18:39:51.717063",{"slug":1015,"name":1015,"fn":1016,"description":1017,"org":1018,"tags":1019,"stars":28,"repoUrl":29,"updatedAt":1031},"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},[1020,1021,1024,1027,1028],{"name":23,"slug":24,"type":15},{"name":1022,"slug":1023,"type":15},"React","react",{"name":1025,"slug":1026,"type":15},"shadcn\u002Fui","shadcn-ui",{"name":888,"slug":889,"type":15},{"name":1029,"slug":1030,"type":15},"Vercel","vercel","2026-04-06T18:40:59.619419",{"slug":1033,"name":1033,"fn":1034,"description":1035,"org":1036,"tags":1037,"stars":28,"repoUrl":29,"updatedAt":1051},"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},[1038,1041,1044,1047,1050],{"name":1039,"slug":1040,"type":15},"AI Infrastructure","ai-infrastructure",{"name":1042,"slug":1043,"type":15},"Cost Optimization","cost-optimization",{"name":1045,"slug":1046,"type":15},"LLM","llm",{"name":1048,"slug":1049,"type":15},"Performance","performance",{"name":1029,"slug":1030,"type":15},"2026-04-06T18:40:44.377464",{"slug":1053,"name":1053,"fn":1054,"description":1055,"org":1056,"tags":1057,"stars":28,"repoUrl":29,"updatedAt":1063},"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},[1058,1059,1062],{"name":1042,"slug":1043,"type":15},{"name":1060,"slug":1061,"type":15},"Database","database",{"name":1045,"slug":1046,"type":15},"2026-04-06T18:41:08.513425",600]