html-artifacts

Files (61)

• LICENSE
• SKILL.md
• openai.yaml · agents/
• architecture.js · assets/
• SHADCN-LICENSE.md · assets/dashboard/
• build.mjs · assets/dashboard/
• app.js · assets/dashboard/dist/
• theme.css · assets/dashboard/dist/
• package-lock.json · assets/dashboard/
• package.json · assets/dashboard/
• App.tsx · assets/dashboard/src/
• badge.tsx · assets/dashboard/src/components/ui/
• button.tsx · assets/dashboard/src/components/ui/
• card.tsx · assets/dashboard/src/components/ui/
• chart.tsx · assets/dashboard/src/components/ui/
• input.tsx · assets/dashboard/src/components/ui/
• table.tsx · assets/dashboard/src/components/ui/
• tabs.tsx · assets/dashboard/src/components/ui/
• tooltip.tsx · assets/dashboard/src/components/ui/
• data.ts · assets/dashboard/src/
• utils.ts · assets/dashboard/src/lib/
• workbench.css · assets/dashboard/src/
• tsconfig.json · assets/dashboard/
• 01-register.html · assets/fancy/examples/
• 01-register.png · assets/fancy/examples/
• 01-register.svg · assets/fancy/examples/
• 02-editorial.html · assets/fancy/examples/
• 02-editorial.png · assets/fancy/examples/
• 02-editorial.svg · assets/fancy/examples/
• 03-map.html · assets/fancy/examples/
• 03-map.png · assets/fancy/examples/
• 03-map.svg · assets/fancy/examples/
• 04-comparison.html · assets/fancy/examples/
• 04-comparison.png · assets/fancy/examples/
• 04-comparison.svg · assets/fancy/examples/
• 05-guided.html · assets/fancy/examples/
• 05-guided.png · assets/fancy/examples/
• 05-guided.svg · assets/fancy/examples/
• 06-composer.html · assets/fancy/examples/
• 06-composer.png · assets/fancy/examples/
• 06-composer.svg · assets/fancy/examples/
• index.html · assets/fancy/examples/
• overview.jpg · assets/fancy/examples/
• plain.css · assets/
• runtime.js · assets/
• comparison.html · assets/shapes/
• document.html · assets/shapes/
• status.html · assets/shapes/
• system.html · assets/shapes/
• dashboard.md · references/
• diagrams.md · references/
• fancy.md · references/
• plain.md · references/
• canvas.md · references/styles/
• comparison.md · references/styles/
• composer.md · references/styles/
• editorial.md · references/styles/
• guided.md · references/styles/
• register.md · references/styles/
• visual-explainer.md · references/
• …and 1 more

SKILL.md (first lines)

# HTML Artifacts

One entrypoint for presentation and visual explanation. Content workflows still determine the argument, evidence, status, and decisions; this skill determines how the reader encounters and works with them.

## Choose the presentation

| Request | Read |
| --- | --- |
| Unspecified, simple, or Plain | [Plain](references/plain.md), the default |
| Fancy, expressive, or a named composition | [Fancy](references/fancy.md), then the chosen style guide |
| Edit an existing artifact | Preserve its established design unless the user requests a change; use the relevant guide |

For Fancy, choose one composition suited to the task unless the user requests alternatives. Explain the choice briefly and proceed; no preference questionnaire is needed. Explicit user references and styling choices take precedence over these defaults.

When the task is to **teach through visuals**, also read [Visual Explainer](references/visual-explainer.md). This is a teaching method that combines with either presentation. A dashboard or form alone does not call for it. Picture-led explanation defaults to Plain unless Fancy is requested.

For substantial relationship diagrams, read [Diagrams](references/diagrams.md). For a dense Plain data explorer, read [Dashboards](references/dashboard.md). Load only the branches needed.

## Build and inspect

- Use semantic HTML for real tables, forms, and controls; SVG for precise visual relationships. A pictured control in an SVG is a mockup, not a working prototype. Implement the requested interactions and distinguish illustrative data from live state.
- Preserve facts, units, uncertainty, and relationship meaning through composition changes. For substantial diagrams, provide a text equivalent as well as accessible SVG labels.
- Copy or adapt resources into the task workspace. Prefer self-contained HTML; bundle dependencies when needed. The installed examples are calibration material, not task output locations.
- Inspect the rendered result at desktop and around 390 px. Check text contrast, label/path collisions, local overflow, keyboard operation of implemented controls, and every supported appearance. If a large figure needs scrolling or a full-size view, make that access clear.
- When producing alternatives, compare their thumbnails as well as full-size renders. Entry point, reading order, density, proportions, dominant object, and use of empty space should distinguish them even in grayscale.
- Open the finished artifact when useful and report any verification that could not be completed. Creating a local artifact does not itself publish it.

## Publishing and compatibility

When asked to upload to artifacts.lena.dog, use the separately installed `upload-artifact` skill. Its hosted sandbox constraints affect packaging and supported interactions; read them before building when hosting is already requested. This skill is otherwise independent of that service.

All rendering resources and style guidance live here. `html-artifact-style`, `fancy-html-artifacts`, and `visual-explainer` are optional compatibility entrypoints; this folder works without them.

From love-lena/skills, MIT.

More from love-lena/skills