skills.rest
love-lena
love-lenaCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

html-artifact-style

Create standalone HTML documents, dashboards, and diagrams in a consistent Plain visual style.

Updated May 21, 2026
Search Tags:#documentation#html#data visualization#css#single-file#dashboard#shadcn
One-click install
npx skills add https://github.com/love-lena/skills --skill html-artifact-style-love-lena
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: html-artifact-style
Source: https://github.com/love-lena/skills/tree/main/skills/html-artifact-style
Command: npx skills add https://github.com/love-lena/skills --skill html-artifact-style-love-lena

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires react, react-dom, recharts, tailwindcss, esbuild, lucide-react, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve? Producing polished, self-contained HTML artifacts (documents, dashboards, status boards, comparisons, system explainers) usually requires ad-hoc styling decisions and manual bundling of CSS and JavaScript. This Skill supplies an approved visual language, reusable page shapes, and a renderer so every artifact ships as one readable, light-and-dark HTML file. ## Core Features & Use Cases - Five approved page shapes: document, dashboard, status board, comparison, and system explainer templates with shared Plain CSS tokens for light and dark appearances. - Self-contained renderer: scripts/render.py embeds CSS, JavaScript, and content into a single portable HTML file, with a gallery mode for comparing examples. - Interactive diagram and dashboard assets: a pan/zoom architecture graph component and a shadcn/ui React log explorer with an offline build for dense data exploration. - Use Case: Turn a design proposal into a standalone HTML document with footnotes and an embedded diagram, then verify it at desktop and 390 px widths in both appearances before sharing it as a single file. ## Quick Start Use the html-artifact-style skill to turn my design proposal into a standalone Plain-style HTML document with a system diagram.

Frequently Asked Questions about html-artifact-style

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

FAQPage Schema
How do I create a standalone HTML document with embedded CSS and JavaScript?▼

Write a semantic HTML body fragment and run scripts/render.py with --shape, --content, --title, and --output. The renderer embeds the shared Plain stylesheet and runtime JavaScript into one self-contained HTML file.

What page layouts does the Plain HTML style support?▼

Five approved shapes are included: document, dashboard, status board, comparison, and system explainer. Each has example HTML under assets/shapes/ that you adapt by replacing the illustrative content with your own.

Does the dashboard example require installing npm dependencies?▼

No, the bundled dashboard ships with a prebuilt dist/ directory that renders immediately without installation. You only need npm ci and the build script when adapting the React source in assets/dashboard/src/.

Can I use this style when editing an existing product's UI?▼

No, the skill explicitly preserves an existing product's design system when editing its application UI. It is intended for standalone HTML artifacts and reusable page layouts, not for restyling established applications.

How do I verify the rendered HTML artifact before delivery?▼

Open the output in a browser and inspect the desktop layout plus a narrow layout around 390 px, checking both light and dark appearances. Exercise any interactions, confirm diagrams stay readable, and verify footnote return links work.

Related Skills

Explore More Design & Creative Skills→
heaversmheaversm
12

dissertation-writer-evidence

Draft dissertation sections from case studies and primary sources.

Community
Advanced
ltdrewltdrew
1

publish

Publish brain content as password-protected, self-contained HTML files.

Community
Advanced
Arcanada-oneArcanada-one
11

factcheck

Extract factual claims, verify them via web search, and generate correction drafts.

Official
Advanced
oxieoxie

astro-website-builder

Builds Astro content-first websites with shared layouts, content collections, and publication checks.

Community
Advanced