devsnips

Template Vanilla Site MIT

HTML5 Boilerplate

A minimal, clean HTML5 starter template aligned with the DevSnips design system. A single self-contained index.html with the doctype, head, and body, plus the core --ds-* design-token foundation (light-default + calm opt-in dark mode via [data-theme="dark"]), a no-flash pre-paint theme script, system-font stack (Inter + JetBrains Mono with fallbacks), box-sizing reset, :focus-visible ring, and a prefers-reduced-motion guard. Intentionally bare so a new page can build on the shared token base from the first line. No framework, no build step, no external dependencies.

  • Vanilla
  • HTML
Preview the site Install the template
Pages
Site
Stack
Vanilla HTML/CSS/JS + HTML
Theme
System
Responsive
Yes
Files
5
License
MIT

Preview

The whole site, live.

Scroll inside the frame, switch viewports, or open the raw preview in a new tab — it is the same file the CLI installs.

5 files
Interactive preview
New tab
devsnips.dev/templates/vanilla/html5-boilerplate/
iPhone 390 × 844
Fluid 320 → 1920
Vanilla/Templates/html5-boilerplate Responsive · System · MIT

What's inside

Everything the folder ships.

Straight from the registry's metadata — every line maps to a file you can open in the source tabs below.

8 features
  • minimal HTML5 document skeleton (doctype, head, body)
  • core --ds-* design-token foundation (semantic + accent tokens, fonts, radii, spacing, motion)
  • light-default theme with calm opt-in dark mode via [data-theme="dark"]
  • no-flash pre-paint theme script (saved preference or system preference)
  • system-font stack (Inter + JetBrains Mono with fallbacks; no external download required to function)
  • box-sizing reset and base body styles on tokens
  • :focus-visible ring for keyboard users
  • prefers-reduced-motion guard

Technical

Stack, scripts, structure.

Everything you need to know before you install.

5 files
Stack
Framework Vanilla HTML/CSS/JS
Language HTML
Theme System
Browsers Chrome, Firefox, Safari, Edge (modern evergreen browsers)
Files 5

root 4

  • AGENTS.md doc
  • metadata.json config
  • preview.html preview
  • README.md doc

pages/ 1

  • index.html code

Install

One command, whole folder.

Pulls the template into your project through the DevSnips CLI. The registry path below is stable across the CLI, MCP server and Skills.

terminal · npm
npx devsnips add Vanilla/Templates/html5-boilerplate
registry path Vanilla/Templates/html5-boilerplate 5 files

AI-ready

Hand the whole job to your agent — Cursor, Cline, Claude Code or Windsurf. One prompt installs the template, fixes the theme toggle, optimises it and reshapes it for what you are building. 

Scaffold the DevSnips template "HTML5 Boilerplate" (Vanilla/Templates/html5-boilerplate) into this project, then audit, fix and tailor it.

1. Install — if the DevSnips MCP server is connected, fetch the resource with get_resource(id="Vanilla/Templates/html5-boilerplate"). Otherwise run npx devsnips add Vanilla/Templates/html5-boilerplate and install the dependencies the template declares.

2. Audit — check the template end to end before changing anything: theme toggling (dark/light), responsive behaviour, accessibility, unused files and assets.

3. Fix — repair what the audit found, starting with the theme toggle: it must persist across reloads, never flash the wrong theme on first paint, and every component must read the same tokens in both modes.

4. Optimise and adapt — trim what the site does not need, then customise the template for the product being built here: replace the placeholder branding, copy, imagery, navigation and routes so it reads as this project rather than as a demo.

Source

Read it before you ship it.

The README, manifest and entry document — verbatim, straight from the registry.

2 files
README.md 
# HTML5 Boilerplate

A minimal, clean HTML5 starter template aligned with the DevSnips design system. Part of the DevSnips Vanilla Templates collection and built on the shared [`design-tokens.md`](../design-tokens.md) `--ds-*` token system.

## What it is

A single self-contained `index.html` with the bare HTML5 document skeleton&mdash;doctype, `<head>`, `<body>`&mdash;plus the core design-token foundation so a new page starts on the shared visual base from the first line.

## What&rsquo;s included

- HTML5 doctype, `<html lang="en">`, viewport + description meta.
- Core `--ds-*` design tokens (semantic background/text/border/action/accent, fonts, radii, spacing, motion).
- Light-default theme with calm opt-in dark mode via `[data-theme="dark"]`.
- No-flash pre-paint theme script (saved preference or system preference).
- System-font stack: Inter + JetBrains Mono, with fallbacks (no external download required to function).
- Box-sizing reset and base body styles on tokens.
- `:focus-visible` ring for keyboard users.
- `prefers-reduced-motion` guard.

## Structure

```
html5-boilerplate/
├── pages/
│   └── index.html   # the starter document
├── preview.html     # iframe wrapper so the preview opens directly
├── metadata.json
└── README.md
```

## Usage

Copy `pages/index.html` and start writing your content where the `<!-- Your content starts here. -->` marker sits. To extend the token set, refer to the full specification in [`design-tokens.md`](../design-tokens.md).

## Dependencies

None. System fonts with fallbacks&mdash;the page is fully functional with no network.
37 lines UTF-8 · LF