generic-static-feature-developer

Static Site Feature Developer

Guide feature development for minimalist static sites.

Extends: Generic Feature Developer - Read base skill for development workflow, scope assessment, and build vs integrate decisions.

Static Site Architecture

Typical Structure

project/
├── index.html          # Main page
├── style.css           # All styles
├── script.js           # All interactions
├── assets/             # Images, icons
├── .github/workflows/  # Automation (optional)
└── docs/               # Documentation

No Build Tools Philosophy

Edit → Save → Deploy (that's it)

• Pure HTML (no templating engines)
• Pure CSS (no Sass/Less/PostCSS)
• Pure JS (no bundling, no transpilation)
• No node_modules in production

Development Workflow

Local Testing

# Start local server (cross-platform options)
python -m http.server 8000   # Windows
python3 -m http.server 8000  # macOS/Linux
npx serve .                  # Node.js (recommended - all platforms)
# Visit http://localhost:8000

Before Committing

1. Test in Chrome, Firefox, Safari
2. Test at 375px, 768px, 1024px
3. Run Lighthouse audit
4. Screenshot current state (for comparison)

Progressive Enhancement

Philosophy

1. Content first - Works without CSS/JS
2. Enhance with CSS - Better styling for capable browsers
3. Enhance with JS - Interactivity for JS-enabled browsers

Example Pattern

<!-- Works without JS -->
<details>
  <summary>Menu</summary>
  <nav>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </nav>
</details>

// Enhancement: Custom animation when JS available
if ("IntersectionObserver" in window) {
  // Progressive enhancement
}

Vanilla JavaScript Patterns

Event Delegation

// One listener for many elements
document.body.addEventListener("click", (e) => {
  if (e.target.matches(".menu-toggle")) {
    toggleMenu();
  }
  if (e.target.matches(".close-btn")) {
    closeModal();
  }
});