html-reports

Files (1)

• SKILL.md

SKILL.md (first lines)

# HTML Reports

Produce a single self-contained `.html` file, upload it to AgentDrop as a Draft for the user to review,
and revise that Draft until the user says to publish.

**The layout, structure, sections, and composition are yours to design.** There is no template
and no prescribed set of "report shapes" — modern models design well on the fly. Read the real
context, decide what the document should be, and build it. The only fixed constraints are the
visual design system below (palette, type, surfaces, motion) and that **every report must be fully responsive and
genuinely good-looking on a phone** — these are published to a URL and routinely read on mobile,
so mobile is a first-class target, not an afterthought (see
[Responsive](#responsive--mandatory-on-every-report)).

## First step

If Anthropic's `frontend-design` skill
([anthropics/skills: frontend-design](https://github.com/anthropics/skills/tree/main/skills/frontend-design))
is available, load it and apply it. That skill carries the guidance for distinctive, intentional
visual design; this skill supplies the palette and type it must be expressed in. If it is not
installed, first offer to install it for the user from that link before you start the report.

## Review and publish through AgentDrop

The user reviews every report as an AgentDrop Draft, unless they name another destination. Load the
`agentdrop` skill: it owns the upload mechanics (auth, the multipart call, Draft re-uploads,
publishing, multi-file bundles).

1. Write the complete report to a local `.html` file in the current project or working directory.
   It is the source you edit between rounds, so keep it out of temporary directories.
2. Create a report Artifact as a Draft, open its `url` in the user's browser, and give them two links:
   the Artifact `url` (stable; shows them the Draft when signed in, viewers see the last published
   Version) and the Draft URL from `draft.url` (opens the Draft for anyone holding it, off the
   corporate network too).
3. For every requested change, edit the local file, re-upload the Draft to the same Artifact,
   reopen the `url`, and give the user the new `draft.url`: each draft upload rotates it, so the
   previous one 404s. A change is done when the Draft shows it.
4. Publish when the user says to. Later edits to a published report go to the same Artifact as a new
   Draft, so the URL stays stable.

## Design system: AgentDrop v2 "Ink Ledger" (the one hard constraint)

Reports open inside the AgentDrop viewer, framed by its white content sheet beside the navy
provenance rail, so each report should read as another page of the same ledger: navy and paper,
one coral pen mark, Schibsted Grotesk titles, Archivo text, Spline Sans Mono values.

It is a **two-color system (navy + coral) over warm neutrals**, light theme only. There is **no
green/amber/red and no dark mode** (the Dashboard has one; the viewer and reports stay light).
Map good/neutral states to navy and problem/exception/action states to coral; use dashed borders
for a third "caveat" distinction if you need one. Color carries meaning, never decoration.

### Color tokens (use these exact values)

```css
:root {
  --navy:          #1c2b4a;  /* ink on paper, and every navy surface */
  --navy-hover:    #24365c;
  --paper:         #f7f6f2;  /* page background */
  --coral:         #e4573d;  /* the only accent: problems, primary action, the current item */
  --coral-hover:   #ee6a50;  /* also any coral TEXT on navy (clears 4.5:1 there) */
  --ink-soft:      rgba(28, 43, 74, 0.75);  /* secondary prose on white sheets */
  --muted-ink:     #8a94a8;  /* labels, meta, axis text; under 3:1 on white, so never sentences */
  --muted:         #a9b2c3;  /* secondary text on navy */
  --onfill:        #f7f6f2;  /* text on navy and coral fills */
  --sheet:         #ffffff;
  --sheet-edge:    #e3dfd5;  /* sheet and control hairline */
  --hairline:      #d9d6cc;  /* dotted row separators */
  --code:          #f2f0e9;  /* code chips, quiet inset panels */
  --coral-wash:    rgba(228, 87, 61, 0.14);
  --coral-edge:    rgba(228, 87, 61, 0.45);
  --ink-edge:      rgba(28, 43, 74, 0.3);    /* outlined button border */
  --ink-edge-soft: rgba(28, 43, 74, 0.25);   /* neutral badge border */
  --row-hover:     rgba(28, 43, 74, 0.02);
  --onfill-rule:   rgba(247, 246, 242, 0.18); /* dotted rules on navy */
  --onfill-edge:   rgba(247, 246, 242, 0.3);  /* outlined controls on navy */
  --shadow-sheet:  0 4px 20px rgba(28, 43, 74, 0.1);
  --shadow-modal:  0 18px 50px rgba(28, 43, 74, 0.28);
  --radius: 3px;
}
```

### Typography (load via Google Fonts)

```html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@400..900&family=Archivo:wght@400..700&family=Spline+Sans+Mono:wght@400..600&display=swap">
```

```css
--display: "Schibsted Grotesk", "Archivo", -apple-system, BlinkMacSystemFont, sans-serif;
--body:    "Archivo", -apple-system, BlinkMacSystemFont, sans-serif;
--mono:    "Spline Sans Mono", ui-monospace, monospace;
```

The variable-weight ranges in the URL are what make the 550 heading weight render; a static
`wght@400;500;600` list would round it.

| Role | Setting | Use |
|---|---|---|
| Display | Schibsted Grotesk 550, 2rem / 1.12, `letter-spacing: -0.02em` | the page title (about 1.6rem on phones), `text-wrap: balance` |
| Title | Schibsted Grotesk 550, 1.15rem / 1.2, `-0.015em` | sheet and section headings |
| Body | Archivo 400, 14 to 15.5px / 1.55 | prose; ledes and secondary prose in `--ink-soft` |
| Label | Archivo 600, 10px, `0.12em` tracking, uppercase, `--muted-ink` | table heads, stat captions, ledger and field labels |
| Mono | Spline Sans Mono 500, about 12.5px | numbers, IDs, hosts, timestamps, datelines, chart text, the footer |

Every heading is Schibsted Grotesk, upright, at 550 with negative tracking. **No serif and no
italic anywhere**, including pull-quotes; emphasis inside prose is Archivo 600.

### Surfaces and texture

- **Paper page, white sheets.** A sheet is white with a 1px `--sheet-edge` border, 3px radius,
  `--shadow-sheet`, and about 1.25rem by 1.5rem padding. One sheet holds one titled section: a
  baseline-aligned title row with an optional right-aligned mono note, then content. Stack sheets
  18px apart in a centered column about 60rem wide. Keep `body` on paper; the viewer lays the
  report on its own mat, so leave its navy rail to the viewer and build no competing left rail.
- **Woven linen on navy.** Every navy surface in AgentDrop v2 (sidebar, viewer rail, sign-in
  panel, tour band) carries a fine crosshatch, like a cloth ledger cover. Give a report at most one
  navy surface, for the part that should read as the binding (a verdict or status panel, a
  masthead band), and texture it the same way:

From MaxAnderson95/my-opencode-setup, MIT.

More from MaxAnderson95/my-opencode-setup