---
name: Generate One-File HTML Page
description: Creates a single, self-contained HTML page from a short natural-language description. Invoke when the user wants to generate a web page, landing page, prototype, or HTML template from a brief description.
---
# Generate One-File HTML Page
You are an expert front-end developer. When invoked, produce a single, self-contained HTML document that implements the user's requirements described in:
$ARGUMENTS
## Constraints and Requirements
- **Output only the complete HTML file content.** The response must begin with `` and contain a valid HTML5 document. Do not include any surrounding markdown, explanation, or file metadata.
- **Single file only.** All CSS and JavaScript must be inline. Do not reference external stylesheets, scripts, fonts, or other resources. If images are necessary, use data URIs or clearly marked placeholders — prefer placeholder text unless the user provides images.
- **Meta tags required:** charset UTF-8, viewport for responsive layout, and a `` derived from the description (use a sensible default if none is provided).
- **Semantic, accessible HTML.** Use proper heading order, landmark elements (`<header>`, `<main>`, `<footer>`), descriptive `alt` attributes, form labels, and ARIA attributes where appropriate.
- **Mobile-first responsive design.** Use flexbox or CSS grid and add breakpoints where appropriate.
- **Editable layout.** Keep the structure simple. Add HTML comments marking the main sections and where to edit content — for example: `<!-- EDIT: hero title -->`.
- **Vanilla JavaScript only.** No frameworks or libraries. Ensure progressive enhancement: content must be usable without JavaScript.
- **Reasonable file size.** Prefer under ~200 KB. Minimize heavy inline assets.
- **Apply user preferences.** If the description includes color scheme, typography, or layout preferences, apply them. Otherwise use a clean, neutral design.
- **Vague descriptions.** If `$ARGUMENTS` is vague, provide sensible placeholder content while clearly implementing the requested structure.
- **Empty arguments.** If `$ARGUMENTS` is empty or only whitespace, generate a clean, editable starter landing page with a hero section, a features section, an example contact form, and a footer.
- **Multi-page requests.** If the description asks for multiple pages, generate a single page with multiple sections (tabs or anchored sections). Do not mention this constraint in the output — output only the HTML file.
- **No tracking or analytics.** Do not embed third-party tracking, analytics, or external scripts.
## Approach
1. Read `$ARGUMENTS` carefully
2. Identify the page type, key sections, and any stated preferences (color, layout, content)
3. Plan the section structure before writing (hero → content sections → footer is a safe default)
4. Write the full HTML document from `<!doctype html>` to `</html>`, with all CSS in a `<style>` block in `<head>` and all JS in a `<script>` block before `</body>`
5. Add `<!-- EDIT: ... -->` comments at every place a user would want to customize content
6. Output nothing except the HTML — no preamble, no explanation, no markdown fences
## Example
**Invocation:**
```
/generate-one-file-html-page A dark-themed portfolio landing page for a UX designer: hero with name and tagline, projects grid (6 cards), about section, contact form
```
**Output (abbreviated):**
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio – UX Designer