---
name: web-builder
description: "Build and optimize websites with Astro, React, HTML/CSS/JS. Landing pages, components, responsive design, SEO, performance, accessibility."
version: 1.0.0
category: dev
tags: [web, astro, react, tailwind, html, css, responsive, seo, landing-page]
tier: free
---

# Web Builder

Build production-ready websites with modern frameworks and best practices.

## When to trigger
- User says "build a website", "create a landing page", "make a web page"
- Working with Astro, React, HTML/CSS, or Tailwind projects
- Requests for responsive design, components, or page layouts
- Web performance or accessibility improvements

## Instructions

### Step 1: Identify Project Type
Determine the framework and setup:

| Framework | Build | Dev Server | Deploy |
|-----------|-------|------------|--------|
| Astro | `npm run build` | `npm run dev` | Cloudflare Pages / Vercel |
| React (Vite) | `npm run build` | `npm run dev` | Vercel / Netlify |
| Static HTML | N/A | Live Server | Any CDN |
| Next.js | `npm run build` | `npm run dev` | Vercel |

### Step 2: Page Structure
Every page needs these elements:

```html
<!-- Meta essentials -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Concise 150-160 char description">
<title>Page Title — Brand (max 60 chars)</title>

<!-- Open Graph -->
<meta property="og:title" content="Title">
<meta property="og:description" content="Description">
<meta property="og:image" content="/og-image.png">
<meta property="og:type" content="website">

<!-- Performance -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
```

### Step 3: Responsive Design with Tailwind

**Breakpoints** (mobile-first):
```
sm: 640px   → Small tablets
md: 768px   → Tablets
lg: 1024px  → Laptops
xl: 1280px  → Desktops
2xl: 1536px → Large screens
```

**Common patterns**:
```jsx
// Responsive grid
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

// Responsive text
<h1 className="text-2xl md:text-4xl lg:text-5xl font-bold">

// Responsive padding
<section className="px-4 md:px-8 lg:px-16 py-12 md:py-20">

// Hide/show by breakpoint
<nav className="hidden md:flex">     // Desktop nav
<button className="md:hidden">       // Mobile menu button
```

### Step 4: Astro-Specific Patterns

**Component Islands** (interactive React in static Astro):
```astro
---
import MyComponent from ../components/MyComponent;
---
<!-- Static by default -->
<MyComponent />

<!-- Interactive on load -->
<MyComponent client:load />

<!-- Interactive on visible -->
<MyComponent client:visible />

<!-- Interactive only in browser (no SSR) -->
<MyComponent client:only="react" />
```

**Layouts**:
```astro
---
// src/layouts/Layout.astro
const { title, description } = Astro.props;
---
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content={description}>
  <title>{title}</title>
</head>
<body>
  <slot />
</body>
</html>
```

### Step 5: Component Best Practices

**React components** (for interactive elements):
```tsx
interface CardProps {
  title: string;
  description: string;
  href?: string;
}

export function Card({ title, description, href }: CardProps) {
  return (
    <a href={href} className="block p-6 rounded-xl border border-zinc-800 
      hover:border-indigo-500/50 transition-all duration-300
      bg-zinc-900/50 backdrop-blur-sm">
      <h3 className="text-lg font-semibold text-white mb-2">{title}</h3>
      <p className="text-sm text-zinc-400">{description}</p>
    </a>
  );
}
```

**Dark mode** (default for dev tools):
```css
/* Base: dark. Light mode = override */
:root {
  --bg: #09090b;
  --text: #fafafa;
  --muted: #a1a1aa;
  --accent: #6366f1;
  --border: #27272a;
}
```

### Step 6: Performance Checklist

- [ ] Images: Use WebP/AVIF, `loading="lazy"`, explicit width/height
- [ ] Fonts: `font-display: swap`, preconnect, subset
- [ ] CSS: Tailwind purges unused styles automatically
- [ ] JS: Code-split, tree-shake, defer non-critical scripts
- [ ] Above the fold: No layout shift (CLS < 0.1)
- [ ] LCP: Largest element loads < 2.5s
- [ ] FID: Interactive < 100ms

### Step 7: Accessibility Checklist

- [ ] Semantic HTML: `<nav>`, `<main>`, `<section>`, `<article>`, `<footer>`
- [ ] Alt text on all images
- [ ] `aria-label` on icon-only buttons
- [ ] Focus styles visible (never `outline: none` without replacement)
- [ ] Color contrast ratio >= 4.5:1 for text
- [ ] Keyboard navigable (Tab, Enter, Escape)
- [ ] Skip to content link

### Step 8: Output
After building, verify:
1. `npm run build` succeeds with zero errors
2. Preview renders correctly on mobile + desktop
3. Lighthouse score: Performance > 90, Accessibility > 90, SEO > 90
4. All links work, images load, interactive elements respond
