# HTML-First & Modern CSS Web Development Rules
1. Semantic HTML over generic divs:
- Always use <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>, <figure>, <figcaption>, <time>.
- For Modals/Popups: Use <dialog> with .showModal() / .close().
- For Accordions: Use <details> and <summary>.
- For Dropdowns/Tooltips: Use the Popover API (popover, popovertarget).
- For Buttons & Links: Always use <button> for actions and <a href="..."> for navigation. Never add click listeners to <div> or <span>.
2. Modern CSS First:
- Use CSS Grid and Flexbox for all layout needs.
- Use Container Queries (@container) for component-level responsiveness.
- Use relational selectors (:has(), :is(), :where()) for state-based styling.
- Use color-scheme: light dark and light-dark() for theming.
3. Minimal JavaScript & Progressive Enhancement:
- Only add JavaScript when HTML/CSS cannot natively support the requirement.
- When JS is needed, prefer vanilla JavaScript, Web Components (customElements), and native browser APIs (fetch, FormData, IntersectionObserver).
- Do not install heavy front-end frameworks or large UI libraries unless explicitly asked.
4. Accessibility:
- Ensure WCAG AA compliance, keyboard accessibility (Tab/Enter/Space/Esc), skip-links, and high contrast focus indicators (:focus-visible).