generate-html-report — generate-html-report install generate-html-report, workspace-template, community, generate-html-report install, ide skills, generate-html-report template customization, html report generation, tailwind cdn link, Claude Code, Cursor, Windsurf

v1.0.0
GitHub

About this Skill

Ideal for Data Visualization Agents requiring dynamic HTML report generation for presentation-ready outputs. generate-html-report is a skill that generates HTML reports using a template from templates/report-template.html, customizable with Tailwind CDN link.

Features

Creates self-contained HTML reports using templates/report-template.html
Customizes report content while keeping the Tailwind CDN link
Generates visual summaries and comparison tables
Saves reports as standalone files for easy sharing
Uses a base template for consistent report formatting
Supports presentation-ready outputs for various use cases

# Core Topics

generate-html-report install generate-html-report template customization html report generation tailwind cdn link
shaunsales shaunsales
[0]
[0]
Updated: 3/8/2026

Agent Capability Analysis

The generate-html-report skill by shaunsales is an open-source community AI agent skill for Claude Code and other IDE workflows, helping agents execute tasks with better context, repeatability, and domain-specific guidance. Optimized for generate-html-report install, generate-html-report template customization, html report generation.

Ideal Agent Persona

Ideal for Data Visualization Agents requiring dynamic HTML report generation for presentation-ready outputs.

Core Value

Empowers agents to create beautiful, self-contained HTML reports using Tailwind CDN for styling, perfect for generating comparison tables, visual summaries, and shareable documentation in HTML format.

↓ Capabilities Granted for generate-html-report

Generating comparison tables with visual charts
Creating shareable documentation in HTML format
Building presentation-ready outputs for data analysis

! Prerequisites & Limits

  • Requires access to templates/report-template.html
  • Dependent on Tailwind CDN for styling
Labs Demo

Browser Sandbox Environment

⚡️ Ready to unleash?

Experience this Agent in a zero-setup browser environment powered by WebContainers. No installation required.

Boot Container Sandbox

generate-html-report

Install generate-html-report, an AI agent skill for AI agent workflows and automation. Works with Claude Code, Cursor, and Windsurf with one-command setup.

SKILL.md
Readonly

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:

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

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

FAQ & Installation Steps

These questions and steps mirror the structured data on this page for better search understanding.

? Frequently Asked Questions

What is generate-html-report?

Ideal for Data Visualization Agents requiring dynamic HTML report generation for presentation-ready outputs. generate-html-report is a skill that generates HTML reports using a template from templates/report-template.html, customizable with Tailwind CDN link.

How do I install generate-html-report?

Run the command: npx killer-skills add shaunsales/workspace-template. It works with Cursor, Windsurf, VS Code, Claude Code, and 19+ other IDEs.

What are the use cases for generate-html-report?

Key use cases include: Generating comparison tables with visual charts, Creating shareable documentation in HTML format, Building presentation-ready outputs for data analysis.

Which IDEs are compatible with generate-html-report?

This skill is compatible with Cursor, Windsurf, VS Code, Trae, Claude Code, OpenClaw, Aider, Codex, OpenCode, Goose, Cline, Roo Code, Kiro, Augment Code, Continue, GitHub Copilot, Sourcegraph Cody, and Amazon Q Developer. Use the Killer-Skills CLI for universal one-command installation.

Are there any limitations for generate-html-report?

Requires access to templates/report-template.html. Dependent on Tailwind CDN for styling.

↓ How To Install

  1. 1. Open your terminal

    Open the terminal or command line in your project directory.

  2. 2. Run the install command

    Run: npx killer-skills add shaunsales/workspace-template. The CLI will automatically detect your IDE or AI agent and configure the skill.

  3. 3. Start using the skill

    The skill is now active. Your AI agent can use generate-html-report immediately in the current project.

Related Skills

Looking for an alternative to generate-html-report or another community skill for your workflow? Explore these related open-source skills.

View All

widget-generator

Logo of f
f

f.k.a. Awesome ChatGPT Prompts. Share, discover, and collect prompts from the community. Free and open source — self-host for your organization with complete privacy.

★ 149.6k
⑂ 0
AI

flags

Logo of vercel
vercel

flags is a Next.js feature management skill that enables developers to efficiently add or modify framework feature flags, streamlining React application development.

★ 138.4k
⑂ 0
Browser

zustand

Logo of lobehub
lobehub

The ultimate space for work and life — to find, build, and collaborate with agent teammates that grow with you. We are taking agent harness to the next level — enabling multi-agent collaboration, effortless agent team design, and introducing agents as the unit of work interaction.

★ 72.8k
⑂ 0
AI

data-fetching

Logo of lobehub
lobehub

The ultimate space for work and life — to find, build, and collaborate with agent teammates that grow with you. We are taking agent harness to the next level — enabling multi-agent collaboration, effortless agent team design, and introducing agents as the unit of work interaction.

★ 72.8k
⑂ 0
AI