mcpField
V
vanilla-web

vanilla-web

github.com/janjaszczakDevelopment0669 installsUpdated 5w ago
Repository

About vanilla-web

vanilla-web is a skill for building or refactoring interfaces with plain HTML, CSS, and JavaScript. It guides modular ESM code, accessible markup, runnable files, and local verification without a framework.

Key features

  1. 01Use HTML, CSS, and JavaScript only
  2. 02Organize JavaScript as ESM modules
  3. 03Prefer small functions and limited state
  4. 04Apply semantic and keyboard-accessible markup
  5. 05Provide runnable files and verification steps

Use cases

  1. 01Build a static page without a framework
  2. 02Create DOM-based UI components
  3. 03Remove framework dependencies
  4. 04Check a change locally and in DevTools

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/janjaszczak/cursor --skill vanilla-web

After installing, type/vanilla-webin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

references/
checklist.md
patterns.md
scripts/
serve.sh

Details

From the project README

Vanilla Web (HTML/CSS/JS)

Baseline constraints (from the rule)

Use these as non-negotiables:

  • "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

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

  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

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

Comments

Markdown supported