[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-openai-ideate":3,"mdc--ub4m0o-key":36,"related-repo-openai-ideate":768,"related-org-openai-ideate":881},{"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},"ideate","generate visual design alternatives","Generate image-based alternatives, remixes, or new design directions from a Product Design brief. Use when the user asks for design variants, visual exploration, remixes, or image-generated approaches from provided context.",{"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},"Creative","creative","tag",{"name":17,"slug":18,"type":15},"Ideation","ideation",{"name":20,"slug":21,"type":15},"Image Generation","image-generation",{"name":23,"slug":24,"type":15},"Design","design",427,"https:\u002F\u002Fgithub.com\u002Fopenai\u002Frole-specific-plugins","2026-07-01T07:54:34.324995",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\u002Fideate","---\nname: ideate\ndescription: \"Generate image-based alternatives, remixes, or new design directions from a Product Design brief. Use when the user asks for design variants, visual exploration, remixes, or image-generated approaches from provided context.\"\n---\n\n# Ideate\n\nYou're tasked with generating design concepts for a user's idea.\n\nFollow the shared Product Design routing guidance in [$index](..\u002Findex\u002FSKILL.md).\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\nAttach provided product URLs, Figma files, screenshots, reference images, codebase paths, Storybook, tokens, design systems, brand assets, component refs, browser preferences, and share targets to the Image Gen generations to align them to the design brief.\n\nDo not inspect every saved reference. Inspect only what the current task needs.\n\n## Workflow\n\nDo not generate images until `$get-context` has satisfied the minimum required design brief.\n\nBefore generating images:\n\n1. Understand the brief.\n\n- Identify the target: component, screen, feature\u002Fworkflow, or broad product idea.\n- Identify the intended user, product surface, and goal.\n- Preserve hard constraints from the user.\n- Run `get-context` if the minimum required design brief isn't satisfied.\n\n2. Resolve context.\n\n- Use provided files, screenshots, links, and visible references.\n- In a local workspace, look for nearby design documentation and other local visual context.\n- Check likely design context folders such as `user-context`, `storybook\u002F`, `.storybook\u002F`, `design-system\u002F`, `design-systems\u002F`, `tokens\u002F`, `components\u002F`, `app\u002F`, and generated prototype roots.\n- In an existing project, look for existing product screenshots, similar flows, Storybook captures, design tokens, and component references before generating. Ask if the user can provide example screens similar to the one they are building if the existing app isn't accessible. Ensure you add design language and tokens to the Image Gen prompt.\n\n3. Inspect references directly.\n\n- Look at screenshots, images, Figma frames, app surfaces, or other visual references before generating.\n- Do not infer from filenames alone.\n- If a named local path or reference is not visible, stop and ask the user to confirm the path, upload the file, start the local app, or point to the correct workspace.\n\n4. Decide the variation mode.\n\n- If useful local design context exists and the user has not asked for a new style, stay within that existing direction.\n- If no useful design context exists, or the user asks for broad exploration, vary both concept and visual system.\n- For a specific component or existing surface, vary structure, interaction, hierarchy, and emphasis before varying brand style.\n- For a broad product idea, explore three meaningfully different product directions.\n\n5. Choose target dimensions before Image Gen.\n\n- Pick the dimensions that best match the user's request and any provided visual reference.\n- Mobile app: `390 x 844`.\n- Tablet app: `834 x 1194`.\n- Desktop app, dashboard, admin, or SaaS: `1440 x 1024`.\n- Landing or marketing page: `1440` wide and scrollable.\n- Modal, panel, widget, or component: natural container size.\n- Provided screenshot, Figma frame, mockup, or reference image: match its dimensions and aspect ratio when the user wants to continue from that visual.\n- Avoid crowding. Make the design fit the chosen dimensions cleanly, with realistic spacing, readable type, and no clipped content.\n- Include the chosen dimensions in every Image Gen prompt.\n\n6. Check for access gaps.\n\n- If a connector, reference, or file cannot be accessed because of auth, permissions, expired login, missing scope, suspiciously empty results, or unavailable local state, stop.\n- Name the gap clearly and ask whether to troubleshoot access or continue without that source.\n- Do not generate images while silently ignoring a named reference.\n\n7. Attach images and mocks provided by the user to the Image Gen call along with your design brief.\n\n8. Generate 3 independent options that have distinct information hierarchy, layout strategy, interaction model, or product framing.\n\nRules you must follow:\n\n- Use the Image Gen prompt below.\n- Use the built-in Image Gen tool.\n- Generate exactly three independent images unless the user overrides the count.\n- Launch each Image Gen call independently. Do not batch Image Gen calls with `Promise.all`, collect them into an ordered array, or replay them in request order.\n- Each option must be its own Image Gen result. Do not put multiple ideas in one image.\n- Give each direction a distinct, descriptive name before generation, but do not call it `option 1`, `option 2`, or `option 3` and do not put planned numeric labels in Image Gen prompts. Parallel results can arrive in a different order from the requests.\n- Number options only after the Image Gen results are present in the thread. The only authoritative option order is the order those generated-image results are displayed in the current thread. Ignore the planned concept order, original request chain, prompt submission order, `Promise.all` result order, batch order, array indexes, retry order, and assumed completion order.\n- After all results return, bind each visible option number to the result in that displayed order. Do not name or describe the options in the final selection message.\n- Attach provided screenshots, files, app captures, Figma references, and visual source material as moodboard inspiration when available.\n- Attach existing product screenshots, similar flows, Storybook captures, design tokens, and component references as grounding material when available.\n- When mock data includes dates or time-sensitive information, resolve the exact current date and include it in every Image Gen prompt. Derive visible dates from that anchor; preserve dates required by the user or source design.\n- If a screenshot, image, or visual file is available, attach the actual image to the Image Gen call. Do not rely on text descriptions of it.\n- Only claim a visual reference was attached if the Image Gen call actually received that image or a readable local image path.\n- If you cannot attach the image, say that clearly and ask whether to continue with text-only direction.\n- Preserve hard constraints from the brief in every image.\n- After generating options, stop for the user's selection before any build work begins.\n- When the user later selects option `N`, resolve it against the Nth displayed generated-image result from the most recent ideation set, not the original planned concept order. If the exact displayed result cannot be resolved, do not build from a guess; ask the user to name the concept or reattach\u002Fselect the image.\n- The selected option is the visual target for `$image-to-code`.\n\n## Feedback Loop\n\nIf the user gives feedback after seeing options, generate revised options with that feedback.\n\nIf the user selects an option and gives feedback, generate a revised option with that feedback before build.\n\nIf the user likes parts of more than one option, combine those choices into a new Image Gen design and show it before build.\n\n## Image Gen Prompt\n\nAdapt this prompt to the current design brief, attach any available image references, and send it to Image Gen:\n\n```text\nCreate realistic, production-quality UI designs with clear hierarchy, strong typography, intentional imagery, and purposeful spacing.\n\nDesign a focused primary screen, not a feature inventory. The product may support many workflows, but this frame should show the hero use case, one clear primary action, and only one or two supporting actions or content areas. Do not add cards, panels, tabs, badges, metrics, filters, or navigation items merely to advertise every feature. Let the rest of the product exist off-screen. Prefer strong hierarchy and generous whitespace; if the screen feels crammed, remove UI.\n\n### Target Dimensions\n\nPick the dimensions that best match the user's request and any provided visual reference.\n\nDefault to a desktop web-app frame unless the user or reference clearly calls for mobile, tablet, or another format.\n\n - Mobile app: `390 x 844`\n - Tablet app: `834 x 1194`\n - Desktop app, dashboard, admin, or SaaS: `1440 x 1024`\n - Landing or marketing page: `1440` wide and scrollable\n - Modal, panel, widget, or component: natural container size\n - Provided screenshot, Figma frame, mockup, or reference image: match its dimensions and aspect ratio when the user wants to continue from that visual\n\nUse a natural viewport ratio for the intended surface. Never stretch, squash, or warp the generated screen, imagery, typography, or UI elements to fill the canvas. If the composition does not fit naturally, recompose or simplify the layout instead.\n\nAvoid crowding. Make the design fit the chosen dimensions cleanly, with realistic spacing, readable type, and no clipped content.\n\n### Layout\n\nWhen deciding how to lay elements out on the page, this should be your priority order for tools to differentiate sections:\n\n1. Use spacing, grouping, alignment, typography, and hierarchy on the same product surface.\n2. Use simple dividers or row separators.\n3. Use a subtle surface tint only when the base surface is not enough.\n4. Use borders only when separation still is not clear.\n5. Use shadows\u002Felevation last, and sparingly.\n\nDon'ts:\n - Do not default to a centered \"app card\" (the whole UI is in a card on the page) on top of a contrasting page background. Use the base page surface first unless the source product or user explicitly asks for a contained app panel.\n - Do not put cards inside cards. Do not make every major section a card. Do not make each list item its own card unless each item is truly a standalone object. A normal list should usually read as one grouped surface with lightweight row separation.\n - Do not make up extraneous features. Add only the things essential to accomplish what the prototype's goal is. Don't make up more features just to fill out a UI.\n\n### Typography\n\n - Anchor UI typography to readable product sizes. Body text should usually sit between 14px and 16px, with the rest of the type scale built around that baseline.\n - Keep long-form text to a comfortable line length, generally no more than 65 characters per line.\n - Use no more than 2 fonts in a UI. You can use any font available in the project, or fonts provided free on Google Fonts. Pick the font that is best for the goal of the product and that matches with its intended look and feel.\n\n### Presentation\n\n - Do not add browser or device chrome around the mockup.\n - Do not put multiple ideas into a single image generation.\n - Vary each idea as much as possible while adhering to the constraints given entirely.\n\n### Data Freshness\n\nWhen the design includes dates or time-sensitive mock data, use the supplied current date as the anchor. Weekly views must show the real containing week with correct weekday\u002Fdate pairs. Feeds, charts, notifications, and recent activity must use plausible chronological dates relative to today. Mark today when useful. Preserve dates required by the brief or source design.\n```\n\n## Output\n\nWait until all Image Gen calls have returned before sending the final message that asks the user to choose.\n\nDo not send the final selection message until every requested generated image is visible exactly once in the main chat.\n\nIf fewer Image Gen outputs are visible than requested, retry the missing generation. Do not send the selection message.\n\nNumber the returned Image Gen outputs in the order they appear in the conversation context:\n\n- First Image Gen output = Option 1\n- Second Image Gen output = Option 2\n- Third Image Gen output = Option 3\n\nIgnore the planned concept order, original request chain, request order, `Promise.all` result order, batch order, array indexes, retry order, and tool submission order.\n\nDo not name or describe the options. For the default three images, send only:\n\n`Which option should I build: 1, 2, or 3? Or tell me what you'd like to refine or personalize first.`\n\nAdjust the numbers only if the user requested a different count.\n\nIf the user chooses a number, acknowledge the chosen option before routing to `$image-to-code`, for example: `Building option 2!` Do not ask for confirmation when the mapping is clear.\n\nDone means the requested number of independent images have been generated and the user has been asked to select one.\n",{"data":37,"body":38},{"name":4,"description":6},{"type":39,"children":40},"root",[41,49,55,69,76,104,110,123,128,133,139,153,158,167,198,207,287,296,314,323,346,355,432,441,459,473,478,624,630,635,640,645,651,656,668,674,679,684,689,694,712,724,729,738,743,763],{"type":42,"tag":43,"props":44,"children":45},"element","h1",{"id":4},[46],{"type":47,"value":48},"text","Ideate",{"type":42,"tag":50,"props":51,"children":52},"p",{},[53],{"type":47,"value":54},"You're tasked with generating design concepts for a user's idea.",{"type":42,"tag":50,"props":56,"children":57},{},[58,60,67],{"type":47,"value":59},"Follow the shared Product Design routing guidance in ",{"type":42,"tag":61,"props":62,"children":64},"a",{"href":63},"..\u002Findex\u002FSKILL.md",[65],{"type":47,"value":66},"$index",{"type":47,"value":68},".",{"type":42,"tag":70,"props":71,"children":73},"h2",{"id":72},"critical-overrides",[74],{"type":47,"value":75},"Critical Overrides",{"type":42,"tag":77,"props":78,"children":79},"ul",{},[80,92],{"type":42,"tag":81,"props":82,"children":83},"li",{},[84,86,90],{"type":47,"value":85},"Refer to the Plugin router ",{"type":42,"tag":61,"props":87,"children":88},{"href":63},[89],{"type":47,"value":66},{"type":47,"value":91}," before proceeding.",{"type":42,"tag":81,"props":93,"children":94},{},[95,97,103],{"type":47,"value":96},"Follow ",{"type":42,"tag":61,"props":98,"children":100},{"href":99},"..\u002F..\u002Freferences\u002Fcritical-overrides.md",[101],{"type":47,"value":102},"$critical-overrides",{"type":47,"value":68},{"type":42,"tag":70,"props":105,"children":107},{"id":106},"user-context",[108],{"type":47,"value":109},"User Context",{"type":42,"tag":50,"props":111,"children":112},{},[113,115,121],{"type":47,"value":114},"Before starting, load ",{"type":42,"tag":61,"props":116,"children":118},{"href":117},"..\u002Fuser-context\u002FSKILL.md",[119],{"type":47,"value":120},"$user-context",{"type":47,"value":122}," and run its preflight script when local shell access is available.",{"type":42,"tag":50,"props":124,"children":125},{},[126],{"type":47,"value":127},"Attach provided product URLs, Figma files, screenshots, reference images, codebase paths, Storybook, tokens, design systems, brand assets, component refs, browser preferences, and share targets to the Image Gen generations to align them to the design brief.",{"type":42,"tag":50,"props":129,"children":130},{},[131],{"type":47,"value":132},"Do not inspect every saved reference. Inspect only what the current task needs.",{"type":42,"tag":70,"props":134,"children":136},{"id":135},"workflow",[137],{"type":47,"value":138},"Workflow",{"type":42,"tag":50,"props":140,"children":141},{},[142,144,151],{"type":47,"value":143},"Do not generate images until ",{"type":42,"tag":145,"props":146,"children":148},"code",{"className":147},[],[149],{"type":47,"value":150},"$get-context",{"type":47,"value":152}," has satisfied the minimum required design brief.",{"type":42,"tag":50,"props":154,"children":155},{},[156],{"type":47,"value":157},"Before generating images:",{"type":42,"tag":159,"props":160,"children":161},"ol",{},[162],{"type":42,"tag":81,"props":163,"children":164},{},[165],{"type":47,"value":166},"Understand the brief.",{"type":42,"tag":77,"props":168,"children":169},{},[170,175,180,185],{"type":42,"tag":81,"props":171,"children":172},{},[173],{"type":47,"value":174},"Identify the target: component, screen, feature\u002Fworkflow, or broad product idea.",{"type":42,"tag":81,"props":176,"children":177},{},[178],{"type":47,"value":179},"Identify the intended user, product surface, and goal.",{"type":42,"tag":81,"props":181,"children":182},{},[183],{"type":47,"value":184},"Preserve hard constraints from the user.",{"type":42,"tag":81,"props":186,"children":187},{},[188,190,196],{"type":47,"value":189},"Run ",{"type":42,"tag":145,"props":191,"children":193},{"className":192},[],[194],{"type":47,"value":195},"get-context",{"type":47,"value":197}," if the minimum required design brief isn't satisfied.",{"type":42,"tag":159,"props":199,"children":201},{"start":200},2,[202],{"type":42,"tag":81,"props":203,"children":204},{},[205],{"type":47,"value":206},"Resolve context.",{"type":42,"tag":77,"props":208,"children":209},{},[210,215,220,282],{"type":42,"tag":81,"props":211,"children":212},{},[213],{"type":47,"value":214},"Use provided files, screenshots, links, and visible references.",{"type":42,"tag":81,"props":216,"children":217},{},[218],{"type":47,"value":219},"In a local workspace, look for nearby design documentation and other local visual context.",{"type":42,"tag":81,"props":221,"children":222},{},[223,225,230,232,238,239,245,246,252,253,259,260,266,267,273,274,280],{"type":47,"value":224},"Check likely design context folders such as ",{"type":42,"tag":145,"props":226,"children":228},{"className":227},[],[229],{"type":47,"value":106},{"type":47,"value":231},", ",{"type":42,"tag":145,"props":233,"children":235},{"className":234},[],[236],{"type":47,"value":237},"storybook\u002F",{"type":47,"value":231},{"type":42,"tag":145,"props":240,"children":242},{"className":241},[],[243],{"type":47,"value":244},".storybook\u002F",{"type":47,"value":231},{"type":42,"tag":145,"props":247,"children":249},{"className":248},[],[250],{"type":47,"value":251},"design-system\u002F",{"type":47,"value":231},{"type":42,"tag":145,"props":254,"children":256},{"className":255},[],[257],{"type":47,"value":258},"design-systems\u002F",{"type":47,"value":231},{"type":42,"tag":145,"props":261,"children":263},{"className":262},[],[264],{"type":47,"value":265},"tokens\u002F",{"type":47,"value":231},{"type":42,"tag":145,"props":268,"children":270},{"className":269},[],[271],{"type":47,"value":272},"components\u002F",{"type":47,"value":231},{"type":42,"tag":145,"props":275,"children":277},{"className":276},[],[278],{"type":47,"value":279},"app\u002F",{"type":47,"value":281},", and generated prototype roots.",{"type":42,"tag":81,"props":283,"children":284},{},[285],{"type":47,"value":286},"In an existing project, look for existing product screenshots, similar flows, Storybook captures, design tokens, and component references before generating. Ask if the user can provide example screens similar to the one they are building if the existing app isn't accessible. Ensure you add design language and tokens to the Image Gen prompt.",{"type":42,"tag":159,"props":288,"children":290},{"start":289},3,[291],{"type":42,"tag":81,"props":292,"children":293},{},[294],{"type":47,"value":295},"Inspect references directly.",{"type":42,"tag":77,"props":297,"children":298},{},[299,304,309],{"type":42,"tag":81,"props":300,"children":301},{},[302],{"type":47,"value":303},"Look at screenshots, images, Figma frames, app surfaces, or other visual references before generating.",{"type":42,"tag":81,"props":305,"children":306},{},[307],{"type":47,"value":308},"Do not infer from filenames alone.",{"type":42,"tag":81,"props":310,"children":311},{},[312],{"type":47,"value":313},"If a named local path or reference is not visible, stop and ask the user to confirm the path, upload the file, start the local app, or point to the correct workspace.",{"type":42,"tag":159,"props":315,"children":317},{"start":316},4,[318],{"type":42,"tag":81,"props":319,"children":320},{},[321],{"type":47,"value":322},"Decide the variation mode.",{"type":42,"tag":77,"props":324,"children":325},{},[326,331,336,341],{"type":42,"tag":81,"props":327,"children":328},{},[329],{"type":47,"value":330},"If useful local design context exists and the user has not asked for a new style, stay within that existing direction.",{"type":42,"tag":81,"props":332,"children":333},{},[334],{"type":47,"value":335},"If no useful design context exists, or the user asks for broad exploration, vary both concept and visual system.",{"type":42,"tag":81,"props":337,"children":338},{},[339],{"type":47,"value":340},"For a specific component or existing surface, vary structure, interaction, hierarchy, and emphasis before varying brand style.",{"type":42,"tag":81,"props":342,"children":343},{},[344],{"type":47,"value":345},"For a broad product idea, explore three meaningfully different product directions.",{"type":42,"tag":159,"props":347,"children":349},{"start":348},5,[350],{"type":42,"tag":81,"props":351,"children":352},{},[353],{"type":47,"value":354},"Choose target dimensions before Image Gen.",{"type":42,"tag":77,"props":356,"children":357},{},[358,363,375,387,399,412,417,422,427],{"type":42,"tag":81,"props":359,"children":360},{},[361],{"type":47,"value":362},"Pick the dimensions that best match the user's request and any provided visual reference.",{"type":42,"tag":81,"props":364,"children":365},{},[366,368,374],{"type":47,"value":367},"Mobile app: ",{"type":42,"tag":145,"props":369,"children":371},{"className":370},[],[372],{"type":47,"value":373},"390 x 844",{"type":47,"value":68},{"type":42,"tag":81,"props":376,"children":377},{},[378,380,386],{"type":47,"value":379},"Tablet app: ",{"type":42,"tag":145,"props":381,"children":383},{"className":382},[],[384],{"type":47,"value":385},"834 x 1194",{"type":47,"value":68},{"type":42,"tag":81,"props":388,"children":389},{},[390,392,398],{"type":47,"value":391},"Desktop app, dashboard, admin, or SaaS: ",{"type":42,"tag":145,"props":393,"children":395},{"className":394},[],[396],{"type":47,"value":397},"1440 x 1024",{"type":47,"value":68},{"type":42,"tag":81,"props":400,"children":401},{},[402,404,410],{"type":47,"value":403},"Landing or marketing page: ",{"type":42,"tag":145,"props":405,"children":407},{"className":406},[],[408],{"type":47,"value":409},"1440",{"type":47,"value":411}," wide and scrollable.",{"type":42,"tag":81,"props":413,"children":414},{},[415],{"type":47,"value":416},"Modal, panel, widget, or component: natural container size.",{"type":42,"tag":81,"props":418,"children":419},{},[420],{"type":47,"value":421},"Provided screenshot, Figma frame, mockup, or reference image: match its dimensions and aspect ratio when the user wants to continue from that visual.",{"type":42,"tag":81,"props":423,"children":424},{},[425],{"type":47,"value":426},"Avoid crowding. Make the design fit the chosen dimensions cleanly, with realistic spacing, readable type, and no clipped content.",{"type":42,"tag":81,"props":428,"children":429},{},[430],{"type":47,"value":431},"Include the chosen dimensions in every Image Gen prompt.",{"type":42,"tag":159,"props":433,"children":435},{"start":434},6,[436],{"type":42,"tag":81,"props":437,"children":438},{},[439],{"type":47,"value":440},"Check for access gaps.",{"type":42,"tag":77,"props":442,"children":443},{},[444,449,454],{"type":42,"tag":81,"props":445,"children":446},{},[447],{"type":47,"value":448},"If a connector, reference, or file cannot be accessed because of auth, permissions, expired login, missing scope, suspiciously empty results, or unavailable local state, stop.",{"type":42,"tag":81,"props":450,"children":451},{},[452],{"type":47,"value":453},"Name the gap clearly and ask whether to troubleshoot access or continue without that source.",{"type":42,"tag":81,"props":455,"children":456},{},[457],{"type":47,"value":458},"Do not generate images while silently ignoring a named reference.",{"type":42,"tag":159,"props":460,"children":462},{"start":461},7,[463,468],{"type":42,"tag":81,"props":464,"children":465},{},[466],{"type":47,"value":467},"Attach images and mocks provided by the user to the Image Gen call along with your design brief.",{"type":42,"tag":81,"props":469,"children":470},{},[471],{"type":47,"value":472},"Generate 3 independent options that have distinct information hierarchy, layout strategy, interaction model, or product framing.",{"type":42,"tag":50,"props":474,"children":475},{},[476],{"type":47,"value":477},"Rules you must follow:",{"type":42,"tag":77,"props":479,"children":480},{},[481,486,491,496,509,514,542,554,559,564,569,574,579,584,589,594,599,612],{"type":42,"tag":81,"props":482,"children":483},{},[484],{"type":47,"value":485},"Use the Image Gen prompt below.",{"type":42,"tag":81,"props":487,"children":488},{},[489],{"type":47,"value":490},"Use the built-in Image Gen tool.",{"type":42,"tag":81,"props":492,"children":493},{},[494],{"type":47,"value":495},"Generate exactly three independent images unless the user overrides the count.",{"type":42,"tag":81,"props":497,"children":498},{},[499,501,507],{"type":47,"value":500},"Launch each Image Gen call independently. Do not batch Image Gen calls with ",{"type":42,"tag":145,"props":502,"children":504},{"className":503},[],[505],{"type":47,"value":506},"Promise.all",{"type":47,"value":508},", collect them into an ordered array, or replay them in request order.",{"type":42,"tag":81,"props":510,"children":511},{},[512],{"type":47,"value":513},"Each option must be its own Image Gen result. Do not put multiple ideas in one image.",{"type":42,"tag":81,"props":515,"children":516},{},[517,519,525,526,532,534,540],{"type":47,"value":518},"Give each direction a distinct, descriptive name before generation, but do not call it ",{"type":42,"tag":145,"props":520,"children":522},{"className":521},[],[523],{"type":47,"value":524},"option 1",{"type":47,"value":231},{"type":42,"tag":145,"props":527,"children":529},{"className":528},[],[530],{"type":47,"value":531},"option 2",{"type":47,"value":533},", or ",{"type":42,"tag":145,"props":535,"children":537},{"className":536},[],[538],{"type":47,"value":539},"option 3",{"type":47,"value":541}," and do not put planned numeric labels in Image Gen prompts. Parallel results can arrive in a different order from the requests.",{"type":42,"tag":81,"props":543,"children":544},{},[545,547,552],{"type":47,"value":546},"Number options only after the Image Gen results are present in the thread. The only authoritative option order is the order those generated-image results are displayed in the current thread. Ignore the planned concept order, original request chain, prompt submission order, ",{"type":42,"tag":145,"props":548,"children":550},{"className":549},[],[551],{"type":47,"value":506},{"type":47,"value":553}," result order, batch order, array indexes, retry order, and assumed completion order.",{"type":42,"tag":81,"props":555,"children":556},{},[557],{"type":47,"value":558},"After all results return, bind each visible option number to the result in that displayed order. Do not name or describe the options in the final selection message.",{"type":42,"tag":81,"props":560,"children":561},{},[562],{"type":47,"value":563},"Attach provided screenshots, files, app captures, Figma references, and visual source material as moodboard inspiration when available.",{"type":42,"tag":81,"props":565,"children":566},{},[567],{"type":47,"value":568},"Attach existing product screenshots, similar flows, Storybook captures, design tokens, and component references as grounding material when available.",{"type":42,"tag":81,"props":570,"children":571},{},[572],{"type":47,"value":573},"When mock data includes dates or time-sensitive information, resolve the exact current date and include it in every Image Gen prompt. Derive visible dates from that anchor; preserve dates required by the user or source design.",{"type":42,"tag":81,"props":575,"children":576},{},[577],{"type":47,"value":578},"If a screenshot, image, or visual file is available, attach the actual image to the Image Gen call. Do not rely on text descriptions of it.",{"type":42,"tag":81,"props":580,"children":581},{},[582],{"type":47,"value":583},"Only claim a visual reference was attached if the Image Gen call actually received that image or a readable local image path.",{"type":42,"tag":81,"props":585,"children":586},{},[587],{"type":47,"value":588},"If you cannot attach the image, say that clearly and ask whether to continue with text-only direction.",{"type":42,"tag":81,"props":590,"children":591},{},[592],{"type":47,"value":593},"Preserve hard constraints from the brief in every image.",{"type":42,"tag":81,"props":595,"children":596},{},[597],{"type":47,"value":598},"After generating options, stop for the user's selection before any build work begins.",{"type":42,"tag":81,"props":600,"children":601},{},[602,604,610],{"type":47,"value":603},"When the user later selects option ",{"type":42,"tag":145,"props":605,"children":607},{"className":606},[],[608],{"type":47,"value":609},"N",{"type":47,"value":611},", resolve it against the Nth displayed generated-image result from the most recent ideation set, not the original planned concept order. If the exact displayed result cannot be resolved, do not build from a guess; ask the user to name the concept or reattach\u002Fselect the image.",{"type":42,"tag":81,"props":613,"children":614},{},[615,617,623],{"type":47,"value":616},"The selected option is the visual target for ",{"type":42,"tag":145,"props":618,"children":620},{"className":619},[],[621],{"type":47,"value":622},"$image-to-code",{"type":47,"value":68},{"type":42,"tag":70,"props":625,"children":627},{"id":626},"feedback-loop",[628],{"type":47,"value":629},"Feedback Loop",{"type":42,"tag":50,"props":631,"children":632},{},[633],{"type":47,"value":634},"If the user gives feedback after seeing options, generate revised options with that feedback.",{"type":42,"tag":50,"props":636,"children":637},{},[638],{"type":47,"value":639},"If the user selects an option and gives feedback, generate a revised option with that feedback before build.",{"type":42,"tag":50,"props":641,"children":642},{},[643],{"type":47,"value":644},"If the user likes parts of more than one option, combine those choices into a new Image Gen design and show it before build.",{"type":42,"tag":70,"props":646,"children":648},{"id":647},"image-gen-prompt",[649],{"type":47,"value":650},"Image Gen Prompt",{"type":42,"tag":50,"props":652,"children":653},{},[654],{"type":47,"value":655},"Adapt this prompt to the current design brief, attach any available image references, and send it to Image Gen:",{"type":42,"tag":657,"props":658,"children":663},"pre",{"className":659,"code":661,"language":47,"meta":662},[660],"language-text","Create realistic, production-quality UI designs with clear hierarchy, strong typography, intentional imagery, and purposeful spacing.\n\nDesign a focused primary screen, not a feature inventory. The product may support many workflows, but this frame should show the hero use case, one clear primary action, and only one or two supporting actions or content areas. Do not add cards, panels, tabs, badges, metrics, filters, or navigation items merely to advertise every feature. Let the rest of the product exist off-screen. Prefer strong hierarchy and generous whitespace; if the screen feels crammed, remove UI.\n\n### Target Dimensions\n\nPick the dimensions that best match the user's request and any provided visual reference.\n\nDefault to a desktop web-app frame unless the user or reference clearly calls for mobile, tablet, or another format.\n\n - Mobile app: `390 x 844`\n - Tablet app: `834 x 1194`\n - Desktop app, dashboard, admin, or SaaS: `1440 x 1024`\n - Landing or marketing page: `1440` wide and scrollable\n - Modal, panel, widget, or component: natural container size\n - Provided screenshot, Figma frame, mockup, or reference image: match its dimensions and aspect ratio when the user wants to continue from that visual\n\nUse a natural viewport ratio for the intended surface. Never stretch, squash, or warp the generated screen, imagery, typography, or UI elements to fill the canvas. If the composition does not fit naturally, recompose or simplify the layout instead.\n\nAvoid crowding. Make the design fit the chosen dimensions cleanly, with realistic spacing, readable type, and no clipped content.\n\n### Layout\n\nWhen deciding how to lay elements out on the page, this should be your priority order for tools to differentiate sections:\n\n1. Use spacing, grouping, alignment, typography, and hierarchy on the same product surface.\n2. Use simple dividers or row separators.\n3. Use a subtle surface tint only when the base surface is not enough.\n4. Use borders only when separation still is not clear.\n5. Use shadows\u002Felevation last, and sparingly.\n\nDon'ts:\n - Do not default to a centered \"app card\" (the whole UI is in a card on the page) on top of a contrasting page background. Use the base page surface first unless the source product or user explicitly asks for a contained app panel.\n - Do not put cards inside cards. Do not make every major section a card. Do not make each list item its own card unless each item is truly a standalone object. A normal list should usually read as one grouped surface with lightweight row separation.\n - Do not make up extraneous features. Add only the things essential to accomplish what the prototype's goal is. Don't make up more features just to fill out a UI.\n\n### Typography\n\n - Anchor UI typography to readable product sizes. Body text should usually sit between 14px and 16px, with the rest of the type scale built around that baseline.\n - Keep long-form text to a comfortable line length, generally no more than 65 characters per line.\n - Use no more than 2 fonts in a UI. You can use any font available in the project, or fonts provided free on Google Fonts. Pick the font that is best for the goal of the product and that matches with its intended look and feel.\n\n### Presentation\n\n - Do not add browser or device chrome around the mockup.\n - Do not put multiple ideas into a single image generation.\n - Vary each idea as much as possible while adhering to the constraints given entirely.\n\n### Data Freshness\n\nWhen the design includes dates or time-sensitive mock data, use the supplied current date as the anchor. Weekly views must show the real containing week with correct weekday\u002Fdate pairs. Feeds, charts, notifications, and recent activity must use plausible chronological dates relative to today. Mark today when useful. Preserve dates required by the brief or source design.\n","",[664],{"type":42,"tag":145,"props":665,"children":666},{"__ignoreMap":662},[667],{"type":47,"value":661},{"type":42,"tag":70,"props":669,"children":671},{"id":670},"output",[672],{"type":47,"value":673},"Output",{"type":42,"tag":50,"props":675,"children":676},{},[677],{"type":47,"value":678},"Wait until all Image Gen calls have returned before sending the final message that asks the user to choose.",{"type":42,"tag":50,"props":680,"children":681},{},[682],{"type":47,"value":683},"Do not send the final selection message until every requested generated image is visible exactly once in the main chat.",{"type":42,"tag":50,"props":685,"children":686},{},[687],{"type":47,"value":688},"If fewer Image Gen outputs are visible than requested, retry the missing generation. Do not send the selection message.",{"type":42,"tag":50,"props":690,"children":691},{},[692],{"type":47,"value":693},"Number the returned Image Gen outputs in the order they appear in the conversation context:",{"type":42,"tag":77,"props":695,"children":696},{},[697,702,707],{"type":42,"tag":81,"props":698,"children":699},{},[700],{"type":47,"value":701},"First Image Gen output = Option 1",{"type":42,"tag":81,"props":703,"children":704},{},[705],{"type":47,"value":706},"Second Image Gen output = Option 2",{"type":42,"tag":81,"props":708,"children":709},{},[710],{"type":47,"value":711},"Third Image Gen output = Option 3",{"type":42,"tag":50,"props":713,"children":714},{},[715,717,722],{"type":47,"value":716},"Ignore the planned concept order, original request chain, request order, ",{"type":42,"tag":145,"props":718,"children":720},{"className":719},[],[721],{"type":47,"value":506},{"type":47,"value":723}," result order, batch order, array indexes, retry order, and tool submission order.",{"type":42,"tag":50,"props":725,"children":726},{},[727],{"type":47,"value":728},"Do not name or describe the options. For the default three images, send only:",{"type":42,"tag":50,"props":730,"children":731},{},[732],{"type":42,"tag":145,"props":733,"children":735},{"className":734},[],[736],{"type":47,"value":737},"Which option should I build: 1, 2, or 3? Or tell me what you'd like to refine or personalize first.",{"type":42,"tag":50,"props":739,"children":740},{},[741],{"type":47,"value":742},"Adjust the numbers only if the user requested a different count.",{"type":42,"tag":50,"props":744,"children":745},{},[746,748,753,755,761],{"type":47,"value":747},"If the user chooses a number, acknowledge the chosen option before routing to ",{"type":42,"tag":145,"props":749,"children":751},{"className":750},[],[752],{"type":47,"value":622},{"type":47,"value":754},", for example: ",{"type":42,"tag":145,"props":756,"children":758},{"className":757},[],[759],{"type":47,"value":760},"Building option 2!",{"type":47,"value":762}," Do not ask for confirmation when the mapping is clear.",{"type":42,"tag":50,"props":764,"children":765},{},[766],{"type":47,"value":767},"Done means the requested number of independent images have been generated and the user has been asked to select one.",{"items":769,"total":880},[770,789,805,818,834,848,865],{"slug":771,"name":771,"fn":772,"description":773,"org":774,"tags":775,"stars":25,"repoUrl":26,"updatedAt":788},"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},[776,779,782,785],{"name":777,"slug":778,"type":15},"Analytics","analytics",{"name":780,"slug":781,"type":15},"CRM","crm",{"name":783,"slug":784,"type":15},"Research","research",{"name":786,"slug":787,"type":15},"Sales","sales","2026-07-01T07:54:11.79288",{"slug":790,"name":790,"fn":791,"description":792,"org":793,"tags":794,"stars":25,"repoUrl":26,"updatedAt":804},"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},[795,798,801],{"name":796,"slug":797,"type":15},"Audit","audit",{"name":799,"slug":800,"type":15},"Data Engineering","data-engineering",{"name":802,"slug":803,"type":15},"Data Quality","data-quality","2026-07-01T07:55:01.146961",{"slug":806,"name":806,"fn":807,"description":808,"org":809,"tags":810,"stars":25,"repoUrl":26,"updatedAt":817},"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},[811,814],{"name":812,"slug":813,"type":15},"Communications","communications",{"name":815,"slug":816,"type":15},"Productivity","productivity","2026-07-14T05:43:36.096323",{"slug":819,"name":819,"fn":820,"description":821,"org":822,"tags":823,"stars":25,"repoUrl":26,"updatedAt":833},"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},[824,826,829,832],{"name":825,"slug":819,"type":15},"Apollo",{"name":827,"slug":828,"type":15},"Lead Enrichment","lead-enrichment",{"name":830,"slug":831,"type":15},"Prospecting","prospecting",{"name":786,"slug":787,"type":15},"2026-07-14T05:43:34.800076",{"slug":797,"name":797,"fn":835,"description":836,"org":837,"tags":838,"stars":25,"repoUrl":26,"updatedAt":847},"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},[839,840,841,844],{"name":796,"slug":797,"type":15},{"name":23,"slug":24,"type":15},{"name":842,"slug":843,"type":15},"Product Management","product-management",{"name":845,"slug":846,"type":15},"UX Design","ux-design","2026-07-01T07:54:30.613428",{"slug":849,"name":849,"fn":850,"description":851,"org":852,"tags":853,"stars":25,"repoUrl":26,"updatedAt":864},"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},[854,857,860,863],{"name":855,"slug":856,"type":15},"Content Creation","content-creation",{"name":858,"slug":859,"type":15},"Finance","finance",{"name":861,"slug":862,"type":15},"Financial Modeling","financial-modeling",{"name":786,"slug":787,"type":15},"2026-07-01T07:54:02.779003",{"slug":866,"name":866,"fn":867,"description":868,"org":869,"tags":870,"stars":25,"repoUrl":26,"updatedAt":879},"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},[871,874,877,878],{"name":872,"slug":873,"type":15},"Competitive Intelligence","competitive-intelligence",{"name":875,"slug":876,"type":15},"Marketing","marketing",{"name":783,"slug":784,"type":15},{"name":786,"slug":787,"type":15},"2026-07-01T07:54:13.073252",43,{"items":882,"total":1079},[883,904,927,944,960,979,996,1010,1026,1040,1052,1065],{"slug":884,"name":884,"fn":885,"description":886,"org":887,"tags":888,"stars":901,"repoUrl":902,"updatedAt":903},"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},[889,892,895,898],{"name":890,"slug":891,"type":15},"Documents","documents",{"name":893,"slug":894,"type":15},"Healthcare","healthcare",{"name":896,"slug":897,"type":15},"Insurance","insurance",{"name":899,"slug":900,"type":15},"Regulatory Compliance","regulatory-compliance",28169,"https:\u002F\u002Fgithub.com\u002Fopenai\u002Fopenai-agents-python","2026-04-16T05:11:39.180399",{"slug":905,"name":905,"fn":906,"description":907,"org":908,"tags":909,"stars":924,"repoUrl":925,"updatedAt":926},"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},[910,913,915,918,921],{"name":911,"slug":912,"type":15},".NET","dotnet",{"name":914,"slug":905,"type":15},"ASP.NET Core",{"name":916,"slug":917,"type":15},"Blazor","blazor",{"name":919,"slug":920,"type":15},"C#","csharp",{"name":922,"slug":923,"type":15},"Web Development","web-development",23787,"https:\u002F\u002Fgithub.com\u002Fopenai\u002Fskills","2026-04-12T05:07:02.819491",{"slug":928,"name":928,"fn":929,"description":930,"org":931,"tags":932,"stars":924,"repoUrl":925,"updatedAt":943},"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},[933,936,939,942],{"name":934,"slug":935,"type":15},"Apps SDK","apps-sdk",{"name":937,"slug":938,"type":15},"ChatGPT","chatgpt",{"name":940,"slug":941,"type":15},"MCP","mcp",{"name":9,"slug":8,"type":15},"2026-04-12T05:07:05.468097",{"slug":945,"name":945,"fn":946,"description":947,"org":948,"tags":949,"stars":924,"repoUrl":925,"updatedAt":959},"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},[950,953,956],{"name":951,"slug":952,"type":15},"API Development","api-development",{"name":954,"slug":955,"type":15},"CLI","cli",{"name":957,"slug":958,"type":15},"Codex","codex","2026-04-12T05:07:04.132762",{"slug":961,"name":961,"fn":962,"description":963,"org":964,"tags":965,"stars":924,"repoUrl":925,"updatedAt":978},"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},[966,969,972,975],{"name":967,"slug":968,"type":15},"Cloudflare","cloudflare",{"name":970,"slug":971,"type":15},"Cloudflare Pages","cloudflare-pages",{"name":973,"slug":974,"type":15},"Cloudflare Workers","cloudflare-workers",{"name":976,"slug":977,"type":15},"Deployment","deployment","2026-04-12T05:07:14.275118",{"slug":980,"name":980,"fn":981,"description":982,"org":983,"tags":984,"stars":924,"repoUrl":925,"updatedAt":995},"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},[985,986,989,992],{"name":815,"slug":816,"type":15},{"name":987,"slug":988,"type":15},"Project Management","project-management",{"name":990,"slug":991,"type":15},"Strategy","strategy",{"name":993,"slug":994,"type":15},"Task Management","task-management","2026-05-23T06:17:16.870838",{"slug":997,"name":997,"fn":998,"description":999,"org":1000,"tags":1001,"stars":924,"repoUrl":925,"updatedAt":1009},"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},[1002,1003,1005,1008],{"name":23,"slug":24,"type":15},{"name":1004,"slug":997,"type":15},"Figma",{"name":1006,"slug":1007,"type":15},"Frontend","frontend",{"name":940,"slug":941,"type":15},"2026-04-12T05:06:47.939943",{"slug":1011,"name":1011,"fn":1012,"description":1013,"org":1014,"tags":1015,"stars":924,"repoUrl":925,"updatedAt":1025},"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},[1016,1017,1020,1021,1022],{"name":23,"slug":24,"type":15},{"name":1018,"slug":1019,"type":15},"Design System","design-system",{"name":1004,"slug":997,"type":15},{"name":1006,"slug":1007,"type":15},{"name":1023,"slug":1024,"type":15},"UI Components","ui-components","2026-05-10T05:59:52.971881",{"slug":1027,"name":1027,"fn":1028,"description":1029,"org":1030,"tags":1031,"stars":924,"repoUrl":925,"updatedAt":1039},"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},[1032,1033,1034,1037,1038],{"name":23,"slug":24,"type":15},{"name":1018,"slug":1019,"type":15},{"name":1035,"slug":1036,"type":15},"Documentation","documentation",{"name":1004,"slug":997,"type":15},{"name":1006,"slug":1007,"type":15},"2026-05-16T06:07:47.821474",{"slug":1041,"name":1041,"fn":1042,"description":1043,"org":1044,"tags":1045,"stars":924,"repoUrl":925,"updatedAt":1051},"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},[1046,1047,1048,1049,1050],{"name":23,"slug":24,"type":15},{"name":1004,"slug":997,"type":15},{"name":1006,"slug":1007,"type":15},{"name":1023,"slug":1024,"type":15},{"name":922,"slug":923,"type":15},"2026-05-16T06:07:40.583615",{"slug":1053,"name":1053,"fn":1054,"description":1055,"org":1056,"tags":1057,"stars":924,"repoUrl":925,"updatedAt":1064},"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},[1058,1061,1062,1063],{"name":1059,"slug":1060,"type":15},"Animation","animation",{"name":957,"slug":958,"type":15},{"name":13,"slug":14,"type":15},{"name":23,"slug":24,"type":15},"2026-05-02T05:31:48.48485",{"slug":1066,"name":1066,"fn":1067,"description":1068,"org":1069,"tags":1070,"stars":924,"repoUrl":925,"updatedAt":1078},"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},[1071,1072,1073,1074,1077],{"name":13,"slug":14,"type":15},{"name":23,"slug":24,"type":15},{"name":20,"slug":21,"type":15},{"name":1075,"slug":1076,"type":15},"Images","images",{"name":9,"slug":8,"type":15},"2026-05-15T06:23:24.312127",675]