generic-static-feature-developer

Files (1)

• SKILL.md

SKILL.md (first lines)

# Static Site Feature Developer

Guide feature development for minimalist static sites.

**Extends:** [Generic Feature Developer](../generic-feature-developer/SKILL.md) - 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

```bash
# 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

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

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

## Vanilla JavaScript Patterns

### Event Delegation

```javascript
// 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

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

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

### Class Toggling

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

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

## Automation (GitHub Actions)

### Simple Deploy Workflow

```yaml
# .github/workflows/deploy.yml

From travisjneuman/.claude, MIT.

More from travisjneuman/.claude