{"id":"a1b6098c-54d2-45c8-9104-99a0b0dbdf23","shortId":"nXBgYX","kind":"skill","title":"coff0xc-ui-doc-output","tagline":"Use when / 当用户请求 UI、frontend、dashboard/admin/SaaS screen、component/design system、responsive/mobile、accessibility/ARIA/contrast、empty/loading/error/hover/focus/keyboard states、browser smoke/screenshot/console cleanliness、anti-AI visual polish、technical/executive report narrative、t","description":"# coff0xc-ui-doc-output\n\n<!-- skill-id: cs-udo-c8e51b29 -->\n\n## 快速规则（日常任务先读这里）\n> **[先扫系统]** 先看现有 route/component/token/theme/icon/copy/test/browser path，复用项目设计语言。\n> **[状态门禁]** UI 必须覆盖 loading、empty、error、success、disabled、focus、hover、mobile 和长文本/空数据。\n> **[视觉证据]** 重要 UI 改动要做浏览器 smoke、截图或等价渲染检查，并记录 console/重叠/响应式问题。\n> **[硬边界]** 发布网站、下载外部资产、上传文档、客户/隐私数据处理和付费服务先确认。\n\n普通 UI/报告/翻译任务按本节快路径执行；只有深度审美、外部 UI skill 合并、quality eval 或发版门禁才读取 references。\n\n## 能力定位\n面向 UI、前端体验、报告表达和技术翻译交付的产物质量能力。它不只润色文字，还要求界面、交互状态和报告叙事真实可用、可读、可验证。\n\n正式 Office/PDF 文件产物，例如 PPTX、DOCX、PDF、Excel/XLSX/CSV 的创建、编辑、批注、公式和渲染验证，优先使用 `coff0xc-office-doc-tools`。\n\n## 能交付什么\n- 可用 UI/组件/页面改动或设计建议\n- 桌面/移动端截图或浏览器 smoke 结果\n- 报告结构、交付文案和版式建议\n- 翻译润色稿、术语一致性和交付说明\n\n## 可以接收什么输入\n- 前端仓库、页面截图、设计稿、组件代码\n- Markdown、报告草稿、翻译文本、截图、页面文案\n- 用户反馈、移动端问题、可访问性或版式问题\n\n## 放心使用的边界\n- 可直接处理本地 UI 和文档产物\n- 正式 PPTX/DOCX/PDF/XLSX/CSV 文件交付转入 `coff0xc-office-doc-tools`\n- 下载外部资产、上传文档、发布网站、付费服务必须先确认\n- 含个人信息或客户数据的内容要先确认脱敏要求\n- 默认只处理本地、可逆、可验证的低风险工作；涉及生产、凭据、付费、远程写入、删除、发布或权限变更时必须先确认。\n\n## 为什么可以放心\n- 版式相关任务必须渲染或截图验证\n- UI 覆盖 loading/empty/error/success 等状态\n- 翻译不改变事实、数字、命令和路径\n\n## 典型使用方式\n```text\n使用 coff0xc-ui-doc-output 优化这个 dashboard，并用截图检查移动端。\n使用 coff0xc-ui-doc-output 把这份中文报告翻译润色成英文交付版。\nUse coff0xc-ui-doc-output to polish the report narrative and UI copy for these findings.\n```\n\n\n## Core Gates\n- 明确 UI/报告/翻译任务直接执行本 skill；只有跨领域或不确定任务才先用 `coff0xc-skill-router`。\n- UI 前先查现有组件、tokens、theme、icons、样式系统、截图和可用验证命令。\n- 外部/朋友/项目专用 UI skill 只能抽象成通用规则；不要保留个人称呼、机器路径、绝对口味禁令或默认授权语句。\n- UI 不做 happy path 静态壳：至少考虑 populated、empty、loading、error、disabled、hover/focus、long-content 和 small-screen。\n- 避免 AI 味：模板 hero、三列卡片堆、紫蓝霓虹、卡片套卡片、无意义 bento、只靠图标/说明文字解释功能。\n- 数据展示不编数字：关键总数、金额、百分比、时间范围、单位和图表轴必须来自可信数据/API/公式或注明假设。\n- 报告/翻译保留事实、数字、代码、命令、路径、引用和不确定性；正式 PPTX/DOCX/PDF/XLSX/CSV 交付转 `coff0xc-office-doc-tools`。\n\n## Verification\n- UI 代码改动后，能启动本地服务就启动；能静态打开就给本地 HTML 路径。\n- 至少检查一个桌面和一个移动视口；复杂工具再加窄屏/平板宽度。\n- 看 console、资源加载、空白渲染、重叠、裁切、文本溢出、按钮可点性、表单基本路径和焦点状态。\n- Canvas/WebGL/Three.js 必须检查非空像素、场景 framing、移动/交互是否可见。\n- 如果浏览器或截图不可用，最终写“代码已改但未做视觉验收”，不能说 UI 已验证。\n\n## References\n普通任务不要默认读取这些文件。\n\n| Reference | 何时读取 |\n| --- | --- |\n| `references/ui-generalized-rules.md` | 合并外部 UI skill、深度审美/前端工程 review、Figma/Playwright/截图质量门禁、UI quality eval。 |\n\n## Output Contract\n```markdown\n完成：\n- ...\n\n验证：\n- ...\n\n还剩：\n- ...\n\n下一步：\n- ...\n```","tags":["coff0xc","doc","output","coffee","skill","agent-skills","ai-agents","appsec","codex","defensive-security","devsecops","office-docs"],"capabilities":["skill","source-coff0xc","skill-coff0xc-ui-doc-output","topic-agent-skills","topic-ai-agents","topic-appsec","topic-codex","topic-defensive-security","topic-devsecops","topic-office-docs","topic-prompt-engineering","topic-rag","topic-security-tools","topic-skills"],"categories":["coffee-skill"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/Coff0xc/coffee-skill/coff0xc-ui-doc-output","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add Coff0xc/coffee-skill","source_repo":"https://github.com/Coff0xc/coffee-skill","install_from":"skills.sh"}},"qualityScore":"0.455","qualityRationale":"deterministic score 0.46 from registry signals: · indexed on github topic:agent-skills · 11 github stars · SKILL.md body (2,303 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-18T19:07:31.654Z","embedding":null,"createdAt":"2026-05-18T13:12:45.417Z","updatedAt":"2026-05-18T19:07:31.654Z","lastSeenAt":"2026-05-18T19:07:31.654Z","tsv":"'/api':274 'accessibility/aria/contrast':16 'ai':24,257 'anti':23 'anti-ai':22 'bento':265 'browser':19 'canvas/webgl/three.js':310 'cleanli':21 'coff0xc':2,32,109,147,178,187,194,218,287 'coff0xc-office-doc-tools':108,146,286 'coff0xc-skill-router':217 'coff0xc-ui-doc-output':1,31,177,186,193 'component/design':13 'consol':63,302 'content':251 'contract':339 'copi':205 'core':209 'dashboard':183 'dashboard/admin/saas':11 'disabl':50,247 'doc':4,34,111,149,180,189,196,289 'docx':100 'empti':47,244 'empty/loading/error/hover/focus/keyboard':17 'error':48,246 'eval':82,337 'excel/xlsx/csv':102 'figma/playwright':333 'find':208 'focus':51 'frame':313 'frontend':10 'gate':210 'happi':239 'hero':260 'hover':52 'hover/focus':248 'html':296 'icon':225 'load':46,245 'loading/empty/error/success':169 'long':250 'long-cont':249 'markdown':131,340 'mobil':53 'narrat':29,202 'offic':110,148,288 'office/pdf':96 'output':5,35,181,190,197,338 'path':41,240 'pdf':101 'polish':26,199 'popul':243 'pptx':99 'pptx/docx/pdf/xlsx/csv':144,284 'qualiti':81,336 'refer':84,322,324 'references/ui-generalized-rules.md':326 'report':28,201 'responsive/mobile':15 'review':332 'route/component/token/theme/icon/copy/test/browser':40 'router':220 'screen':12,255 'skill':79,215,219,232,329 'skill-coff0xc-ui-doc-output' 'small':254 'small-screen':253 'smoke':60,120 'smoke/screenshot/console':20 'source-coff0xc' 'state':18 'success':49 'system':14 'technical/executive':27 'text':175 'theme':224 'token':223 'tool':112,150,290 'topic-agent-skills' 'topic-ai-agents' 'topic-appsec' 'topic-codex' 'topic-defensive-security' 'topic-devsecops' 'topic-office-docs' 'topic-prompt-engineering' 'topic-rag' 'topic-security-tools' 'topic-skills' 'ui':3,9,33,44,58,73,78,87,115,141,167,179,188,195,204,212,221,231,237,292,320,328,335 'use':6,192 'verif':291 'visual':25 '三列卡片堆':261 '上传文档':69,152 '下一步':344 '下载外部资产':68,151 '不做':238 '不能说':319 '不要保留个人称呼':234 '为什么可以放心':165 '交互是否可见':315 '交互状态和报告叙事真实可用':92 '交付文案和版式建议':123 '交付转':285 '付费':161 '付费服务必须先确认':154 '代码':279 '代码已改但未做视觉验收':318 '代码改动后':293 '优先使用':107 '优化这个':182 '何时读取':325 '使用':176,185 '例如':98 '先扫系统':38 '先看现有':39 '公式和渲染验证':106 '公式或注明假设':275 '关键总数':269 '典型使用方式':174 '凭据':160 '删除':163 '前先查现有组件':222 '前端仓库':127 '前端体验':88 '前端工程':331 '单位和图表轴必须来自可信数据':273 '卡片套卡片':263 '发布或权限变更时必须先确认':164 '发布网站':67,153 '只有深度审美':76 '只有跨领域或不确定任务才先用':216 '只能抽象成通用规则':233 '只靠图标':266 '可以接收什么输入':126 '可用':114 '可直接处理本地':140 '可访问性或版式问题':138 '可读':93 '可逆':157 '可验证':94 '可验证的低风险工作':158 '合并':80 '合并外部':327 '含个人信息或客户数据的内容要先确认脱敏要求':155 '味':258 '命令':280 '命令和路径':173 '和':252 '和文档产物':142 '和长文本':54 '响应式问题':65 '场景':312 '复杂工具再加窄屏':299 '复用项目设计语言':42 '外部':77,228 '如果浏览器或截图不可用':316 '它不只润色文字':90 '完成':341 '客户':70 '已验证':321 '平板宽度':300 '并用截图检查移动端':184 '并记录':62 '引用和不确定性':282 '当用户请求':8 '必须检查非空像素':311 '必须覆盖':45 '快速规则':36 '或发版门禁才读取':83 '截图':134 '截图和可用验证命令':227 '截图或等价渲染检查':61 '截图质量门禁':334 '批注':105 '把这份中文报告翻译润色成英文交付版':191 '报告':74,213,276 '报告结构':122 '报告草稿':132 '报告表达和技术翻译交付的产物质量能力':89 '按钮可点性':308 '改动要做浏览器':59 '放心使用的边界':139 '数字':172,278 '数据展示不编数字':268 '文件交付转入':145 '文件产物':97 '文本溢出':307 '无意义':264 '日常任务先读这里':37 '时间范围':272 '明确':211 '普通':72 '普通任务不要默认读取这些文件':323 '最终写':317 '朋友':229 '术语一致性和交付说明':125 '机器路径':235 '样式系统':226 '桌面':118 '模板':259 '正式':95,143,283 '涉及生产':159 '深度审美':330 '版式相关任务必须渲染或截图验证':166 '状态门禁':43 '用户反馈':136 '百分比':271 '的创建':103 '看':301 '硬边界':66 '移动':314 '移动端截图或浏览器':119 '移动端问题':137 '空数据':55 '空白渲染':304 '等状态':170 '紫蓝霓虹':262 '组件':116 '组件代码':130 '结果':121 '绝对口味禁令或默认授权语句':236 '编辑':104 '翻译不改变事实':171 '翻译任务按本节快路径执行':75 '翻译任务直接执行本':214 '翻译保留事实':277 '翻译文本':133 '翻译润色稿':124 '能交付什么':113 '能力定位':85 '能启动本地服务就启动':294 '能静态打开就给本地':295 '至少检查一个桌面和一个移动视口':298 '至少考虑':242 '表单基本路径和焦点状态':309 '裁切':306 '覆盖':168 '视觉证据':56 '设计稿':129 '说明文字解释功能':267 '资源加载':303 '路径':281,297 '还剩':343 '还要求界面':91 '远程写入':162 '避免':256 '重叠':64,305 '重要':57 '金额':270 '隐私数据处理和付费服务先确认':71 '静态壳':241 '面向':86 '页面截图':128 '页面改动或设计建议':117 '页面文案':135 '项目专用':230 '验证':342 '默认只处理本地':156","prices":[{"id":"03ab79e9-27ad-4f3b-a0ba-218f7f4cb8ae","listingId":"a1b6098c-54d2-45c8-9104-99a0b0dbdf23","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"Coff0xc","category":"coffee-skill","install_from":"skills.sh"},"createdAt":"2026-05-18T13:12:45.417Z"}],"sources":[{"listingId":"a1b6098c-54d2-45c8-9104-99a0b0dbdf23","source":"github","sourceId":"Coff0xc/coffee-skill/coff0xc-ui-doc-output","sourceUrl":"https://github.com/Coff0xc/coffee-skill/tree/main/skills/coff0xc-ui-doc-output","isPrimary":false,"firstSeenAt":"2026-05-18T13:12:45.417Z","lastSeenAt":"2026-05-18T19:07:31.654Z"}],"details":{"listingId":"a1b6098c-54d2-45c8-9104-99a0b0dbdf23","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"Coff0xc","slug":"coff0xc-ui-doc-output","github":{"repo":"Coff0xc/coffee-skill","stars":11,"topics":["agent-skills","ai-agents","appsec","codex","defensive-security","devsecops","office-docs","prompt-engineering","rag","security-tools","skills"],"license":"other","html_url":"https://github.com/Coff0xc/coffee-skill","pushed_at":"2026-05-17T11:03:26Z","description":"Installable Codex/AgentSkills workflow pack for dev, Agent/RAG, API/data, Office artifacts, research diagrams, and authorized security review.","skill_md_sha":"a0f5cbf58a70181e5789dacfcbd4de22b7a78098","skill_md_path":"skills/coff0xc-ui-doc-output/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/Coff0xc/coffee-skill/tree/main/skills/coff0xc-ui-doc-output"},"layout":"multi","source":"github","category":"coffee-skill","frontmatter":{"name":"coff0xc-ui-doc-output","description":"Use when / 当用户请求 UI、frontend、dashboard/admin/SaaS screen、component/design system、responsive/mobile、accessibility/ARIA/contrast、empty/loading/error/hover/focus/keyboard states、browser smoke/screenshot/console cleanliness、anti-AI visual polish、technical/executive report narrative、translation/polish/terminology consistency。中文触发：UI、前端、页面很乱、dashboard、组件、设计系统、视觉验证、截图、移动端、状态门禁、可访问性、反 AI 味、报告、翻译、润色、交付文案、术语一致。正式 PPTX/DOCX/PDF/XLSX/CSV 文件交付用 coff0xc-office-doc-tools。手动触发：使用 coff0xc-ui-doc-output。"},"skills_sh_url":"https://skills.sh/Coff0xc/coffee-skill/coff0xc-ui-doc-output"},"updatedAt":"2026-05-18T19:07:31.654Z"}}