Vanilla Web (HTML/CSS/JS)

Baseline constraints (from the rule)

• "HTML/CSS/JS only (no framework)."
• "Keep JS modular (ESM), split responsibilities (SRP)."
• "Prefer small, focused functions and pure utilities; avoid global state."
• "Ship complete runnable files and minimal tests before marking done."

When to activate this skill

• vanilla JS / plain HTML/CSS/JS / static page
• “no framework”, “no React/Vue/Angular”
• small UI components (modal, tabs, dropdown, form validation) built directly in the DOM
• refactors to remove framework dependencies or reduce JS complexity

Output expectations

1. Deliver complete runnable files (no missing imports/paths, no TODO placeholders).
2. Keep changes small, testable, and incremental.
3. Provide a short runbook: how to run/verify locally + what to check in DevTools.

Implementation workflow

1) Clarify only what blocks correctness

2) Structure & responsibilities

• Prefer this split:

  • index.html

    (semantic markup)

  • styles.css

    (or

    css/…

    )

  • js/main.js

    as an ESM entrypoint +

    js/modules/*.js

    for components/utilities
• SRP: each module does one thing (DOM wiring, state, rendering, API, utilities).
• Avoid global mutable state. If state is needed, encapsulate it in a module and expose minimal functions.

3) HTML guidelines

• Use semantic tags (

  header

  ,

  main

  ,

  nav

  ,

  button

  ,

  dialog

  where applicable).
• Accessibility baseline: keyboard navigation, focus states, ARIA only when needed (don’t ARIA-overuse).

4) CSS guidelines

• Prefer simple, predictable naming (BEM-like optional).
• Use CSS variables for theme primitives.
• Keep layout responsive by default (flex/grid + relative units).

5) JavaScript guidelines (ESM)

• Use

  type="module"

  and explicit imports/exports.
• Prefer pure utilities and small functions.
• Use event delegation for lists/dynamic UIs.
• Handle errors explicitly (network failures, missing DOM nodes, invalid inputs).

Verification checklist

• references/checklist.md

• No console errors/warnings caused by the change
• All referenced assets resolve (paths/imports)
• Feature works with keyboard and without requiring a framework runtime

Progressive disclosure

references/

Suggested companion scripts (optional)

• scripts/serve.sh

  for quick static serving (manual verification)

• scripts/serve.sh