html-plan

Dieser Auszug wurde bei der Prüfung gespeichert. Die externe Quelle enthält die vollständige und aktuelle Version.

---
name: html-plan
description: Use this skill when the user asks to create, edit, review, or standardize a planning document that should be delivered as a standalone HTML file. This includes project plans, implementation plans, migration plans, release plans, research plans, and technical execution plans where readable structure, scannable sections, and portable HTML output matter.
---

# HTML Plan Skill

Create clear, standalone HTML planning documents for technical or project work.

## When to Use

Use this skill when the user wants a plan document in HTML format, especially for:

- Implementation plans
- Project or roadmap plans
- Migration or rollout plans
- Release plans
- Research or investigation plans
- Technical decision or execution plans

Do not use this skill for interactive web apps, marketing pages, dashboards, or rich UI prototypes unless the user specifically asks for a plan document.

## Output Requirements

Produce a single self-contained `.html` file unless the user requests otherwise.

The document should:

- Use semantic HTML5: `header`, `main`, `section`, `article`, `nav`, `footer` where appropriate.
- Include a concise document title in both `<title>` and the visible `<h1>`.
- Use a readable structure with stable heading levels: one `h1`, then `h2` for major sections, `h3` for subsections.
- Include a small table of contents when the document has more than four major sections.
- Prefer tables for timelines, milestones, owners, risks, dependencies, and status matrices.
- Keep styling embedded in a single `<style>` block.
- Avoid external scripts, remote fonts, tracking pixels, or network-dependent assets.
- Work when opened directly from the filesystem.

## Recommended Document Structure

Use this structure as a default and adapt it to the user's context:

1. Overview
2. Goals and Non-Goals
3. Scope
4. Assumptions
5. Workstreams or Phases
6. Timeline or Milestones
7. Dependencies
8. Risks and Mitigations
9. Open Questions
10. Next Actions

For technical plans, also consider:

- Architecture Summary
- Implementation Steps
- Testing and Validation
- Rollout and Rollback
- Observability
- Security and Privacy Considerations

## HTML Style Guidelines

Use the fixed **Standard Plan Theme** below for every generated plan document. Do not adapt the plan document's visual style to the surrounding project, product, brand, app UI, selected design option, or existing site palette. The plan document should look like a neutral execution document, not an extension of the product being planned.

Fixed style rules:

- Palette: page `#f6f8fb`, paper `#ffffff`, text `#111827`, muted text `#4b5563`, border `#d1d5db`, accent `#2563eb`, accent-soft `#eff6ff`, code background `#111827`.
- Layout: centered content, max width `1040px`, page padding `32px 16px 48px`.
- Shape: sections, cards, tables, callouts, and code blocks use `8px` radius.
- Typography: system sans-serif only; body `16px`; line height around `1.65`; one `h1`; `h2` for major sections; `h3` for subsections.
- Header: plain document header only. No hero layout, no preview-as-hero, no gradients, no decorative imagery, no product-style composition.
- Navigation: if used, render as a simple table-of-contents card with text links.
- Sections: white cards with subtle border; use light blue callouts for recommendations or notes.
- Tables: full-width, clear headers, light blue header background, visible row borders.
- Code: dark code blocks with light text; inline code uses light blue background.
- Print: include print-friendly CSS that removes background effects and avoids breaking sections.

Use this CSS as the starting point unless the user explicitly provides another document style:

```css
:root {
  color-scheme: light;
  --page: #f6f8fb;
  --paper: #ffffff;
  --ink: #111827;
  --muted: #4b5563;
  --line: #d1d5db;
  --accent: #2563eb;
  --accent-soft: #eff6ff;
  --code-bg: #111827;
  --code-ink: #f9fafb;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;