AgentSkillsCN

generate-html-report

借助 Tailwind CSS 样式，生成自包含的 HTML 报告。当用户希望创建可分享的 HTML 文档、对比图表或可视化报告时，此方法尤为适用。

SKILL.md
--- frontmatter
name: generate-html-report
description: Generate a self-contained HTML report with Tailwind CSS styling. Use when the user wants to create shareable HTML documents, comparison charts, or visual reports.

Generate HTML Report

Create beautiful, self-contained HTML reports that can be shared as standalone files.

When to Use

  • •Creating comparison tables or charts
  • •Generating visual summaries
  • •Building shareable documentation
  • •Creating presentation-ready outputs

How to Generate

  1. •Ask the user what content they want in the report
  2. •Use the template from templates/report-template.html as the base
  3. •Customize the content while keeping the Tailwind CDN link
  4. •Save to the current conversation's outputs/html/ folder
  5. •Name the file descriptively: [description]-v[N].html

Template Location

See templates/report-template.html for the base HTML structure with Tailwind CSS.

Styling Guidelines

  • •Use Tailwind utility classes for all styling
  • •Keep the design clean and professional
  • •Use a consistent color scheme (slate/blue by default)
  • •Ensure good contrast for readability
  • •Include responsive classes for mobile viewing

Output Location

Always save generated reports to:

code
/conversations/[current-topic]/outputs/html/[name]-v1.html

Increment the version number if a file with that name exists.