Imported from kaiychen9/acme-html-style (SKILL.md). Install upstream with npx skills add kaiychen9/acme-html-style. Copyright stays with the author.

Acme HTML Style

You generate self-contained HTML files in the Acme warm editorial style. Every output is a single .html file — no build step, no dependencies, no external resources. Open it in a browser and it works.

This style comes from the html-effectiveness project — 21 hand-crafted HTML documents that demonstrate HTML as a superior output format for agent-generated content.

Core Identity

You are producing documents that feel warm, editorial, and minimal — like a well-designed internal tool or a high-quality documentation page. The visual language uses:

Warm ivory page backgrounds (never stark white)
Terracotta (clay) as the primary accent color
Serif headings for gravitas, sans body for readability, mono for code/data
Generous whitespace with deliberate 1.5px borders
White cards on ivory for content panels

Workflow

When a user asks for any document that matches the trigger phrases:

Identify the scenario — which of the 9 categories does the request fall into?
Read the relevant reference — open references/scenario-guide.md and locate the matching category for composition and key patterns
Read design tokens — open references/design-tokens.md if you need the exact color/type/spacing values
Read component catalog — open references/component-catalog.md for specific component CSS
Read layout patterns — open references/layout-patterns.md for grid/flex/section structures
Generate the HTML — use the starter template from assets/starter-template.html as the base, then fill in content
Run the quality checklist — open references/quality-checklist.md and verify every item before delivering

Reference Files

Reference	When to Read
`references/scenario-guide.md`	Always — identifies which patterns to use
`references/design-tokens.md`	When you need exact color hex, font stack, or spacing values
`references/component-catalog.md`	When you need button, badge, table, card, input, or other component CSS
`references/layout-patterns.md`	When you need page shell, header, grid, section, or footer patterns
`references/quality-checklist.md`	Always before delivering — pre-flight check
`assets/starter-template.html`	As the base boilerplate for new documents

Design Tokens (Condensed)

Always start with this :root block:

:root {
  --ivory: #FAF9F5; --slate: #141413; --clay: #D97757; --clay-d: #B85C3E;
  --oat: #E3DACC; --olive: #788C5D; --rust: #B04A3F; --white: #FFFFFF;
  --gray-100: #F0EEE6; --gray-300: #D1CFC5; --gray-500: #87867F; --gray-700: #3D3D3A;
  --success: #788C5D; --warning: #C78E3F; --danger: #B04A4A; --info: #5C7CA3;
  --serif: ui-serif, Georgia, "Times New Roman", Times, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
  --radius-panel: 12px; --radius-row: 8px; --radius-pill: 999px;
  --border: 1.5px solid var(--gray-300);
  --shadow-sm: 0 1px 2px rgba(20,20,19,0.06);
  --shadow-md: 0 4px 10px rgba(20,20,19,0.08);
  --shadow-lg: 0 12px 28px rgba(20,20,19,0.12);
}

See references/design-tokens.md for the complete specification.

Typography Rules (Non-Negotiable)

Element	Font	Weight	Notes
Headings (h1-h3)	`var(--serif)`	500	letter-spacing: -0.01em to -0.02em
Body text	`var(--sans)`	430	line-height: 1.55-1.6
Code, labels, metadata, file paths, stat labels	`var(--mono)`	—	Uppercase + letter-spacing for labels

Component Quick Reference

See references/component-catalog.md for complete CSS. Key points:

Buttons: 36px height, sans 14px/500, 8px radius. Primary=clay bg, Secondary=white+border, Ghost=transparent, Danger=red bg
Badges: 22px height, pill-shaped, tinted backgrounds at 12-16% opacity of semantic color
Tags/Chips: Mono font, 11px, uppercase, letter-spaced
Tables: panel-table class — white bg, rounded, gray-100 header, row hover
Cards: White bg, 1.5px gray-300 border, 12px radius, hover lifts 3px
Inputs: 38px height, 1.5px border, clay focus ring with rgba shadow

Page Structure (Non-Negotiable)

Every document follows this skeleton:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>[Title]</title>
  <style>/* all CSS here */</style>
</head>
<body>
  <div class="page">
    <header>
      <div class="eyebrow">[Category]</div>
      <h1>[Title]</h1>
      <p class="sub">[Description]</p>
    </header>
    <section>
      <h2>[Section]</h2>
      <hr class="rule">
      <!-- content -->
    </section>
    <footer>[Sources · date]</footer>
  </div>
</body>
</html>

Scenario Routing Table

#	Scenario	Composition Reference	Key Components
1	Exploration & Planning	scenario-guide.md §1	card-grid, comparison tables, timeline SVG, pro/con indicators, code blocks
2	Code Review & PRs	scenario-guide.md §2	diff blocks, severity tags, comment bubbles, `<details>`, checklist
3	Design System & Variants	scenario-guide.md §3	color swatches, type scale, spacing ruler, component stages
4	Prototyping	scenario-guide.md §4	animation sandbox, easing panel, drag-and-drop, keyframe display
5	Diagrams & Flowcharts	scenario-guide.md §5	inline SVG, clickable nodes, legend, sticky sidebar
6	Slide Decks	scenario-guide.md §6	scroll-snap slides, IntersectionObserver, slide counter, invert slides
7	Research & Explainers	scenario-guide.md §7	TL;DR box, `<details>` steps, tabbed code, FAQ, glossary
8	Reports (Status/Incident)	scenario-guide.md §8	stat cards, highlights, shipped table, SVG chart, timeline, carryover
9	Custom Editing UIs	scenario-guide.md §9	kanban columns, toggles, contenteditable, copy-export, DnD

Quality Rules

Before delivering any HTML file, verify these items. See references/quality-checklist.md for the full checklist.

Tokens: Every color uses a var(--token), never a hardcoded hex
Typography: Serif headings, sans body, mono code/labels — no exceptions
Borders: Always 1.5px solid, never 1px
Cards: White bg on ivory page, 12px radius
Dependencies: Zero — no CDN, no fonts, no frameworks, no npm
Self-contained: Single <style> block, single <script> block (if needed)
Footer: Every document ends with a mono-font metadata footer

Anti-Patterns to Avoid

Never use pure white (#FFF) as page background — always ivory
Never use 1px borders for cards/panels — always 1.5px
Never use sans-serif for headings — always serif
Never use bold (700) weight for headings — always 500
Never add external CSS frameworks or JS libraries
Never use bright saturated colors (bright green, electric blue)
Never leave out the :root token block
Never skip the footer
Never use browser-default form elements — always custom styled
Never make cards transparent — they must be white on the ivory page

acme-html-style

About