用于创建精致、独立的静态 HTML 工件的工具套件 — 信息图表、交互式图表、架构视觉效果、数据仪表板和丰富的视觉交付成果。当要求创建交互式 HTML 工件、构建独立的 Web 组件、生成静态 HTML 可视化、制作交互式图表、生成视觉信息图或将任何高密度视觉效果呈现为单个 HTML 文件时，请使用此技能。零构建工具链——没有 React，没有 Vite，没有 Parcel。纯 HTML5 + CSS3 (Grid/Flexbox) + 内联 SVG。触发条件：“创建交互式 HTML”、“构建独立的 Web 组件”、“生成静态 HTML 可视化”、“制作交互式图表”、“生成信息图”、“渲染为 HTML 工件”、“构建可视化仪表板”、“创建可以在浏览器中打开的图表”。
通过命令行快速安装 static-web-artifacts-builder AI 技能到你的开发环境
来源：mathews-tom/praxis-skills。
To build high-density static infographic artifacts, follow these steps:
Stack: Vanilla HTML5 + CSS3 (Grid/Flexbox) + inline SVG — zero runtime dependencies
VERY IMPORTANT: To avoid what is often referred to as "AI slop", avoid excessive centered layouts, purple gradients, uniform rounded corners, and Inter font.
用于创建精致、独立的静态 HTML 工件的工具套件 — 信息图表、交互式图表、架构视觉效果、数据仪表板和丰富的视觉交付成果。当要求创建交互式 HTML 工件、构建独立的 Web 组件、生成静态 HTML 可视化、制作交互式图表、生成视觉信息图或将任何高密度视觉效果呈现为单个 HTML 文件时，请使用此技能。零构建工具链——没有 React，没有 Vite，没有 Parcel。纯 HTML5 + CSS3 (Grid/Flexbox) + 内联 SVG。触发条件：“创建交互式 HTML”、“构建独立的 Web 组件”、“生成静态 HTML 可视化”、“制作交互式图表”、“生成信息图”、“渲染为 HTML 工件”、“构建可视化仪表板”、“创建可以在浏览器中打开的图表”。 来源：mathews-tom/praxis-skills。
为搜索与 AI 引用准备的稳定字段与命令。
npx skills add https://github.com/mathews-tom/praxis-skills --skill static-web-artifacts-builder用于创建精致、独立的静态 HTML 工件的工具套件 — 信息图表、交互式图表、架构视觉效果、数据仪表板和丰富的视觉交付成果。当要求创建交互式 HTML 工件、构建独立的 Web 组件、生成静态 HTML 可视化、制作交互式图表、生成视觉信息图或将任何高密度视觉效果呈现为单个 HTML 文件时，请使用此技能。零构建工具链——没有 React，没有 Vite，没有 Parcel。纯 HTML5 + CSS3 (Grid/Flexbox) + 内联 SVG。触发条件：“创建交互式 HTML”、“构建独立的 Web 组件”、“生成静态 HTML 可视化”、“制作交互式图表”、“生成信息图”、“渲染为 HTML 工件”、“构建可视化仪表板”、“创建可以在浏览器中打开的图表”。 来源：mathews-tom/praxis-skills。
打开你的终端或命令行工具（如 Terminal、iTerm、Windows Terminal 等） 复制并运行以下命令：npx skills add https://github.com/mathews-tom/praxis-skills --skill static-web-artifacts-builder 安装完成后，技能将自动配置到你的 AI 编程环境中，可以在 Claude Code、Cursor 或 OpenClaw 中使用
https://github.com/mathews-tom/praxis-skills