"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
Activate when the user asks for:
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
Deliver
complete runnable
files (no missing imports/paths, no TODO placeholders).
Keep changes
small, testable, and incremental
.
Provide a short
runbook
how to run/verify locally + what to check in DevTools.
Implementation workflow
1) Clarify only what blocks correctness
Ask up to 3 questions
only
if requirements are ambiguous in a way that changes implementation.
Otherwise proceed with explicit assumptions.
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
Use the detailed checklist in:
references/checklist.md
When finishing work, ensure:
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
Keep this SKILL.md lean; store deeper examples and checklists under
references/
.
Do not paste large style guides into SKILL.md—link to repo examples instead.
Suggested companion scripts (optional)
scripts/serve.sh
for quick static serving (manual verification)
See:
scripts/serve.sh