birch-html

Birch HTML

Create one complete, locally opening Birch HTML artifact. Optimize for complete HTML, preserved Birch CSS placeholder, source-grounded claims, 390px mobile safety, strict component contracts, and minimal page-local CSS.

Output contract

• Return a full HTML document only: no prose, Markdown fences, or partial HTML.
• If writing to disk, validate and return only the artifact path.
• Keep the placeholder exactly until postprocessing: <style data-birch-system>__BIRCH_SYSTEM_CSS__</style>.
• Do not paste bundled Birch CSS or modify canonical CSS/scripts/resources.
• No network assets: no remote URLs, CDNs, fonts, iframes, images, scripts, or styles.
• Use <main class="page stack" data-gap="lg"> as the outer visible shell.
• Do not replace the Birch shell with a custom app/dashboard shell. Do not make body, .container, .report, or .dashboard the visible page shell.
• Do not invent Birch classes/CSS variables or use Birchline-only classes. In particular, avoid custom path/helper classes such as .file-path and avoid variables such as --color-*, --size-*, --s-*, --bg-alt, or --fg-muted unless they are already defined by Birch.
• Use flat token surfaces only: no gradients, glassmorphism, glow backgrounds, decorative background images, or custom dashboard skins.
• Birch style forbids gradients for card, panel, page, and callout backgrounds and for body/page backgrounds (for example linear-gradient, radial-gradient, or conic-gradient). Use flat Birch token surfaces instead.
• For diffs, never paste raw unified-diff text into <pre> or code blocks. Represent patch lines with .diff-row; the only literal +/- marker should be inside <span class="mark">.

Workflow

1. Read sources first: files, diffs, data, logs, commands, screenshots, session notes, and local links before writing claims.
2. Make a terse brief: audience, purpose, exact paths/values, caveats, unknowns, sections, and chart intent.
3. Ask only if missing audience, scope, sources, or output path would materially change the result; otherwise proceed and label assumptions.
4. Load only needed recipes: numeric-data, code-review, pr-change-writeup, implementation-plan, module-explainer, process-explainer, design-directions, status-incident-report, flow-diagram, slide-deck, benchmark-comparison, or design-system-reference.
5. If no path is specified and filesystem access exists, write a descriptive kebab-case .html file in the current directory.
6. Prefer copying skill/resources/template.html; replace body content only. Then run uv run skill/scripts/finish_birch_html.py <output.html>.
7. Validate before returning: doctype, html/head/body, viewport, title, .page, Birch CSS placeholder/embedded CSS, closing </html>, no network assets, no unknown classes/variables, strict children, wrapped long content, no 390px overflow, and no raw patch marker lines. If available run: uv run --with pillow python skill/scripts/check_birch_renderings.py --artifact <output.html>.