generate-visual

Installation
SKILL.md

Generate Visual

Core Rule

Produce exactly one final .html file unless the user explicitly asks for something else. The file must be self-contained: no Tailwind, no CDN scripts, no external stylesheets, no remote images, and no required companion assets. Inline all CSS, JavaScript, SVG, and data needed to render the artifact.

Workflow

  1. Classify the requested artifact type.
  2. Read references/templates.md and choose the closest bundled example from assets/examples/.
  3. Read only the selected example plus assets/base-site.css.
  4. Create a new HTML file in the user's requested location, or in the current workspace when no location is given.
  5. Inline assets/base-site.css into the output before any page-specific CSS. Remove <link rel="stylesheet" href="assets/site.css"> or any other external dependency.
  6. Replace the template content with the user's subject matter. Keep the visual structure and interaction pattern, but rewrite titles, labels, data, diagrams, and narrative for the actual request.
  7. Verify the result by opening it in a browser or local HTTP server when available. Also grep the output for external dependency markers before delivering.

Template Starter

Use the helper script when it saves time:

Installs
7
GitHub Stars
1
First Seen
Jun 3, 2026
generate-visual — schalk-conradie/skills