ghoulvspol/html-effectiveness-skill
Developer toolsThis page was translated automatically. Technical details may differ from the original. View the original
Claude Code skill: Generate interactive HTML instead of markdown walls of text. 9 output patterns, zero deps, browser-ready.
Overview
当 AI agent 需要输出复杂信息（对比分析、时间线、决策矩阵、数据表格、代码审查）时，生成一个自包含的 HTML 文件，让读者在浏览器中扫描、过滤、探索、交互，而不是在 markdown 中上下滚动寻找信息。 灵感来源: The Unreasonable Effectiveness of HTML 一个 Claude Code skill，指导 AI agent 在输出复杂内容时，生成单文件、零依赖、可直接在浏览器打开的交互式 HTML 文档。 - — 所有 CSS/JS 内联，无外部依赖 - — 浏览器直接打开 file:// 或任何 HTTP 服务 - — 自动跟随系统 prefers-color-scheme - — 375px 手机到 1440px 桌面自适应 - — @media print 自动展开所有折叠内容 - — HTML5 + ARIA 属性，屏幕阅读器友好 - 紫/蓝渐变背景作为默认 - 通用的"功能网格 + 图标"布局 - 装饰性 blob、波浪、几何图案 - 占位图/图片占位符 - 千篇一律的 SaaS 模板 - Emoji 作为主要视觉元素 - HTML 内部的大段纯文字（违背初衷） https://ghoulvspol.github.io/html-effectiveness-skill/ - 对比看板: 3 个技术方案卡片 + 详情展开 - 时间线: 5 阶段项目进度 + 状态标签 - 决策矩阵: 6 维度 × 3 方案评分表 - 知识探索器: 折叠面板 + 标签页 + 搜索 - 交互报告: 6 服务状态 + 4 维度过滤
Recommended Tools
Try a different keyword or remove a filter.
Install
npx skillfish add ghoulvspol/html-effectiveness-skill