Communitygithub.com

DeepCogNeural/html-artifact-report-skill

Turn notes/Markdown into readable HTML reports plus auditable JSON manifests for AI agents.

¿Qué es html-artifact-report-skill?

html-artifact-report-skill is a Claude Code agent skill that turn notes/Markdown into readable HTML reports plus auditable JSON manifests for AI agents.

Compatible con✓Claude Code~Codex CLI~Cursor
npx skills add DeepCogNeural/html-artifact-report-skill
Ver original→Ver todas las habilidades

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentación

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:
python3 scripts/check_html_artifact.py artifact.html
python3 scripts/check_artifact_json.py artifact.json --html artifact.html

For repository examples, run:

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

HTML requirements

  • Start with <!doctype html>.
  • Include <meta name="artifact-contract" content="artifact-report.v1">.
  • 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 <details>.
  • 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.

Skills relacionados

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

affaan-m/prisma-patterns

Prisma ORM patterns for TypeScript backends — schema design, query optimization, transactions, pagination, and critical traps like updateMany returning count not records, $transaction timeouts, migrate dev resetting the DB, @updatedAt skipped on bulk writes, and serverless connection exhaustion.

community

affaan-m/django-celery

Django + Celery async task patterns — configuration, task design, beat scheduling, retries, canvas workflows, monitoring, and testing. Use when adding background jobs, scheduled tasks, or async processing to a Django app.

community

affaan-m/quarkus-patterns

Quarkus 3.x LTS architecture patterns with Camel for messaging, RESTful API design, CDI services, data access with Panache, and async processing. Use for Java Quarkus backend work with event-driven architectures.

community