Effective HTML

One-pager

Make a one-pager, one HTML page that shares an idea with teammates early, or recaps work for them, with big pictures and little words.

one-pager asks your agent for one HTML page to share with teammates. Usually it shares an idea at an early stage to get first reactions; sometimes it recaps work done. It uses the big pictures and little words of Big pics, little words, written for a reader who is new to the subject and has a minute.

The skill is an exact copy of the original in bro. Invoke it directly when you want a page your teammates can read in a minute.

Install and use

npx skills add plannotator/effective-html --skill one-pager

Once installed, ask your agent:

Use one-pager to share this idea with the team.

Copy the canonical skill

Save the block below as skills/one-pager/SKILL.md in a repository or agent skill directory. Its content matches the repository source exactly.

skills/one-pager/SKILL.md
---
name: one-pager
description: >-
  Make a one-pager: one HTML page that shares an idea with teammates early,
  or recaps work for them, with big pictures and little words.
disable-model-invocation: true
---

You are making a one-pager: one HTML page to share with teammates. Usually it is an idea at an early stage, to get their first reactions; sometimes it is a recap of work done. The reader is new to the subject and has a minute.

Use HTML to help them understand what we're discussing. Show them with big pictures and little words without withholding key details.
Use your own taste, avoid lazy design, integrate real-world pictures/icons/visuals as needed but only selectively when it makes sense.
When you do use prose/detail: Be clear, concise/terse, and avoid jargon. Explain things as if the viewer is new here, but don't use weird metaphors.
Designing artifactsChoose a visual direction that fits the subject.

On this page