Build or maintain a static website using $ARGUMENTS. Apply all rules below strictly.
Hard Constraints
- No JavaScript — no
<script> tags, no inline event handlers, no .js files
- No external dependencies — no frameworks, libraries, CDNs, or package managers
- No build systems — no transpilation, bundling, preprocessing, Sass, Less, or Tailwind
- No inline styles — all CSS in separate
.css files
- Baseline 2025 — only use CSS features widely available across modern browsers
HTML Rules
- Semantic elements over generic
<div>/<span> — use <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>, <figure>, <time>, <address>
- One
<main> per page
- Proper heading hierarchy (h1 → h2 → h3, no skipping)
lang attribute on <html>alt on all images (empty alt="" for decorative)aria-label on <nav> when multiple navs exist<label> associated with every form input- Skip link for keyboard users
- Use
<a> for navigation, not buttons
- Use
<br> only for line breaks in content, never for spacing
CSS Rules
- Use CSS custom properties for theming (
--color-primary, --spacing-unit, etc.)
- Use logical properties (
margin-block, padding-inline, inline-size, block-size)
- Mobile-first responsive design with
min-width breakpoints
- Use modern features: CSS nesting, container queries, cascade layers, subgrid,
oklch() colors
- Use
clamp() for fluid typography
- Prefer
gap over margins for spacing in flex/grid layouts
- Include
prefers-reduced-motion: reduce and prefers-color-scheme: dark media queries
- Use
content-visibility: auto for off-screen sections
- WCAG AA color contrast minimum (4.5:1)
- Always maintain visible
:focus-visible indicators
CSS Reset Baseline
Every project starts with:
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, -apple-system, sans-serif; line-height: 1.5; }
Interactive Patterns (CSS-Only)
When interactivity is needed, use these approaches — never JavaScript:
- Accordion:
<details>/<summary>
- Modal:
:target pseudo-class with anchor links
- Tabs: hidden radio buttons with
:checked + sibling selectors
- Dropdown menu:
:hover + :focus-within
- Mobile hamburger: hidden checkbox with
:checked + sibling selectors
- Form styling:
appearance: none to customize native controls
Performance
loading="lazy" on below-fold images<picture> with WebP sources for responsive images- Preload critical CSS and fonts
contain: layout style paint on repeated components
Project Structure
project/
├── index.html
├── css/
│ └── style.css
├── images/
├── fonts/
└── icons/
For small sites, a flat structure (HTML + single style.css + images/) is acceptable.
What NOT to Do
- Do not use tables for layout
- Do not use
<br> for spacing
- Do not use non-semantic
<div> when a semantic element exists
- Do not use
onclick or any inline event handlers
- Do not add JavaScript for interactions achievable with CSS
- Do not use CSS frameworks or preprocessors
Converted and distributed by TomeVault — claim your Tome and manage your conversions.
1---2name: web-static3description: Build modern static websites using semantic HTML and CSS without external dependencies or build systems Use when this capability is needed.4---56Build or maintain a static website using $ARGUMENTS. Apply all rules below strictly.78## Hard Constraints910- **No JavaScript** — no `<script>` tags, no inline event handlers, no `.js` files11- **No external dependencies** — no frameworks, libraries, CDNs, or package managers12- **No build systems** — no transpilation, bundling, preprocessing, Sass, Less, or Tailwind13- **No inline styles** — all CSS in separate `.css` files14- **Baseline 2025** — only use CSS features widely available across modern browsers1516## HTML Rules1718- Semantic elements over generic `<div>`/`<span>` — use `<header>`, `<nav>`, `<main>`, `<article>`, `<section>`, `<aside>`, `<footer>`, `<figure>`, `<time>`, `<address>`19- One `<main>` per page20- Proper heading hierarchy (h1 → h2 → h3, no skipping)21- `lang` attribute on `<html>`22- `alt` on all images (empty `alt=""` for decorative)23- `aria-label` on `<nav>` when multiple navs exist24- `<label>` associated with every form input25- Skip link for keyboard users26- Use `<a>` for navigation, not buttons27- Use `<br>` only for line breaks in content, never for spacing2829## CSS Rules3031- Use CSS custom properties for theming (`--color-primary`, `--spacing-unit`, etc.)32- Use logical properties (`margin-block`, `padding-inline`, `inline-size`, `block-size`)33- Mobile-first responsive design with `min-width` breakpoints34- Use modern features: CSS nesting, container queries, cascade layers, subgrid, `oklch()` colors35- Use `clamp()` for fluid typography36- Prefer `gap` over margins for spacing in flex/grid layouts37- Include `prefers-reduced-motion: reduce` and `prefers-color-scheme: dark` media queries38- Use `content-visibility: auto` for off-screen sections39- WCAG AA color contrast minimum (4.5:1)40- Always maintain visible `:focus-visible` indicators4142## CSS Reset Baseline4344Every project starts with:4546```css47* { box-sizing: border-box; margin: 0; padding: 0; }48body { font-family: system-ui, -apple-system, sans-serif; line-height: 1.5; }49```5051## Interactive Patterns (CSS-Only)5253When interactivity is needed, use these approaches — never JavaScript:5455- **Accordion**: `<details>`/`<summary>`56- **Modal**: `:target` pseudo-class with anchor links57- **Tabs**: hidden radio buttons with `:checked` + sibling selectors58- **Dropdown menu**: `:hover` + `:focus-within`59- **Mobile hamburger**: hidden checkbox with `:checked` + sibling selectors60- **Form styling**: `appearance: none` to customize native controls6162## Performance6364- `loading="lazy"` on below-fold images65- `<picture>` with WebP sources for responsive images66- Preload critical CSS and fonts67- `contain: layout style paint` on repeated components6869## Project Structure7071```72project/73├── index.html74├── css/75│ └── style.css76├── images/77├── fonts/78└── icons/79```8081For small sites, a flat structure (HTML + single `style.css` + `images/`) is acceptable.8283## What NOT to Do8485- Do not use tables for layout86- Do not use `<br>` for spacing87- Do not use non-semantic `<div>` when a semantic element exists88- Do not use `onclick` or any inline event handlers89- Do not add JavaScript for interactions achievable with CSS90- Do not use CSS frameworks or preprocessors9192---93> Converted and distributed by [TomeVault](https://tomevault.io/claim/adambien) — claim your Tome and manage your conversions.94<!-- tomevault:4.0:skill_md:2026-04-12 -->
tomevault-io