菜单
用于设计和实现新的 Web / 前端界面：当用户要新页面、新组件、改版、重设计，且核心目标是视觉方向、布局、交互手感和整体 UI 气质时使用。Combine with `fixing-accessibility` / `fixing-motion-performance` when 需要专项验收；Prefer `react-best-practices` when the main goal is 现有 React/Next 的性能、缓存、bundle 或代码健康优化；Do not use for 纯平台规范或只做工程性能收口的问题。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
用于 Android / Material 3 平台规范问题：当用户要做 Android 界面规则、导航模式、window size classes、dynamic color、edge-to-edge、无障碍或 Material 合规审查时使用。Prefer `compose-skill` when the main task is Compose/KMP 的状态、架构、DI、网络或实现细节；Combine with it when Android / Material 规则需要落到 Compose 实现。
用于需要“顶级专家视角”的任务：当用户要专家判断、方案对比、trade-off 分析、优先级决策、审美判断或复杂方法论，或者会说“从战略上看”“你别给我常规建议”“像最懂这件事的人那样判断”“从高手视角看”“按高手打法判断一下”“像世界级专家那样看这件事”，or English asks like “give me the expert take”, “think like a world-class strategist”, “don't give me the default answer” 时使用。Do not use for 简单事实查询、纯资料罗列或常规执行型任务。
用于图标搜索、选型与同步：当用户要找 icon、替换 emoji 占位、找相似图标、导出 SVG 或把图标接入项目时使用。Prefer this over 手写 SVG 猜测；Combine with `frontend-design` or `ui-ux-pro-max` when 图标只是界面方案的一部分；默认先做查找/选型，不把一句“找个图标”视为已授权 setup、同步或 `global` 变更。
用于需求还模糊的开放式产品/设计任务：当用户要新功能、新组件、新交互或行为变更，但目标、约束、形态还没想清楚，或者会说“先别写代码”“先别急着做”“先帮我想清楚”“先梳理一下方案”“先拆一下需求”“先把目标和范围捋清”“先定方向”，or English asks like “don't write code yet”, “help me think this through first”, “let's clarify the scope first” 时使用。Combine with `planning-with-files` when 任务会跨多轮推进；Do not use for 常规 bugfix、纯 review、最终验证或只改措辞。
Build, scaffold, refactor, and troubleshoot ChatGPT Apps SDK applications that combine an MCP server and widget UI. Use when the agent 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 an OpenAI developer docs MCP integration before generating code.
用于 Chrome 插件 / 浏览器扩展架构设计：当用户要规划 Manifest V3、service worker、content script、popup、options page、权限、消息通信、安全边界或跨端方案时使用。Combine with `frontend-design` when 插件界面本身也要重做；Do not use for 纯网页改版或与扩展架构无关的常规前端任务。
| name | frontend-design |
| description | 用于设计和实现新的 Web / 前端界面：当用户要新页面、新组件、改版、重设计，且核心目标是视觉方向、布局、交互手感和整体 UI 气质时使用。Combine with `fixing-accessibility` / `fixing-motion-performance` when 需要专项验收；Prefer `react-best-practices` when the main goal is 现有 React/Next 的性能、缓存、bundle 或代码健康优化；Do not use for 纯平台规范或只做工程性能收口的问题。 |
| user-invocable | true |
fixing-accessibility / fixing-motion-performance when 需要专项验收；Prefer react-best-practices when the main goal is 现有 React/Next 的性能、缓存、bundle 或代码健康优化；Do not use for 纯平台规范或只做工程性能收口的问题。product-design