--- name: infopage description: Create clean, single-file HTML pages for displaying information. Use for quick reference pages, comparisons, lists, or any data you want to view in a browser. --- # Infopage Create document-style HTML pages. Utilitarian, readable, no decoration. ## Style Warm, readable, classic. Serif typography with subtle color accents. ## Color Palette | Name | Hex | |------|-----| | cream | `#f5f3e8` | | black | `#222` | | red | `#db5439` | | pink | `rgba(220, 84, 57, 0.5)` | | gold | `#eebe6d` | ### Valid Combinations | Background | Text | |------------|------| | cream | black | | red | black | | pink | black | | gold | black | | black | cream | | black | gold | Use any combination, but: - **Cards must all use the same combination** - **Page background must differ from card background** ## Base Template ```html PAGE_TITLE

PAGE_TITLE

SUBTITLE

``` ## Patterns ### Section with Heading ```html

Section Title

Body text goes here.

``` ### Numbered List ```html
  1. Step one. Description.
  2. Step two. Description.
``` ### Bullet List ```html ``` ### Divider ```html
``` ### Key-Value ```html
Label
Value
``` ### Table ```html
Name Value
Item Details
``` ### Cards (Preferred for Comparisons) Cards show key facts at a glance. No verbose descriptions. ```html
App Name 92/100

$12/mo

Offline Local AI
Free Tier
Yes
Trial Length
2,000 words/week
``` **Card content:** - Clickable title (links to website, no separate "Visit Website") - Rank/score badge - Price - Tags for key features - Key facts (free tier, trial length, etc.) - **No description paragraphs** - that's where AI waffle creeps in **Grid columns:** - 2-3 columns: `md:grid-cols-2 lg:grid-cols-3` - More columns for simpler cards: `md:grid-cols-3 lg:grid-cols-4` ### Note/Callout ```html

Note: Important information here.

``` ### Tags/Badges ```html Featured New Tag ``` ### Links ```html Link text → ``` ## File Naming **Default:** `index.html` in current directory **If index.html exists:** 1. Ask user before overwriting, OR 2. Create a subdirectory: `./topic-name/index.html` **Never:** Long descriptive filenames like `compare-voice-apps-on-mac.html` **Examples:** ``` # Good ./index.html ./voice-apps/index.html ~/Desktop/examples/index.html # Bad ./compare-voice-apps-on-mac.html ./my-keyboard-shortcuts-reference.html ``` ## Rules - Use only palette colors (cream, black, red, pink, gold) - Cards use same bg color, distinct from page bg - Border-4 for cards, not border-1 - No rounded corners - Serif typography (Libre Baskerville) - Generous whitespace - **Prefer card grids over lists for comparisons** - **Cards are minimal** - name + one key fact, click to expand - **No AI waffle** - no "gold standard", "exceptionally accurate", just facts - Transitions only on user action (expand/collapse OK, no auto-animations) ## TODO: Future Looks - [ ] Monospace/terminal variant - [ ] Sans-serif modern variant - [ ] Dark mode (white on black)