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. Review markup and CSS for Chrome, Firefox, and Safari support
2. Review layout at 375px, 768px, and 1024px breakpoints
3. Run browser, Lighthouse, or screenshot checks only when the user asks

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();
  }
});

DOM Ready

// Modern approach
document.addEventListener("DOMContentLoaded", () => {
  initApp();
});

// Or: script at end of body (no event needed)

Class Toggling

// Toggle visibility
element.classList.toggle("visible");

// Add/remove
element.classList.add("active");
element.classList.remove("active");

Automation (GitHub Actions)

Simple Deploy Workflow

# .github/workflows/deploy.yml
name: Deploy
on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./

Image Optimization

# Optimize before committing
# PNG
pngquant --quality=65-80 image.png

# JPEG
jpegoptim --max=80 image.jpg

# WebP conversion
cwebp -q 80 image.png -o image.webp

Feature Checklist

Before Starting:

• Read CLAUDE.md for project constraints
• Check existing patterns to reuse
• Understand performance budget

During Development:

• One change at a time
• Test in multiple browsers
• Test responsiveness
• Keep page weight in budget

Before Completion:

• Lighthouse 95+ Performance
• All breakpoints tested
• Screenshots for comparison
• Documentation updated

Performance Targets

Metric	Target
Total weight	< 50KB
First Contentful Paint	< 1s
Lighthouse Performance	95+

See Also

• Generic Feature Developer - Workflow, decisions
• Code Review Standards - Quality requirements
• Design Patterns - UI patterns