⚡ HTML-First WebDev: Semantic HTML & Modern CSS Skill for AI Agents

An AI Agent Skill that instructs coding assistants (Antigravity AGY, OpenAI ChatGPT/Codex, Claude Code, Cursor, Windsurf, GitHub Copilot) to write web applications using Semantic HTML5 and Modern CSS first, eliminating bloated JavaScript frameworks, div-soup, and dependency overload.

---

📦 Installation via npx skills

Install this skill into your project or globally using the universal AI agent skills package manager (npx skills):

1. Install into Current Project

npx skills add Baba01hacker666/realwebdev

2. Install Globally (For All Projects)

npx skills add Baba01hacker666/realwebdev -g

3. Install for Specific Coding Agents

# Antigravity CLI / IDE
npx skills add Baba01hacker666/realwebdev --agent antigravity

# Claude Code
npx skills add Baba01hacker666/realwebdev --agent claude-code

# Cursor / Windsurf
npx skills add Baba01hacker666/realwebdev --agent cursor

# All supported agents
npx skills add Baba01hacker666/realwebdev --all

---

🎯 Core Philosophy: The Rule of Least Power

"Choose the least powerful language suitable for a given purpose." — W3C Principle of Least Power

In web development: HTML > CSS > JavaScript. If a layout, state, accessibility requirement, or interaction can be accomplished using native HTML5 and modern CSS, do not reach for JavaScript or client-side frameworks.

---

🧠 Why Use This Skill with AI Agents?

Default LLMs tend to over-engineer simple websites by immediately generating heavy React/Next.js/Vue apps, injecting multi-megabyte JavaScript bundles, and nesting generic <div> tags with onclick handlers.

This skill instructs AI agents to:

1. Use Semantic Landmarks: Always structure pages with <header>, <nav>, <main>, <article>, <section>, <aside>, and <footer>.
2. Leverage Modern Native HTML5 Elements:
   • <dialog> with .showModal() instead of custom <div> modal overlays.
   • <details> and <summary> for accordions and disclosures (supporting name="..." for exclusive accordions).
   • HTML5 Popover API (popover, popovertarget) for top-layer menus and tooltips without z-index hacks.
   • <form> constraint validation (required, pattern, minlength, type="email|tel|url|date") and :user-invalid CSS.
3. Master Modern CSS:
   • CSS Grid (auto-fit, minmax(), grid-template-areas, subgrid).
   • Container Queries (@container) for component-level modular responsiveness.
   • Relational selector :has() for parent-state styling without JS.
   • Dynamic theming with color-scheme: light dark; and light-dark(#light, #dark).
4. Progressive Enhancement:
   • The web page renders and works with 100% functionality without JavaScript.
   • Vanilla JavaScript and standard Web Components (customElements) are only used as an enhancement layer.

---

📋 Semantic Replacement Matrix

Anti-Pattern (What AI usually writes)	HTML-First Standard (What this skill enforces)	Advantage
<div class="header">	<header>	Semantic screen reader landmark
<div class="navbar">	<nav aria-label="Main">	Keyboard & screen reader navigation landmark
<div class="content">	<main id="main-content">	Identifies primary content, enables skip-links
<div class="footer">	<footer>	Semantic metadata landmark
<div class="card">	<article> or <section>	Meaningful document outline
<div onclick="...">	<button type="button"> or <a href="...">	Keyboard focus, Enter/Space activation, screen-reader role
<div class="modal"> + JS	<dialog>	Native focus trap, Escape dismiss, ::backdrop styling
<div class="accordion"> + JS	<details><summary>Title</summary>...</details>	Native disclosure without 1 line of JS
<div class="dropdown"> + JS	Popover API (popover, popovertarget)	Native top-layer rendering without z-index collisions
<span class="date">	<time datetime="2026-08-30">	Machine-readable temporal semantics

---

🛠️ Multi-Agent Compatibility & Direct Integration

Antigravity (AGY)

Mounted at .agents/skills/html-first-webdev/SKILL.md (or workspace root SKILL.md). Antigravity automatically detects the skill and activates it when web development tasks are requested.

OpenAI ChatGPT / Custom GPTs / Codex

Copy the prompt in prompts/openai-system-prompt.md directly into your Custom GPT instructions or API system prompt.

Claude Projects & Artifacts

Copy the prompt in prompts/claude-system-prompt.md into your Claude Project instructions.

Cursor & Windsurf IDE

Copy prompts/cursorrules.md into .cursorrules in your project root.

---

📁 Repository Structure

.
├── SKILL.md                        # Root agent skill (npx skills standard)
├── .agents/
│   └── skills/
│       └── html-first-webdev/
│           └── SKILL.md            # Antigravity workspace skill
├── skills/
│   └── html-first-webdev/
│       ├── SKILL.md                # Primary skill specification
│       ├── references/
│       │   ├── semantic-html-cheatsheet.md
│       │   ├── css-modern-layout-and-logic.md
│       │   ├── native-form-validation.md
│       │   ├── accessibility-a11y-patterns.md
│       │   └── vanilla-js-progressive-enhancement.md
│       └── examples/
│           ├── full-semantic-page-template.html
│           ├── accessible-dialog-modal.html
│           ├── accordion-details-summary.html
│           ├── popover-menu-tooltip.html
│           └── theme-switcher-light-dark.html
├── templates/
│   └── starter/                    # Scaffolding template
│       ├── index.html
│       ├── styles.css
│       └── app.js
├── prompts/
│   ├── openai-system-prompt.md     # OpenAI Custom GPT prompt
│   ├── claude-system-prompt.md     # Claude Project prompt
│   └── cursorrules.md              # Cursor / Windsurf rules
├── AGENTS.md                       # Universal Agent instruction
├── GEMINI.md                       # Antigravity & Gemini instruction
├── .cursorrules                    # Project cursorrules
├── package.json                    # npm manifest
├── LICENSE                         # MIT License
└── README.md

---

📄 License

MIT © Baba01hacker666