---
name: launch-sheet
description: Write one responsive HTML landing page from a fact sheet the user supplies. Use when the user wants a launch page, or a page whose hero, proof, price, and FAQ use only supplied facts.
---
Write one HTML page. It has a hero, a proof list, a price strip, and an FAQ, in that order. Copy each fact-sheet value into the element named for it, character for character.
When a required value is missing, when a value is longer than its limit, or when a list is past its count, ask for that value and wait. A number, a claim, or a quotation appears only inside a supplied value.
The worked example is the public skills.love site. Its sheet is below. That page is `preview.html`. Leave that file as it is. Write a new page in the directory the user names.
## Worked example
```
mark: skills.love
title: A curated shelf of agent skills.
lede: Popular skills, recorded so an agent can use them.
action: Catalog JSON
action-url: https://skills.love/skills/index.json
proof: The first shelf is popular skills that help build one-api.
proof: The installer is POSIX sh.
proof: It copies a mirrored skill, its licence, and the skills.love attribution note into the agent directory you name.
proof: A link-only entry is not copied. The script prints that skill’s upstream URL instead.
price-label: Free
price-text: The files are public at https://skills.love.
faq-q: Where is the catalog?
faq-a: The catalog is /skills/index.json.
faq-q: What should an agent read before choosing a skill?
faq-a: Agents should read /skills/index.json before choosing a skill.
faq-q: What does the installer do with a link-only skill?
faq-a: Link-only skills are not copied.
```
The proof lines and the FAQ answers are sentences from the public homepage and from `llms.txt`. The price line is the public shelf: the files are public, and the price is free.
## Read the fact sheet
A fact sheet is lines of `key: value`. The value is the text after the first colon and the one space that follows it. Ignore a blank line.
Keys:
- `mark`, `title`, and `lede` appear once each.
- `action` and `action-url` appear once each, and only as a pair. When both are absent, the hero has no action. When one is present, ask for the other and wait.
- `proof` repeats, in order, once per proof line.
- `price-label` and `price-text` repeat as pairs, in that order. A label that has no text, or a text that has no label, is incomplete: ask and wait.
- `faq-q` and `faq-a` repeat as pairs, in that order. A question that has no answer, or an answer that has no question, is incomplete: ask and wait.
A line whose key is not in that list is not a value. Ask what to do with it and wait.
Limits:
- `mark` is at most 24 characters. `title` is at most 72. `lede` is at most 160.
- `action` is at most 32 characters. `action-url` is at most 200, and it is an `http://` or `https://` URL, or a path that starts with `/` and not `//`.
- Proof has 1 to 4 lines. Each line is at most 180 characters.
- Price has 1 to 3 pairs. A label is at most 24 characters. A text is at most 140.
- FAQ has 1 to 4 pairs. A question is at most 100 characters. An answer is at most 220.
Count characters after the value is taken. Do not split, join, or rewrite a value to make it fit.
## Draw the page
Write `{stem}.html`. The user chooses the stem. When they do not, use `launch-sheet`.
The document title is the mark, a space, an em dash, a space, and the title. The meta description is the lede.
In text, write `&` as `&`, `<` as `<`, and `>` as `>`. In an attribute, also write `"` as `"`.
Start the file with ``. The root element is `html` with `lang="en"`. The head has a `meta` charset `utf-8`, a viewport meta of `width=device-width, initial-scale=1`, the `title`, the description `meta`, and one `style` element. Copy this style unchanged.
```css
:root {
color-scheme: light;
--paper: #f3efe4;
--ink: #1c1915;
--muted: #4e483f;
--rule: #cfc6b6;
--stamp: #6f2a24;
--serif: "Iowan Old Style", Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
--sans: "Avenir Next", "Segoe UI", sans-serif;
--mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
:root {
color-scheme: dark;
--paper: #161410;
--ink: #f3efe4;
--muted: #cfc6b6;
--rule: #3c362e;
--stamp: #e3b2a8;
}
}
* { box-sizing: border-box; }
body {
margin: 0;
background: var(--paper);
color: var(--ink);
font-family: var(--sans);
font-size: 1.05rem;
line-height: 1.55;
}
a { color: inherit; }
a:hover { color: var(--stamp); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.skip {
position: absolute;
left: 1rem;
top: -4rem;
background: var(--paper);
color: var(--ink);
padding: 0.4rem 0.7rem;
}
.skip:focus { top: 0.6rem; }
.wrap {
width: min(40rem, calc(100% - 2.5rem));
margin: 0 auto;
padding: 3rem 0 4rem;
}
.mark {
margin: 0;
font-family: var(--mono);
font-size: 0.78rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--stamp);
}
h1 {
margin: 0.8rem 0 0;
font-family: var(--serif);
font-size: clamp(2.4rem, 7vw, 3.6rem);
font-weight: 500;
letter-spacing: -0.03em;
line-height: 0.98;
}
.lede { margin: 1.15rem 0 0; max-width: 36rem; font-size: 1.15rem; }
.action { margin: 1.4rem 0 0; font-family: var(--mono); font-size: 0.92rem; }
.action a { color: var(--stamp); }
h2 { margin: 0; font-family: var(--serif); font-size: 1.4rem; font-weight: 500; }
section { margin-top: 2.6rem; }
.proof ul, .price ul { margin: 0.9rem 0 0; padding: 0; list-style: none; }
.proof li { margin: 0; padding: 0.75rem 0; border-top: 1px solid var(--rule); }
.price ul { display: grid; gap: 1rem; }
@media (min-width: 40rem) {
.price ul { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
}
.price li { margin: 0; padding-top: 0.75rem; border-top: 3px solid var(--stamp); }
.price-label {
margin: 0;
font-family: var(--serif);
font-size: 1.8rem;
font-weight: 500;
letter-spacing: -0.03em;
}
.price-text { margin: 0.35rem 0 0; color: var(--muted); }
.faq div { padding: 0.85rem 0; border-top: 1px solid var(--rule); }
.faq dt { margin: 0; font-family: var(--serif); font-size: 1.15rem; }
.faq dd { margin: 0.35rem 0 0; color: var(--muted); }
```
The body is a skip link, then a `div` of class `wrap`. Inside the wrap, the regions are a `header` of class `hero`, then a `main` with the proof section, the price section, and the FAQ section.
The skip link is `Skip to proof`.
The hero is:
```html
```
Omit the action paragraph when the sheet has no action.
The proof section is `section` class `proof`, `id="proof"`, `aria-labelledby="proof-title"`. Its heading is `Proof
`. The list is a `ul`. Each proof line is one `li`, in order.
The price section is `section` class `price`, `aria-labelledby="price-title"`. Its heading is `Price
`. The list is a `ul`. Each pair is one `li`, in order: a `p` of class `price-label`, then a `p` of class `price-text`.
The FAQ section is `section` class `faq`, `aria-labelledby="faq-title"`. Its heading is `FAQ
`. The list is a `dl`. Each pair is a `div`, in order: a `dt` for the question, then a `dd` for the answer.
The words the template adds are `Skip to proof`, `Proof`, `Price`, and `FAQ`. Every other word is a supplied value.
Done when the file is that document, the style block is unchanged, the four regions are in order, every supplied value is in its element, and the file has no `script`, no `img`, and no element this skill does not name.