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
- Classify the requested artifact type.
- Read
references/templates.mdand choose the closest bundled example fromassets/examples/. - Read only the selected example plus
assets/base-site.css. - Create a new HTML file in the user's requested location, or in the current workspace when no location is given.
- Inline
assets/base-site.cssinto the output before any page-specific CSS. Remove<link rel="stylesheet" href="assets/site.css">or any other external dependency. - 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.
- 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: