# Html Artifact Report

> Create HTML report artifacts from notes or Markdown with paired JSON manifests for AI-agent audit and reuse.

- **Type:** Skill
- **Install:** `agentstack add skill-deepcogneural-html-artifact-report-skill-html-artifact-report-skill`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [DeepCogNeural](https://agentstack.voostack.com/s/deepcogneural)
- **Installs:** 0
- **Category:** [AI & ML](https://agentstack.voostack.com/c/ai-and-ml)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [DeepCogNeural](https://github.com/DeepCogNeural)
- **Source:** https://github.com/DeepCogNeural/html-artifact-report-skill

## Install

```sh
agentstack add skill-deepcogneural-html-artifact-report-skill-html-artifact-report-skill
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# HTML Report Artifact

Use this skill when a substantial answer, review, analysis, decision memo, or research summary should become a durable artifact instead of a long chat response.

Produce exactly two primary outputs:

- `artifact.html` — the human-facing report.
- `artifact.json` — the agent-facing manifest.

The JSON manifest is not a prose duplicate. It is a structured record of sections, components, claims, evidence, limitations, source hashes, and verification.

## Files to read first

Resolve paths relative to this `SKILL.md`.

1. `SPEC.md` — the public contract.
2. `templates/desktop-report-template.html` — the canonical HTML baseline.
3. `components/report-components.md` — allowed report components.
4. `references/anti-slop.md` — visual anti-patterns to avoid.
5. One complete example under `examples/`.

## Workflow

1. Identify the reader, decision, evidence, and source material.
2. Draft the semantic outline before writing HTML:
   - summary
   - sections
   - components
   - claims
   - evidence
   - verification
   - limitations
3. Create `artifact.json` from the outline.
4. Create `artifact.html` from `templates/desktop-report-template.html`.
5. Ensure HTML and JSON section IDs match exactly, with no duplicates or unregistered extras.
6. Ensure HTML and JSON component IDs match exactly, with no duplicates or unregistered extras.
7. Hash every local evidence file listed in `artifact.json`.
8. Run:

```bash
python3 scripts/check_html_artifact.py artifact.html
python3 scripts/check_artifact_json.py artifact.json --html artifact.html
```

For repository examples, run:

```bash
python3 scripts/check_examples.py
python3 -m unittest discover -s tests
```

## HTML requirements

- Start with ``.
- Include ``.
- Use a single `.page` main column at `max-width:1180px`.
- Use the canonical font tokens:
  - `--serif: ui-serif, Georgia, "Times New Roman", serif`
  - `--sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif`
  - `--mono: ui-monospace, "SF Mono", Menlo, Monaco, monospace`
- Use the canonical warm palette tokens:
  - `#FAF9F5`
  - `#141413`
  - `#D97757`
- Include:
  - answer-first TL;DR
  - summary cards
  - decision note cards for `Adopt Now` / `Hold Back` / `Revisit Later` style buckets when the report needs plain-language judgment
  - real sections with a small numbered pill, a short `.sec-intro`, and quiet article-like spacing
  - at least one visual or table
  - folded evidence
  - verification and limitations

## JSON requirements

The manifest must validate against `contract/artifact-report.schema.json`.

Required top-level fields:

- `schema_version`
- `artifact_id`
- `title`
- `template_version`
- `source_hashes`
- `sections`
- `components`
- `claims`
- `evidence`
- `verification`
- `limitations`

## Style rules

- Be answer-first.
- Keep the visible page like a language report, not a component audit. Put typography tokens, commands, raw tables, and implementation notes in folded evidence unless the report is specifically about those details.
- Keep dense raw evidence folded behind ``.
- Do not invent data.
- Label missing evidence clearly.
- Do not show format-compliance notes to the reader.
- Do not add a sticky sidebar, a default table of contents, or tab-hidden main content.
- Do not use decorative emoji as structural icons.
- Do not use purple gradients, neon colors, GitHub-dark `#0D1117`, or generic SaaS dashboard shells.

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [DeepCogNeural](https://github.com/DeepCogNeural)
- **Source:** [DeepCogNeural/html-artifact-report-skill](https://github.com/DeepCogNeural/html-artifact-report-skill)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-deepcogneural-html-artifact-report-skill-html-artifact-report-skill
- Seller: https://agentstack.voostack.com/s/deepcogneural
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.