skills.rest
7757
7757COMMUNITY
Explore all skills by this author →
GitHub

html-artifact

Create self-contained HTML artifacts for visual reports, diagrams, and interactive prototypes.

38|6|Updated Aug 14, 2026
Search Tags:#html#design system#artifact#self-contained#svg diagram#interactive prototype#visual report
One-click install
npx skills add https://github.com/7757/Fan-Browser-Agent --skill html-artifact-7757
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: html-artifact
Source: https://github.com/7757/Fan-Browser-Agent/tree/main/skills/creative/html-artifact
Command: npx skills add https://github.com/7757/Fan-Browser-Agent --skill html-artifact-7757

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? When a user needs a visual report, explorable prototype, or complex diagram, plain text or Markdown often falls short. This Skill produces a single self-contained HTML file that renders offline, follows a consistent design system, and can be previewed safely in Fan. ## Core Features & Use Cases - Three authoring modes: choose between a report/explainer template, an SVG diagram template (light or dark-tech infrastructure style), or an interactive editor template with export actions. - Bundled design system: house-style tokens, typography, cards, tables, and code blocks keep every artifact visually consistent without external assets. - Safe preview workflow: artifacts are written to an approved workspace path and previewed through Fan's controlled preview surface, with strict rules against CDNs, remote assets, and unsafe local serving. - Use Case: A user asks for a visual comparison of three architecture options. The Skill loads the diagram template and dark-tech reference, authors an inline SVG diagram with semantic component colors, previews it, and returns the absolute .html path. ## Quick Start Ask the agent to create an HTML artifact, for example: create a self-contained HTML report visualizing this quarter's survey results as a diagram.

Frequently Asked Questions about html-artifact

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a self-contained HTML report with no external dependencies?▼

Use the base template and keep all CSS, SVG, and JavaScript inline in one .html file. Use system fonts, avoid CDNs and remote images, and ensure the content remains readable with JavaScript disabled.

When should I create an HTML artifact instead of a Markdown document?▼

Create an HTML artifact only when the user explicitly asks for an HTML file, interactive prototype, or visual report, or when a complex relationship genuinely needs visualization. If prose, Markdown, or a small table communicates the result equally well, do not create one.

How do I draw software architecture diagrams in a single HTML file?▼

Use the diagram template with the dark-tech reference, which defines a semantic palette for frontend, backend, database, cloud, and security components. Author inline SVG with one arrow marker, draw edges before nodes, and keep coordinates on regular lanes.

Can the HTML artifact load libraries like D3 or Mermaid from a CDN?▼

No. The artifact must be fully self-contained: no CDNs, web fonts, remote images, external scripts, or runtime fetch. Graphics must use inline SVG or CSS, and scripts must be small vanilla JavaScript placed before the closing body tag.

Why does clipboard copy fail when opening the HTML file locally?▼

The asynchronous clipboard API is often unavailable on file:// pages. Use a user-gesture click handler with a fallback that copies via a temporary off-screen textarea and document.execCommand, then show brief visible feedback.

How do I preview a local HTML artifact safely in Fan?▼

Write the file to an approved workspace path and open it through Fan's desktop preview surface first. If HTTP is required, use Fan's controlled static-server flow bound to loopback and scoped to the artifact directory only, never the workspace root.

Related Skills

Explore More Design & Creative Skills→
modu-aimodu-ai
267

data-visualizer

Convert datasets into diagrams or interactive dashboards using Mermaid, Recharts, Chart.js, Tremor, or ECharts.

Official
Intermediate
shaprisshapris

theme-factory

Apply font and color themes to slide decks, documents, and HTML artifacts.

Community
Intermediate
EvolutionAPIEvolutionAPI
520

mkt-quality-gate

Score marketing content against a rubric with an expert panel and revision rounds.

Official
Advanced
ChimeraFoundationaChimeraFoundationa

excalidraw

Convert Excalidraw element JSON into portable .excalidraw diagram files.

Community
Intermediate