[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-openai-url-to-code":3,"mdc-backgm-key":36,"related-repo-openai-url-to-code":921,"related-org-openai-url-to-code":1036},{"slug":4,"name":4,"fn":5,"description":6,"org":7,"tags":11,"stars":25,"repoUrl":26,"updatedAt":27,"license":28,"forks":29,"topics":30,"repo":31,"sourceUrl":34,"mdContent":35},"url-to-code","clone live URLs as frontend applications","Clone a live URL as a runnable frontend-only local app.",{"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],{"name":13,"slug":14,"type":15},"Prototyping","prototyping","tag",{"name":17,"slug":18,"type":15},"Web Development","web-development",{"name":20,"slug":21,"type":15},"Frontend","frontend",{"name":23,"slug":24,"type":15},"Browser Automation","browser-automation",427,"https:\u002F\u002Fgithub.com\u002Fopenai\u002Frole-specific-plugins","2026-07-01T07:54:40.770384",null,65,[],{"repoUrl":26,"stars":25,"forks":29,"topics":32,"description":33},[],"Role-specific Codex plugin templates","https:\u002F\u002Fgithub.com\u002Fopenai\u002Frole-specific-plugins\u002Ftree\u002FHEAD\u002Fplugins\u002Fproduct-design\u002Fskills\u002Furl-to-code","---\nname: url-to-code\ndescription: \"Clone a live URL as a runnable frontend-only local app.\"\n---\n\n# URL To Code\n\nIf the user explicitly invokes this skill, continue.\n\nOnly continue when the user asks to clone or recreate the current site.\n\nIf the user says `like`, `better`, `redesign`, or `improve`, return to [$index](..\u002Findex\u002FSKILL.md).\n\nClone `\u003Ctarget-url>` as a real interactive, frontend-only local app or website. The clone should look and interact like the source.\n\n## Critical Overrides\n\n- Refer to the Plugin router [$index](..\u002Findex\u002FSKILL.md) before proceeding.\n- Follow [$critical-overrides](..\u002F..\u002Freferences\u002Fcritical-overrides.md).\n\n## User Context\n\nBefore starting, load [$user-context](..\u002Fuser-context\u002FSKILL.md) and run its preflight script when local shell access is available.\n\nUse saved product URLs, Figma files, screenshots, reference images, codebase paths, Storybook, tokens, design systems, brand assets, component refs, browser preferences, and share targets as grounding material when relevant.\n\nDo not inspect every saved reference. Inspect only what the current task needs.\n\n## Workflow\n\n1. CRITICAL STEP: Warn the user that they must follow the target website's terms before proceeding. This workflow is only for apps and websites the user owns, or has permission to recreate.\n\n2. Open the source URL using the Browser Choice rule in [$index](..\u002Findex\u002FSKILL.md#browser-choice).\n\n3. Check that the page is correct.\n\n- Do not continue if it shows the wrong page, a blocked page, a login page, a promo page, a loading screen, an error page, an app-install page, or an unrelated redirect.\n- If the page is wrong, try again with another available browser.\n- If every browser shows the wrong page, stop and tell the user what you can see.\n\n4. Capture the source page carefully.\n\n- Start at the top of the page.\n- Scroll down in small steps.\n- At each step, capture what is visible.\n- Note any new sections, controls, sticky elements, animations, or lazy-loaded assets.\n- Continue until the full page has been seen.\n- Scroll back to the top and check whether anything changed.\n- Repeat on mobile at `390 x 844`.\n\n5. Use the browser DOM tools to gather everything needed to recreate the source.\n\n- Elements\n- Components\n- Text\n- Links\n- Buttons and controls\n- States\n- Images\n- Icons\n- Fonts\n- Videos\n- SVGs\n- Style sheets\n- Colors\n- Spacing\n- Layout sizes\n- Responsive behavior\n\n6. Find and test the page interactions.\n\n- Use the screenshots and browser DOM tools to find visible controls.\n- Include navigation, buttons, links, inputs, menus, drawers, modals, tabs, carousels, hover states, sticky elements, and anything else the user can interact with.\n- Test one control at a time.\n- Return to the starting state before testing the next control.\n- Save the result when the page visibly changes or the browser tools show a state change.\n\n7. Copy the real assets from the source page.\n\n- If the page loads the asset, treat it as available unless the browser cannot access or save it.\n- If an image, logo, icon, font, video, SVG, sprite, mask, cursor, or background image is used by the page, copy it locally.\n- If an image asset cannot be copied, generate a replacement with ImageGen using a screenshot of the original.\n- If a font file cannot be copied, use the closest open source font match.\n- If an icon or glyph cannot be copied, use the closest matching open source icon set. Do not default to Lucide unless it is the closest match.\n- Briefly note any asset, font, or icon you replaced and why.\n\n8. Create the local app with [local-prototype-preflight](..\u002F..\u002Freferences\u002Flocal-prototype-preflight.md).\n\n9. Build only from what you captured, copied, or gathered from the source.\n\n- Do not add new visual ideas.\n- Do not use hotlinked source assets.\n- Do not guess when source proof is available.\n\n10. Run the local app.\n\n### Previewing prototypes in ChatGPT Work Mode\n\nStarting `sites-preview` is not verification. Verification requires opening `http:\u002F\u002Fterminal.local:4173\u002F` in the cloud browser, inspecting the rendered page, testing primary interactions, checking browser console errors, and passing design QA.\n\nDo not substitute HTTP health, build success, preview-service status, or deployment success for browser verification. If the cloud browser cannot be used, report verification as blocked.\n\nFor local prototype verification in ChatGPT Work Mode:\n\n1. Install dependencies if needed. The project must have an npm `dev` script.\n2. `sites-preview` runs `npm run dev -- --host 0.0.0.0 --port 4173 --strictPort`. The `dev` script must accept those flags.\n3. For Vite or Vinext projects, use `\"dev\": \"vite\"`. Do not use `vinext dev`. Configure Vite with `server.host: \"0.0.0.0\"` and `server.allowedHosts: [\"terminal.local\"]`.\n4. From the site root, run `sites-preview start \"$PWD\"`.\n5. Open `http:\u002F\u002Fterminal.local:4173\u002F` in the cloud browser. Do not use `localhost`, `127.0.0.1`, `0.0.0.0`, HTTPS, or another port.\n6. Verify the rendered site and its primary interactions before reporting completion.\n7. Never mention `terminal.local` or output that URL to the user. Deploy a checkpoint with `@Sites` and give the user only the deployed checkpoint URL.\n\n11. Compare the local app against the original.\n\n- Check desktop.\n- Check mobile.\n- Check every interaction you captured.\n- Fix any obvious mismatch before running final QA.\n\n12. Run [design-qa](..\u002Fdesign-qa\u002FSKILL.md) as the blocking build gate.\n\n- Save the QA report as `design-qa.md` in the project root.\n- Fix P0\u002FP1\u002FP2 issues, capture the app again, and repeat until the QA report says `final result: passed`.\n- Do not keep looping on P3 polish. Include any remaining P3s as follow-up iteration notes.\n- If source capture, prototype capture, or visual comparison is blocked, stop. `design-qa.md` must say `final result: blocked`.\n- Do not hand off unless `design-qa.md` exists and says `final result: passed`.\n\n13. Handoff the app or website\n\n- Only hand off after [design-qa](..\u002Fdesign-qa\u002FSKILL.md) passes.\n- Keep the prototype running locally.\n- In Codex Desktop, provide the clickable local URL. In ChatGPT Work Mode, deploy a checkpoint with `@Sites` and provide only its deployed URL; never output `terminal.local`.\n- After the prototype link, use the shared build handoff from `critical-overrides.md`. Do not add a different completion message.\n- Include the post-build iteration and share nudge from [critical-overrides](..\u002F..\u002Freferences\u002Fcritical-overrides.md#build-handoff).\n\n## Hard Rules\n\n- Capture source evidence first. Do not scaffold, write app code, start a server, or create the local prototype until desktop capture, mobile capture, key states, and every required asset, icon, control mark, and font is captured or replaced.\n- Do not hand off until every single interaction and state is captured from the target.\n- Do not build from memory, screenshots alone, guessed CSS, generic assets, or prior chats.\n- Do not implement a saved state without source screenshot plus the available DOM\u002Fstyle\u002Flayout evidence for that state.\n- Do not use hotlinked source assets in the final app.\n- Do not create temporary CSS icons, text glyphs, emoji marks, placeholder blocks, or handmade SVGs while \"waiting\" to resolve assets. Resolve assets first, then build.\n- If no approved browser can capture valid source and prototype evidence, stop and report the design-qa blocker.\n",{"data":37,"body":38},{"name":4,"description":6},{"type":39,"children":40},"root",[41,49,55,60,106,119,126,154,160,173,178,183,189,214,232,241,286,295,378,387,415,424,457,478,496,505,512,533,538,543,697,720,737,807,816,877,883],{"type":42,"tag":43,"props":44,"children":45},"element","h1",{"id":4},[46],{"type":47,"value":48},"text","URL To Code",{"type":42,"tag":50,"props":51,"children":52},"p",{},[53],{"type":47,"value":54},"If the user explicitly invokes this skill, continue.",{"type":42,"tag":50,"props":56,"children":57},{},[58],{"type":47,"value":59},"Only continue when the user asks to clone or recreate the current site.",{"type":42,"tag":50,"props":61,"children":62},{},[63,65,72,74,80,81,87,89,95,97,104],{"type":47,"value":64},"If the user says ",{"type":42,"tag":66,"props":67,"children":69},"code",{"className":68},[],[70],{"type":47,"value":71},"like",{"type":47,"value":73},", ",{"type":42,"tag":66,"props":75,"children":77},{"className":76},[],[78],{"type":47,"value":79},"better",{"type":47,"value":73},{"type":42,"tag":66,"props":82,"children":84},{"className":83},[],[85],{"type":47,"value":86},"redesign",{"type":47,"value":88},", or ",{"type":42,"tag":66,"props":90,"children":92},{"className":91},[],[93],{"type":47,"value":94},"improve",{"type":47,"value":96},", return to ",{"type":42,"tag":98,"props":99,"children":101},"a",{"href":100},"..\u002Findex\u002FSKILL.md",[102],{"type":47,"value":103},"$index",{"type":47,"value":105},".",{"type":42,"tag":50,"props":107,"children":108},{},[109,111,117],{"type":47,"value":110},"Clone ",{"type":42,"tag":66,"props":112,"children":114},{"className":113},[],[115],{"type":47,"value":116},"\u003Ctarget-url>",{"type":47,"value":118}," as a real interactive, frontend-only local app or website. The clone should look and interact like the source.",{"type":42,"tag":120,"props":121,"children":123},"h2",{"id":122},"critical-overrides",[124],{"type":47,"value":125},"Critical Overrides",{"type":42,"tag":127,"props":128,"children":129},"ul",{},[130,142],{"type":42,"tag":131,"props":132,"children":133},"li",{},[134,136,140],{"type":47,"value":135},"Refer to the Plugin router ",{"type":42,"tag":98,"props":137,"children":138},{"href":100},[139],{"type":47,"value":103},{"type":47,"value":141}," before proceeding.",{"type":42,"tag":131,"props":143,"children":144},{},[145,147,153],{"type":47,"value":146},"Follow ",{"type":42,"tag":98,"props":148,"children":150},{"href":149},"..\u002F..\u002Freferences\u002Fcritical-overrides.md",[151],{"type":47,"value":152},"$critical-overrides",{"type":47,"value":105},{"type":42,"tag":120,"props":155,"children":157},{"id":156},"user-context",[158],{"type":47,"value":159},"User Context",{"type":42,"tag":50,"props":161,"children":162},{},[163,165,171],{"type":47,"value":164},"Before starting, load ",{"type":42,"tag":98,"props":166,"children":168},{"href":167},"..\u002Fuser-context\u002FSKILL.md",[169],{"type":47,"value":170},"$user-context",{"type":47,"value":172}," and run its preflight script when local shell access is available.",{"type":42,"tag":50,"props":174,"children":175},{},[176],{"type":47,"value":177},"Use saved product URLs, Figma files, screenshots, reference images, codebase paths, Storybook, tokens, design systems, brand assets, component refs, browser preferences, and share targets as grounding material when relevant.",{"type":42,"tag":50,"props":179,"children":180},{},[181],{"type":47,"value":182},"Do not inspect every saved reference. Inspect only what the current task needs.",{"type":42,"tag":120,"props":184,"children":186},{"id":185},"workflow",[187],{"type":47,"value":188},"Workflow",{"type":42,"tag":190,"props":191,"children":192},"ol",{},[193,198,209],{"type":42,"tag":131,"props":194,"children":195},{},[196],{"type":47,"value":197},"CRITICAL STEP: Warn the user that they must follow the target website's terms before proceeding. This workflow is only for apps and websites the user owns, or has permission to recreate.",{"type":42,"tag":131,"props":199,"children":200},{},[201,203,208],{"type":47,"value":202},"Open the source URL using the Browser Choice rule in ",{"type":42,"tag":98,"props":204,"children":206},{"href":205},"..\u002Findex\u002FSKILL.md#browser-choice",[207],{"type":47,"value":103},{"type":47,"value":105},{"type":42,"tag":131,"props":210,"children":211},{},[212],{"type":47,"value":213},"Check that the page is correct.",{"type":42,"tag":127,"props":215,"children":216},{},[217,222,227],{"type":42,"tag":131,"props":218,"children":219},{},[220],{"type":47,"value":221},"Do not continue if it shows the wrong page, a blocked page, a login page, a promo page, a loading screen, an error page, an app-install page, or an unrelated redirect.",{"type":42,"tag":131,"props":223,"children":224},{},[225],{"type":47,"value":226},"If the page is wrong, try again with another available browser.",{"type":42,"tag":131,"props":228,"children":229},{},[230],{"type":47,"value":231},"If every browser shows the wrong page, stop and tell the user what you can see.",{"type":42,"tag":190,"props":233,"children":235},{"start":234},4,[236],{"type":42,"tag":131,"props":237,"children":238},{},[239],{"type":47,"value":240},"Capture the source page carefully.",{"type":42,"tag":127,"props":242,"children":243},{},[244,249,254,259,264,269,274],{"type":42,"tag":131,"props":245,"children":246},{},[247],{"type":47,"value":248},"Start at the top of the page.",{"type":42,"tag":131,"props":250,"children":251},{},[252],{"type":47,"value":253},"Scroll down in small steps.",{"type":42,"tag":131,"props":255,"children":256},{},[257],{"type":47,"value":258},"At each step, capture what is visible.",{"type":42,"tag":131,"props":260,"children":261},{},[262],{"type":47,"value":263},"Note any new sections, controls, sticky elements, animations, or lazy-loaded assets.",{"type":42,"tag":131,"props":265,"children":266},{},[267],{"type":47,"value":268},"Continue until the full page has been seen.",{"type":42,"tag":131,"props":270,"children":271},{},[272],{"type":47,"value":273},"Scroll back to the top and check whether anything changed.",{"type":42,"tag":131,"props":275,"children":276},{},[277,279,285],{"type":47,"value":278},"Repeat on mobile at ",{"type":42,"tag":66,"props":280,"children":282},{"className":281},[],[283],{"type":47,"value":284},"390 x 844",{"type":47,"value":105},{"type":42,"tag":190,"props":287,"children":289},{"start":288},5,[290],{"type":42,"tag":131,"props":291,"children":292},{},[293],{"type":47,"value":294},"Use the browser DOM tools to gather everything needed to recreate the source.",{"type":42,"tag":127,"props":296,"children":297},{},[298,303,308,313,318,323,328,333,338,343,348,353,358,363,368,373],{"type":42,"tag":131,"props":299,"children":300},{},[301],{"type":47,"value":302},"Elements",{"type":42,"tag":131,"props":304,"children":305},{},[306],{"type":47,"value":307},"Components",{"type":42,"tag":131,"props":309,"children":310},{},[311],{"type":47,"value":312},"Text",{"type":42,"tag":131,"props":314,"children":315},{},[316],{"type":47,"value":317},"Links",{"type":42,"tag":131,"props":319,"children":320},{},[321],{"type":47,"value":322},"Buttons and controls",{"type":42,"tag":131,"props":324,"children":325},{},[326],{"type":47,"value":327},"States",{"type":42,"tag":131,"props":329,"children":330},{},[331],{"type":47,"value":332},"Images",{"type":42,"tag":131,"props":334,"children":335},{},[336],{"type":47,"value":337},"Icons",{"type":42,"tag":131,"props":339,"children":340},{},[341],{"type":47,"value":342},"Fonts",{"type":42,"tag":131,"props":344,"children":345},{},[346],{"type":47,"value":347},"Videos",{"type":42,"tag":131,"props":349,"children":350},{},[351],{"type":47,"value":352},"SVGs",{"type":42,"tag":131,"props":354,"children":355},{},[356],{"type":47,"value":357},"Style sheets",{"type":42,"tag":131,"props":359,"children":360},{},[361],{"type":47,"value":362},"Colors",{"type":42,"tag":131,"props":364,"children":365},{},[366],{"type":47,"value":367},"Spacing",{"type":42,"tag":131,"props":369,"children":370},{},[371],{"type":47,"value":372},"Layout sizes",{"type":42,"tag":131,"props":374,"children":375},{},[376],{"type":47,"value":377},"Responsive behavior",{"type":42,"tag":190,"props":379,"children":381},{"start":380},6,[382],{"type":42,"tag":131,"props":383,"children":384},{},[385],{"type":47,"value":386},"Find and test the page interactions.",{"type":42,"tag":127,"props":388,"children":389},{},[390,395,400,405,410],{"type":42,"tag":131,"props":391,"children":392},{},[393],{"type":47,"value":394},"Use the screenshots and browser DOM tools to find visible controls.",{"type":42,"tag":131,"props":396,"children":397},{},[398],{"type":47,"value":399},"Include navigation, buttons, links, inputs, menus, drawers, modals, tabs, carousels, hover states, sticky elements, and anything else the user can interact with.",{"type":42,"tag":131,"props":401,"children":402},{},[403],{"type":47,"value":404},"Test one control at a time.",{"type":42,"tag":131,"props":406,"children":407},{},[408],{"type":47,"value":409},"Return to the starting state before testing the next control.",{"type":42,"tag":131,"props":411,"children":412},{},[413],{"type":47,"value":414},"Save the result when the page visibly changes or the browser tools show a state change.",{"type":42,"tag":190,"props":416,"children":418},{"start":417},7,[419],{"type":42,"tag":131,"props":420,"children":421},{},[422],{"type":47,"value":423},"Copy the real assets from the source page.",{"type":42,"tag":127,"props":425,"children":426},{},[427,432,437,442,447,452],{"type":42,"tag":131,"props":428,"children":429},{},[430],{"type":47,"value":431},"If the page loads the asset, treat it as available unless the browser cannot access or save it.",{"type":42,"tag":131,"props":433,"children":434},{},[435],{"type":47,"value":436},"If an image, logo, icon, font, video, SVG, sprite, mask, cursor, or background image is used by the page, copy it locally.",{"type":42,"tag":131,"props":438,"children":439},{},[440],{"type":47,"value":441},"If an image asset cannot be copied, generate a replacement with ImageGen using a screenshot of the original.",{"type":42,"tag":131,"props":443,"children":444},{},[445],{"type":47,"value":446},"If a font file cannot be copied, use the closest open source font match.",{"type":42,"tag":131,"props":448,"children":449},{},[450],{"type":47,"value":451},"If an icon or glyph cannot be copied, use the closest matching open source icon set. Do not default to Lucide unless it is the closest match.",{"type":42,"tag":131,"props":453,"children":454},{},[455],{"type":47,"value":456},"Briefly note any asset, font, or icon you replaced and why.",{"type":42,"tag":190,"props":458,"children":460},{"start":459},8,[461,473],{"type":42,"tag":131,"props":462,"children":463},{},[464,466,472],{"type":47,"value":465},"Create the local app with ",{"type":42,"tag":98,"props":467,"children":469},{"href":468},"..\u002F..\u002Freferences\u002Flocal-prototype-preflight.md",[470],{"type":47,"value":471},"local-prototype-preflight",{"type":47,"value":105},{"type":42,"tag":131,"props":474,"children":475},{},[476],{"type":47,"value":477},"Build only from what you captured, copied, or gathered from the source.",{"type":42,"tag":127,"props":479,"children":480},{},[481,486,491],{"type":42,"tag":131,"props":482,"children":483},{},[484],{"type":47,"value":485},"Do not add new visual ideas.",{"type":42,"tag":131,"props":487,"children":488},{},[489],{"type":47,"value":490},"Do not use hotlinked source assets.",{"type":42,"tag":131,"props":492,"children":493},{},[494],{"type":47,"value":495},"Do not guess when source proof is available.",{"type":42,"tag":190,"props":497,"children":499},{"start":498},10,[500],{"type":42,"tag":131,"props":501,"children":502},{},[503],{"type":47,"value":504},"Run the local app.",{"type":42,"tag":506,"props":507,"children":509},"h3",{"id":508},"previewing-prototypes-in-chatgpt-work-mode",[510],{"type":47,"value":511},"Previewing prototypes in ChatGPT Work Mode",{"type":42,"tag":50,"props":513,"children":514},{},[515,517,523,525,531],{"type":47,"value":516},"Starting ",{"type":42,"tag":66,"props":518,"children":520},{"className":519},[],[521],{"type":47,"value":522},"sites-preview",{"type":47,"value":524}," is not verification. Verification requires opening ",{"type":42,"tag":66,"props":526,"children":528},{"className":527},[],[529],{"type":47,"value":530},"http:\u002F\u002Fterminal.local:4173\u002F",{"type":47,"value":532}," in the cloud browser, inspecting the rendered page, testing primary interactions, checking browser console errors, and passing design QA.",{"type":42,"tag":50,"props":534,"children":535},{},[536],{"type":47,"value":537},"Do not substitute HTTP health, build success, preview-service status, or deployment success for browser verification. If the cloud browser cannot be used, report verification as blocked.",{"type":42,"tag":50,"props":539,"children":540},{},[541],{"type":47,"value":542},"For local prototype verification in ChatGPT Work Mode:",{"type":42,"tag":190,"props":544,"children":545},{},[546,559,584,620,632,666,671,692],{"type":42,"tag":131,"props":547,"children":548},{},[549,551,557],{"type":47,"value":550},"Install dependencies if needed. The project must have an npm ",{"type":42,"tag":66,"props":552,"children":554},{"className":553},[],[555],{"type":47,"value":556},"dev",{"type":47,"value":558}," script.",{"type":42,"tag":131,"props":560,"children":561},{},[562,567,569,575,577,582],{"type":42,"tag":66,"props":563,"children":565},{"className":564},[],[566],{"type":47,"value":522},{"type":47,"value":568}," runs ",{"type":42,"tag":66,"props":570,"children":572},{"className":571},[],[573],{"type":47,"value":574},"npm run dev -- --host 0.0.0.0 --port 4173 --strictPort",{"type":47,"value":576},". The ",{"type":42,"tag":66,"props":578,"children":580},{"className":579},[],[581],{"type":47,"value":556},{"type":47,"value":583}," script must accept those flags.",{"type":42,"tag":131,"props":585,"children":586},{},[587,589,595,597,603,605,611,613,619],{"type":47,"value":588},"For Vite or Vinext projects, use ",{"type":42,"tag":66,"props":590,"children":592},{"className":591},[],[593],{"type":47,"value":594},"\"dev\": \"vite\"",{"type":47,"value":596},". Do not use ",{"type":42,"tag":66,"props":598,"children":600},{"className":599},[],[601],{"type":47,"value":602},"vinext dev",{"type":47,"value":604},". Configure Vite with ",{"type":42,"tag":66,"props":606,"children":608},{"className":607},[],[609],{"type":47,"value":610},"server.host: \"0.0.0.0\"",{"type":47,"value":612}," and ",{"type":42,"tag":66,"props":614,"children":616},{"className":615},[],[617],{"type":47,"value":618},"server.allowedHosts: [\"terminal.local\"]",{"type":47,"value":105},{"type":42,"tag":131,"props":621,"children":622},{},[623,625,631],{"type":47,"value":624},"From the site root, run ",{"type":42,"tag":66,"props":626,"children":628},{"className":627},[],[629],{"type":47,"value":630},"sites-preview start \"$PWD\"",{"type":47,"value":105},{"type":42,"tag":131,"props":633,"children":634},{},[635,637,642,644,650,651,657,658,664],{"type":47,"value":636},"Open ",{"type":42,"tag":66,"props":638,"children":640},{"className":639},[],[641],{"type":47,"value":530},{"type":47,"value":643}," in the cloud browser. Do not use ",{"type":42,"tag":66,"props":645,"children":647},{"className":646},[],[648],{"type":47,"value":649},"localhost",{"type":47,"value":73},{"type":42,"tag":66,"props":652,"children":654},{"className":653},[],[655],{"type":47,"value":656},"127.0.0.1",{"type":47,"value":73},{"type":42,"tag":66,"props":659,"children":661},{"className":660},[],[662],{"type":47,"value":663},"0.0.0.0",{"type":47,"value":665},", HTTPS, or another port.",{"type":42,"tag":131,"props":667,"children":668},{},[669],{"type":47,"value":670},"Verify the rendered site and its primary interactions before reporting completion.",{"type":42,"tag":131,"props":672,"children":673},{},[674,676,682,684,690],{"type":47,"value":675},"Never mention ",{"type":42,"tag":66,"props":677,"children":679},{"className":678},[],[680],{"type":47,"value":681},"terminal.local",{"type":47,"value":683}," or output that URL to the user. Deploy a checkpoint with ",{"type":42,"tag":66,"props":685,"children":687},{"className":686},[],[688],{"type":47,"value":689},"@Sites",{"type":47,"value":691}," and give the user only the deployed checkpoint URL.",{"type":42,"tag":131,"props":693,"children":694},{},[695],{"type":47,"value":696},"Compare the local app against the original.",{"type":42,"tag":127,"props":698,"children":699},{},[700,705,710,715],{"type":42,"tag":131,"props":701,"children":702},{},[703],{"type":47,"value":704},"Check desktop.",{"type":42,"tag":131,"props":706,"children":707},{},[708],{"type":47,"value":709},"Check mobile.",{"type":42,"tag":131,"props":711,"children":712},{},[713],{"type":47,"value":714},"Check every interaction you captured.",{"type":42,"tag":131,"props":716,"children":717},{},[718],{"type":47,"value":719},"Fix any obvious mismatch before running final QA.",{"type":42,"tag":190,"props":721,"children":723},{"start":722},12,[724],{"type":42,"tag":131,"props":725,"children":726},{},[727,729,735],{"type":47,"value":728},"Run ",{"type":42,"tag":98,"props":730,"children":732},{"href":731},"..\u002Fdesign-qa\u002FSKILL.md",[733],{"type":47,"value":734},"design-qa",{"type":47,"value":736}," as the blocking build gate.",{"type":42,"tag":127,"props":738,"children":739},{},[740,753,765,770,789],{"type":42,"tag":131,"props":741,"children":742},{},[743,745,751],{"type":47,"value":744},"Save the QA report as ",{"type":42,"tag":66,"props":746,"children":748},{"className":747},[],[749],{"type":47,"value":750},"design-qa.md",{"type":47,"value":752}," in the project root.",{"type":42,"tag":131,"props":754,"children":755},{},[756,758,764],{"type":47,"value":757},"Fix P0\u002FP1\u002FP2 issues, capture the app again, and repeat until the QA report says ",{"type":42,"tag":66,"props":759,"children":761},{"className":760},[],[762],{"type":47,"value":763},"final result: passed",{"type":47,"value":105},{"type":42,"tag":131,"props":766,"children":767},{},[768],{"type":47,"value":769},"Do not keep looping on P3 polish. Include any remaining P3s as follow-up iteration notes.",{"type":42,"tag":131,"props":771,"children":772},{},[773,775,780,782,788],{"type":47,"value":774},"If source capture, prototype capture, or visual comparison is blocked, stop. ",{"type":42,"tag":66,"props":776,"children":778},{"className":777},[],[779],{"type":47,"value":750},{"type":47,"value":781}," must say ",{"type":42,"tag":66,"props":783,"children":785},{"className":784},[],[786],{"type":47,"value":787},"final result: blocked",{"type":47,"value":105},{"type":42,"tag":131,"props":790,"children":791},{},[792,794,799,801,806],{"type":47,"value":793},"Do not hand off unless ",{"type":42,"tag":66,"props":795,"children":797},{"className":796},[],[798],{"type":47,"value":750},{"type":47,"value":800}," exists and says ",{"type":42,"tag":66,"props":802,"children":804},{"className":803},[],[805],{"type":47,"value":763},{"type":47,"value":105},{"type":42,"tag":190,"props":808,"children":810},{"start":809},13,[811],{"type":42,"tag":131,"props":812,"children":813},{},[814],{"type":47,"value":815},"Handoff the app or website",{"type":42,"tag":127,"props":817,"children":818},{},[819,830,835,853,866],{"type":42,"tag":131,"props":820,"children":821},{},[822,824,828],{"type":47,"value":823},"Only hand off after ",{"type":42,"tag":98,"props":825,"children":826},{"href":731},[827],{"type":47,"value":734},{"type":47,"value":829}," passes.",{"type":42,"tag":131,"props":831,"children":832},{},[833],{"type":47,"value":834},"Keep the prototype running locally.",{"type":42,"tag":131,"props":836,"children":837},{},[838,840,845,847,852],{"type":47,"value":839},"In Codex Desktop, provide the clickable local URL. In ChatGPT Work Mode, deploy a checkpoint with ",{"type":42,"tag":66,"props":841,"children":843},{"className":842},[],[844],{"type":47,"value":689},{"type":47,"value":846}," and provide only its deployed URL; never output ",{"type":42,"tag":66,"props":848,"children":850},{"className":849},[],[851],{"type":47,"value":681},{"type":47,"value":105},{"type":42,"tag":131,"props":854,"children":855},{},[856,858,864],{"type":47,"value":857},"After the prototype link, use the shared build handoff from ",{"type":42,"tag":66,"props":859,"children":861},{"className":860},[],[862],{"type":47,"value":863},"critical-overrides.md",{"type":47,"value":865},". Do not add a different completion message.",{"type":42,"tag":131,"props":867,"children":868},{},[869,871,876],{"type":47,"value":870},"Include the post-build iteration and share nudge from ",{"type":42,"tag":98,"props":872,"children":874},{"href":873},"..\u002F..\u002Freferences\u002Fcritical-overrides.md#build-handoff",[875],{"type":47,"value":122},{"type":47,"value":105},{"type":42,"tag":120,"props":878,"children":880},{"id":879},"hard-rules",[881],{"type":47,"value":882},"Hard Rules",{"type":42,"tag":127,"props":884,"children":885},{},[886,891,896,901,906,911,916],{"type":42,"tag":131,"props":887,"children":888},{},[889],{"type":47,"value":890},"Capture source evidence first. Do not scaffold, write app code, start a server, or create the local prototype until desktop capture, mobile capture, key states, and every required asset, icon, control mark, and font is captured or replaced.",{"type":42,"tag":131,"props":892,"children":893},{},[894],{"type":47,"value":895},"Do not hand off until every single interaction and state is captured from the target.",{"type":42,"tag":131,"props":897,"children":898},{},[899],{"type":47,"value":900},"Do not build from memory, screenshots alone, guessed CSS, generic assets, or prior chats.",{"type":42,"tag":131,"props":902,"children":903},{},[904],{"type":47,"value":905},"Do not implement a saved state without source screenshot plus the available DOM\u002Fstyle\u002Flayout evidence for that state.",{"type":42,"tag":131,"props":907,"children":908},{},[909],{"type":47,"value":910},"Do not use hotlinked source assets in the final app.",{"type":42,"tag":131,"props":912,"children":913},{},[914],{"type":47,"value":915},"Do not create temporary CSS icons, text glyphs, emoji marks, placeholder blocks, or handmade SVGs while \"waiting\" to resolve assets. Resolve assets first, then build.",{"type":42,"tag":131,"props":917,"children":918},{},[919],{"type":47,"value":920},"If no approved browser can capture valid source and prototype evidence, stop and report the design-qa blocker.",{"items":922,"total":1035},[923,942,958,971,987,1003,1020],{"slug":924,"name":924,"fn":925,"description":926,"org":927,"tags":928,"stars":25,"repoUrl":26,"updatedAt":941},"analyze-account-signals","analyze account signals for sales intelligence","Use when the user wants to know what changed with one account, monitor an owner portfolio or watchlist, or rank accounts needing attention from recent evidence. Produce an evidence-backed account brief or bounded watchlist summary with recommended actions.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[929,932,935,938],{"name":930,"slug":931,"type":15},"Analytics","analytics",{"name":933,"slug":934,"type":15},"CRM","crm",{"name":936,"slug":937,"type":15},"Research","research",{"name":939,"slug":940,"type":15},"Sales","sales","2026-07-01T07:54:11.79288",{"slug":943,"name":943,"fn":944,"description":945,"org":946,"tags":947,"stars":25,"repoUrl":26,"updatedAt":957},"analyze-data-quality","assess data quality for analysis","Assess whether structured data, query results, dashboards, or analytical evidence are trustworthy enough to use. Use when the task is to check data quality, reconcile conflicting sources or metric definitions, or decide whether evidence is safe to cite.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[948,951,954],{"name":949,"slug":950,"type":15},"Audit","audit",{"name":952,"slug":953,"type":15},"Data Engineering","data-engineering",{"name":955,"slug":956,"type":15},"Data Quality","data-quality","2026-07-01T07:55:01.146961",{"slug":959,"name":959,"fn":960,"description":961,"org":962,"tags":963,"stars":25,"repoUrl":26,"updatedAt":970},"answers-ask-user-input","request missing context from users","Use when a small amount of missing context would materially improve the answer and tappable options plus a free-text answer can gather it efficiently.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[964,967],{"name":965,"slug":966,"type":15},"Communications","communications",{"name":968,"slug":969,"type":15},"Productivity","productivity","2026-07-14T05:43:36.096323",{"slug":972,"name":972,"fn":973,"description":974,"org":975,"tags":976,"stars":25,"repoUrl":26,"updatedAt":986},"apollo","prospect and enrich leads with Apollo","Use only when a focused Sales workflow has selected a present and connected Apollo connector, or the user explicitly asks for Apollo prospecting, enrichment, Company Details, records, sequences, or outbound planning. Apply Apollo v2-specific behavior only after verifying app version 2.0.0 or later.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[977,979,982,985],{"name":978,"slug":972,"type":15},"Apollo",{"name":980,"slug":981,"type":15},"Lead Enrichment","lead-enrichment",{"name":983,"slug":984,"type":15},"Prospecting","prospecting",{"name":939,"slug":940,"type":15},"2026-07-14T05:43:34.800076",{"slug":950,"name":950,"fn":988,"description":989,"org":990,"tags":991,"stars":25,"repoUrl":26,"updatedAt":1002},"audit product flows and user journeys","Audit or critique a product flow, journey, workflow, funnel, onboarding path, checkout path, settings path, screen, or multi-step product experience by capturing screenshots first, then reporting UX, design, and accessibility findings inline from that evidence. Use Figma only when the user explicitly asks for a board. Use when the user asks to audit, review, critique, inspect, assess, analyze, evaluate, or give feedback on a product experience.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[992,993,996,999],{"name":949,"slug":950,"type":15},{"name":994,"slug":995,"type":15},"Design","design",{"name":997,"slug":998,"type":15},"Product Management","product-management",{"name":1000,"slug":1001,"type":15},"UX Design","ux-design","2026-07-01T07:54:30.613428",{"slug":1004,"name":1004,"fn":1005,"description":1006,"org":1007,"tags":1008,"stars":25,"repoUrl":26,"updatedAt":1019},"build-business-case","build customer-led business cases and ROI","Review commercial proposals and build customer-led business cases, ROI or value models, pricing or investment rationales, executive summaries, and customer-ready value stories tied to a customer, workflow, initiative, or decision.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1009,1012,1015,1018],{"name":1010,"slug":1011,"type":15},"Content Creation","content-creation",{"name":1013,"slug":1014,"type":15},"Finance","finance",{"name":1016,"slug":1017,"type":15},"Financial Modeling","financial-modeling",{"name":939,"slug":940,"type":15},"2026-07-01T07:54:02.779003",{"slug":1021,"name":1021,"fn":1022,"description":1023,"org":1024,"tags":1025,"stars":25,"repoUrl":26,"updatedAt":1034},"build-competitive-brief","build competitive briefs and battlecards","Use when the user wants a competitor or vendor comparison, market-landscape analysis, battlecard, objection package, positioning brief, or account-specific competitive view. Produce an evidence-backed comparison, guidance, and brief, using supplied materials, connected research, and public evidence when appropriate.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1026,1029,1032,1033],{"name":1027,"slug":1028,"type":15},"Competitive Intelligence","competitive-intelligence",{"name":1030,"slug":1031,"type":15},"Marketing","marketing",{"name":936,"slug":937,"type":15},{"name":939,"slug":940,"type":15},"2026-07-01T07:54:13.073252",43,{"items":1037,"total":1233},[1038,1059,1080,1097,1113,1132,1149,1161,1177,1191,1203,1218],{"slug":1039,"name":1039,"fn":1040,"description":1041,"org":1042,"tags":1043,"stars":1056,"repoUrl":1057,"updatedAt":1058},"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},[1044,1047,1050,1053],{"name":1045,"slug":1046,"type":15},"Documents","documents",{"name":1048,"slug":1049,"type":15},"Healthcare","healthcare",{"name":1051,"slug":1052,"type":15},"Insurance","insurance",{"name":1054,"slug":1055,"type":15},"Regulatory Compliance","regulatory-compliance",28169,"https:\u002F\u002Fgithub.com\u002Fopenai\u002Fopenai-agents-python","2026-04-16T05:11:39.180399",{"slug":1060,"name":1060,"fn":1061,"description":1062,"org":1063,"tags":1064,"stars":1077,"repoUrl":1078,"updatedAt":1079},"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},[1065,1068,1070,1073,1076],{"name":1066,"slug":1067,"type":15},".NET","dotnet",{"name":1069,"slug":1060,"type":15},"ASP.NET Core",{"name":1071,"slug":1072,"type":15},"Blazor","blazor",{"name":1074,"slug":1075,"type":15},"C#","csharp",{"name":17,"slug":18,"type":15},23787,"https:\u002F\u002Fgithub.com\u002Fopenai\u002Fskills","2026-04-12T05:07:02.819491",{"slug":1081,"name":1081,"fn":1082,"description":1083,"org":1084,"tags":1085,"stars":1077,"repoUrl":1078,"updatedAt":1096},"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},[1086,1089,1092,1095],{"name":1087,"slug":1088,"type":15},"Apps SDK","apps-sdk",{"name":1090,"slug":1091,"type":15},"ChatGPT","chatgpt",{"name":1093,"slug":1094,"type":15},"MCP","mcp",{"name":9,"slug":8,"type":15},"2026-04-12T05:07:05.468097",{"slug":1098,"name":1098,"fn":1099,"description":1100,"org":1101,"tags":1102,"stars":1077,"repoUrl":1078,"updatedAt":1112},"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},[1103,1106,1109],{"name":1104,"slug":1105,"type":15},"API Development","api-development",{"name":1107,"slug":1108,"type":15},"CLI","cli",{"name":1110,"slug":1111,"type":15},"Codex","codex","2026-04-12T05:07:04.132762",{"slug":1114,"name":1114,"fn":1115,"description":1116,"org":1117,"tags":1118,"stars":1077,"repoUrl":1078,"updatedAt":1131},"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},[1119,1122,1125,1128],{"name":1120,"slug":1121,"type":15},"Cloudflare","cloudflare",{"name":1123,"slug":1124,"type":15},"Cloudflare Pages","cloudflare-pages",{"name":1126,"slug":1127,"type":15},"Cloudflare Workers","cloudflare-workers",{"name":1129,"slug":1130,"type":15},"Deployment","deployment","2026-04-12T05:07:14.275118",{"slug":1133,"name":1133,"fn":1134,"description":1135,"org":1136,"tags":1137,"stars":1077,"repoUrl":1078,"updatedAt":1148},"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},[1138,1139,1142,1145],{"name":968,"slug":969,"type":15},{"name":1140,"slug":1141,"type":15},"Project Management","project-management",{"name":1143,"slug":1144,"type":15},"Strategy","strategy",{"name":1146,"slug":1147,"type":15},"Task Management","task-management","2026-05-23T06:17:16.870838",{"slug":1150,"name":1150,"fn":1151,"description":1152,"org":1153,"tags":1154,"stars":1077,"repoUrl":1078,"updatedAt":1160},"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},[1155,1156,1158,1159],{"name":994,"slug":995,"type":15},{"name":1157,"slug":1150,"type":15},"Figma",{"name":20,"slug":21,"type":15},{"name":1093,"slug":1094,"type":15},"2026-04-12T05:06:47.939943",{"slug":1162,"name":1162,"fn":1163,"description":1164,"org":1165,"tags":1166,"stars":1077,"repoUrl":1078,"updatedAt":1176},"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},[1167,1168,1171,1172,1173],{"name":994,"slug":995,"type":15},{"name":1169,"slug":1170,"type":15},"Design System","design-system",{"name":1157,"slug":1150,"type":15},{"name":20,"slug":21,"type":15},{"name":1174,"slug":1175,"type":15},"UI Components","ui-components","2026-05-10T05:59:52.971881",{"slug":1178,"name":1178,"fn":1179,"description":1180,"org":1181,"tags":1182,"stars":1077,"repoUrl":1078,"updatedAt":1190},"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},[1183,1184,1185,1188,1189],{"name":994,"slug":995,"type":15},{"name":1169,"slug":1170,"type":15},{"name":1186,"slug":1187,"type":15},"Documentation","documentation",{"name":1157,"slug":1150,"type":15},{"name":20,"slug":21,"type":15},"2026-05-16T06:07:47.821474",{"slug":1192,"name":1192,"fn":1193,"description":1194,"org":1195,"tags":1196,"stars":1077,"repoUrl":1078,"updatedAt":1202},"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},[1197,1198,1199,1200,1201],{"name":994,"slug":995,"type":15},{"name":1157,"slug":1150,"type":15},{"name":20,"slug":21,"type":15},{"name":1174,"slug":1175,"type":15},{"name":17,"slug":18,"type":15},"2026-05-16T06:07:40.583615",{"slug":1204,"name":1204,"fn":1205,"description":1206,"org":1207,"tags":1208,"stars":1077,"repoUrl":1078,"updatedAt":1217},"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},[1209,1212,1213,1216],{"name":1210,"slug":1211,"type":15},"Animation","animation",{"name":1110,"slug":1111,"type":15},{"name":1214,"slug":1215,"type":15},"Creative","creative",{"name":994,"slug":995,"type":15},"2026-05-02T05:31:48.48485",{"slug":1219,"name":1219,"fn":1220,"description":1221,"org":1222,"tags":1223,"stars":1077,"repoUrl":1078,"updatedAt":1232},"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},[1224,1225,1226,1229,1231],{"name":1214,"slug":1215,"type":15},{"name":994,"slug":995,"type":15},{"name":1227,"slug":1228,"type":15},"Image Generation","image-generation",{"name":332,"slug":1230,"type":15},"images",{"name":9,"slug":8,"type":15},"2026-05-15T06:23:24.312127",675]