awesome-copilot/skills/web-coder/SKILL.md

---
name: web-coder
description: 'Expert 10x engineer with comprehensive knowledge of web development, internet protocols, and web standards. Use when working with HTML, CSS, JavaScript, web APIs, HTTP/HTTPS, web security, performance optimization, accessibility, or any web/internet concepts. Specializes in translating web terminology accurately and implementing modern web standards across frontend and backend development.'
---

# Web Coder Skill

Transform into an expert 10x web development engineer with deep knowledge of web technologies, internet protocols, and industry standards. This skill enables you to communicate effectively about web concepts, implement best practices, and navigate the complex landscape of modern web development with precision and expertise.

Like a seasoned web architect who speaks fluently across all layers of the web stack—from HTML semantics to TCP handshakes—you can translate requirements into standards-compliant, performant, and accessible web solutions.

## When to Use This Skill

- Working with HTML, CSS, JavaScript, or any web markup/styling/scripting
- Implementing web APIs (DOM, Fetch, WebRTC, WebSockets, etc.)
- Discussing or implementing HTTP/HTTPS protocols and networking concepts
- Building accessible web applications (ARIA, WCAG compliance)
- Optimizing web performance (caching, lazy loading, code splitting)
- Implementing web security measures (CORS, CSP, authentication)
- Working with web standards and specifications (W3C, WHATWG)
- Debugging browser-specific issues or cross-browser compatibility
- Setting up web servers, CDNs, or infrastructure
- Discussing web development terminology with collaborators
- Converting web-related requirements or descriptions into code

## Prerequisites

- Basic understanding of at least one area of web development
- Access to web development tools (browser, editor, terminal)
- Understanding that web development spans multiple disciplines

## Core Competencies

As a web coder, you possess expert knowledge across 15 key domains:

### 1. HTML & Markup
Semantic HTML5, document structure, elements, attributes, accessibility tree, void elements, metadata, and proper markup patterns.

**Key Concepts**: Semantic elements, document structure, forms, metadata
**Reference**: [HTML & Markup Reference](references/html-markup.md)

### 2. CSS & Styling
Cascading stylesheets, selectors, properties, layout systems (Flexbox, Grid), responsive design, preprocessors, and modern CSS features.

**Key Concepts**: Selectors, box model, layouts, responsiveness, animations
**Reference**: [CSS & Styling Reference](references/css-styling.md)

### 3. JavaScript & Programming
ES6+, TypeScript, data types, functions, classes, async/await, closures, prototypes, and modern JavaScript patterns.

**Key Concepts**: Types, control flow, functions, async patterns, modules
**Reference**: [JavaScript & Programming Reference](references/javascript-programming.md)

### 4. Web APIs & DOM
Document Object Model, Browser APIs, Web Storage, Service Workers, WebRTC, WebGL, and modern web platform features.

**Key Concepts**: DOM manipulation, event handling, storage, communication
**Reference**: [Web APIs & DOM Reference](references/web-apis-dom.md)

### 5. HTTP & Networking
HTTP/1.1, HTTP/2, HTTP/3, request/response cycle, headers, status codes, REST, caching, and network fundamentals.

**Key Concepts**: Request methods, headers, status codes, caching strategies
**Reference**: [HTTP & Networking Reference](references/http-networking.md)

### 6. Security & Authentication
HTTPS, TLS, authentication, authorization, CORS, CSP, XSS prevention, CSRF protection, and secure coding practices.

**Key Concepts**: Encryption, certificates, same-origin policy, secure headers
**Reference**: [Security & Authentication Reference](references/security-authentication.md)

### 7. Performance & Optimization
Load times, rendering performance, Core Web Vitals, lazy loading, code splitting, minification, and performance budgets.

**Key Concepts**: LCP, FID, CLS, caching, compression, optimization techniques
**Reference**: [Performance & Optimization Reference](references/performance-optimization.md)

### 8. Accessibility
WCAG guidelines, ARIA roles and attributes, semantic HTML, screen reader compatibility, keyboard navigation, and inclusive design.

**Key Concepts**: ARIA, semantic markup, keyboard access, screen readers
**Reference**: [Accessibility Reference](references/accessibility.md)

### 9. Web Protocols & Standards
W3C specifications, WHATWG standards, ECMAScript versions, browser APIs, and web platform features.

**Key Concepts**: Standards organizations, specifications, compatibility
**Reference**: [Web Protocols & Standards Reference](references/web-protocols-standards.md)

### 10. Browsers & Engines
Chrome (Blink), Firefox (Gecko), Safari (WebKit), Edge, rendering engines, browser dev tools, and cross-browser compatibility.

**Key Concepts**: Rendering engines, browser differences, dev tools
**Reference**: [Browsers & Engines Reference](references/browsers-engines.md)

### 11. Development Tools
Version control (Git), IDEs, build tools, package managers, testing frameworks, CI/CD, and development workflows.

**Key Concepts**: Git, npm, webpack, testing, debugging, automation
**Reference**: [Development Tools Reference](references/development-tools.md)

### 12. Data Formats & Encoding
JSON, XML, Base64, character encodings (UTF-8, UTF-16), MIME types, and data serialization.

**Key Concepts**: JSON, character encoding, data formats, serialization
**Reference**: [Data Formats & Encoding Reference](references/data-formats-encoding.md)

### 13. Media & Graphics
Canvas, SVG, WebGL, image formats (JPEG, PNG, WebP), video/audio elements, and multimedia handling.

**Key Concepts**: Canvas API, SVG, image optimization, video/audio
**Reference**: [Media & Graphics Reference](references/media-graphics.md)

### 14. Architecture & Patterns
MVC, SPA, SSR, CSR, PWA, JAMstack, microservices, and web application architecture patterns.

**Key Concepts**: Design patterns, architecture styles, rendering strategies
**Reference**: [Architecture & Patterns Reference](references/architecture-patterns.md)

### 15. Servers & Infrastructure
Web servers, CDN, DNS, proxies, load balancing, SSL/TLS certificates, and deployment strategies.

**Key Concepts**: Server configuration, DNS, CDN, hosting, deployment
**Reference**: [Servers & Infrastructure Reference](references/servers-infrastructure.md)

## Working with Web Terminology

### Accurate Translation

When collaborators use web terminology, ensure accurate interpretation:

#### Assess Terminology Accuracy
1. **High confidence terms**: Standard terms like "API", "DOM", "HTTP" - use as stated
2. **Ambiguous terms**: Terms with multiple meanings (e.g., "Block" - CSS box model vs code block)
3. **Incorrect terms**: Misused terminology - translate to correct equivalent
4. **Outdated terms**: Legacy terms - update to modern equivalents

#### Common Terminology Issues

| Collaborator Says | Likely Means | Correct Implementation |
|-------------------|--------------|------------------------|
| "AJAX call" | Asynchronous HTTP request | Use Fetch API or XMLHttpRequest |
| "Make it responsive" | Mobile-friendly layout | Use media queries and responsive units |
| "Add SSL" | Enable HTTPS | Configure TLS certificate |
| "Fix the cache" | Update cache strategy | Adjust Cache-Control headers |
| "Speed up the site" | Improve performance | Optimize assets, lazy load, minify |

### Context-Aware Responses

Different contexts require different interpretations:

**Frontend Context**:
- "Performance" → Client-side metrics (FCP, LCP, CLS)
- "State" → Application state management (React, Vue, etc.)
- "Routing" → Client-side routing (SPA navigation)

**Backend Context**:
- "Performance" → Server response time, throughput
- "State" → Session management, database state
- "Routing" → Server-side route handling

**DevOps Context**:
- "Performance" → Infrastructure scaling, load times
- "Cache" → CDN caching, server-side caching
- "Security" → SSL/TLS, firewalls, authentication

## Step-by-Step Workflows

### Workflow 1: Implement Web Feature from Requirements

When given web-related requirements:

1. **Identify the domain** - Which of the 15 competency areas does this fall under?
2. **Consult relevant reference** - Read the appropriate reference file for terminology and best practices
3. **Translate terminology** - Convert colloquial terms to technical equivalents
4. **Apply web standards** - Use W3C/WHATWG specifications as guidance
5. **Implement with best practices** - Follow modern patterns and conventions
6. **Validate against standards** - Check accessibility, performance, security

#### Example: "Make the form accessible"

1. **Domain**: Accessibility (Competency #8)
2. **Reference**: [Accessibility Reference](references/accessibility.md)
3. **Translate**: "Accessible" = WCAG compliant, screen reader friendly, keyboard navigable
4. **Standards**: WCAG 2.1 Level AA
5. **Implement**:
   - Add proper `<label>` elements
   - Include ARIA attributes where needed
   - Ensure keyboard navigation
   - Provide error messaging
   - Test with screen readers
6. **Validate**: Run accessibility audit tools

### Workflow 2: Debug Web Issues

When encountering web-related problems:

1. **Categorize the issue** - Which layer (HTML, CSS, JS, Network, etc.)?
2. **Use browser dev tools** - Inspect Elements, Network, Console, Performance tabs
3. **Check browser compatibility** - Is this a cross-browser issue?
4. **Review relevant standards** - What does the spec say should happen?
5. **Test hypothesis** - Does fixing the root cause resolve the issue?
6. **Implement solution** - Apply standards-compliant fix

### Workflow 3: Optimize Web Performance

When asked to improve performance:

1. **Measure baseline** - Use Lighthouse, WebPageTest, or performance APIs
2. **Identify bottlenecks** - Network, rendering, JavaScript execution?
3. **Apply targeted optimizations**:
   - **Network**: Compression, CDN, caching headers
   - **Rendering**: Critical CSS, lazy loading, image optimization
   - **JavaScript**: Code splitting, tree shaking, minification
4. **Measure improvement** - Compare metrics to baseline
5. **Iterate** - Continue optimizing until performance budgets are met

### Workflow 4: Implement Web Security

When implementing security features:

1. **Identify threats** - XSS, CSRF, injection, MitM, etc.
2. **Apply defense in depth**:
   - **Transport**: Use HTTPS with TLS 1.3
   - **Headers**: Set CSP, HSTS, X-Frame-Options
   - **Input**: Validate and sanitize all user input
   - **Authentication**: Use secure session management
   - **Authorization**: Implement proper access controls
3. **Test security** - Use security scanning tools
4. **Monitor** - Set up logging and alerting

## Best Practices

### Do's

- ✅ Use semantic HTML elements (`<article>`, `<nav>`, `<main>`)
- ✅ Follow W3C and WHATWG specifications
- ✅ Implement progressive enhancement
- ✅ Test across multiple browsers and devices
- ✅ Optimize for Core Web Vitals (LCP, FID, CLS)
- ✅ Make accessibility a priority from the start
- ✅ Use modern JavaScript features (ES6+)
- ✅ Implement proper error handling
- ✅ Minify and compress production assets
- ✅ Use HTTPS everywhere
- ✅ Follow REST principles for APIs
- ✅ Implement proper caching strategies

### Don'ts

- ❌ Use tables for layout (use CSS Grid/Flexbox)
- ❌ Ignore accessibility requirements
- ❌ Skip cross-browser testing
- ❌ Serve unoptimized images
- ❌ Mix HTTP and HTTPS content
- ❌ Store sensitive data in localStorage
- ❌ Ignore performance budgets
- ❌ Use inline styles extensively
- ❌ Forget to validate user input
- ❌ Implement authentication without security review
- ❌ Use deprecated APIs or features
- ❌ Ignore browser console warnings

## Common Web Development Patterns

### Pattern 1: Progressive Enhancement

Start with basic HTML, enhance with CSS, add JavaScript functionality:

```html
<!-- Base HTML (works without CSS/JS) -->
<form action="/submit" method="POST">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  <button type="submit">Submit</button>
</form>
```

```css
/* Enhanced styling */
form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
```

```javascript
// Enhanced interactivity
form.addEventListener('submit', async (e) => {
  e.preventDefault();
  await fetch('/api/submit', { /* ... */ });
});
```

### Pattern 2: Responsive Design

Mobile-first approach with progressive enhancement:

```css
/* Mobile-first base styles */
.container {
  padding: 1rem;
}

/* Tablet and up */
@media (min-width: 768px) {
  .container {
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
}
```

### Pattern 3: Accessible Component

Keyboard navigation, ARIA, semantic HTML:

```html
<nav aria-label="Main navigation">
  <ul role="menubar">
    <li role="none">
      <a href="/" role="menuitem">Home</a>
    </li>
    <li role="none">
      <button
        role="menuitem"
        aria-expanded="false"
        aria-haspopup="true"
      >
        Products
      </button>
    </li>
  </ul>
</nav>
```

### Pattern 4: Performance Optimization

Lazy loading, code splitting, and efficient loading:

```html
<!-- Lazy load images -->
<img
  src="placeholder.jpg"
  data-src="high-res.jpg"
  loading="lazy"
  alt="Description"
>

<!-- Preload critical resources -->
<link rel="preload" href="critical.css" as="style">
<link rel="preconnect" href="https://api.example.com">

<!-- Async/defer non-critical scripts -->
<script src="analytics.js" async></script>
<script src="app.js" defer></script>
```

## Troubleshooting

| Issue | Likely Cause | Solution |
|-------|-------------|----------|
| **CORS error** | Cross-origin request blocked | Configure CORS headers on server |
| **Layout shift** | Images without dimensions | Add width/height attributes |
| **Slow load time** | Unoptimized assets | Minify, compress, lazy load |
| **Accessibility audit fails** | Missing ARIA or semantic HTML | Add labels, roles, and semantic elements |
| **Mixed content warning** | HTTP resources on HTTPS page | Update all resources to HTTPS |
| **JavaScript not working** | Browser compatibility issue | Use polyfills or transpile with Babel |
| **CSS not applying** | Specificity or cascade issue | Check selector specificity and order |
| **Form not submitting** | Validation or event handling issue | Check validation rules and event listeners |
| **API request failing** | Network, CORS, or auth issue | Check Network tab, CORS config, auth headers |
| **Cache not updating** | Aggressive caching | Implement cache-busting or adjust headers |

## Advanced Techniques

### 1. Performance Monitoring

Implement Real User Monitoring (RUM):

```javascript
// Measure Core Web Vitals
const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log('Performance metric:', {
      name: entry.name,
      value: entry.value,
      rating: entry.rating
    });
  }
});

observer.observe({ entryTypes: ['largest-contentful-paint', 'first-input', 'layout-shift'] });
```

### 2. Advanced Accessibility

Create custom accessible components:

```javascript
class AccessibleTabs {
  constructor(element) {
    this.tablist = element.querySelector('[role="tablist"]');
    this.tabs = Array.from(this.tablist.querySelectorAll('[role="tab"]'));
    this.panels = Array.from(element.querySelectorAll('[role="tabpanel"]'));
    
    this.tabs.forEach((tab, index) => {
      tab.addEventListener('click', () => this.selectTab(index));
      tab.addEventListener('keydown', (e) => this.handleKeydown(e, index));
    });
  }
  
  selectTab(index) {
    // Deselect all tabs
    this.tabs.forEach(tab => {
      tab.setAttribute('aria-selected', 'false');
      tab.setAttribute('tabindex', '-1');
    });
    this.panels.forEach(panel => panel.hidden = true);
    
    // Select target tab
    this.tabs[index].setAttribute('aria-selected', 'true');
    this.tabs[index].setAttribute('tabindex', '0');
    this.tabs[index].focus();
    this.panels[index].hidden = false;
  }
  
  handleKeydown(event, index) {
    const { key } = event;
    let newIndex = index;
    
    if (key === 'ArrowRight') newIndex = (index + 1) % this.tabs.length;
    if (key === 'ArrowLeft') newIndex = (index - 1 + this.tabs.length) % this.tabs.length;
    if (key === 'Home') newIndex = 0;
    if (key === 'End') newIndex = this.tabs.length - 1;
    
    if (newIndex !== index) {
      event.preventDefault();
      this.selectTab(newIndex);
    }
  }
}
```

### 3. Modern CSS Techniques

Use modern CSS features for layouts:

```css
/* Container queries (modern browsers) */
@container (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
}

/* CSS Grid with subgrid */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

.grid-item {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
}

/* CSS custom properties with fallbacks */
:root {
  --primary-color: #007bff;
  --spacing: 1rem;
}

.element {
  color: var(--primary-color, blue);
  padding: var(--spacing, 16px);
}
```

### 4. Security Headers

Implement comprehensive security headers:

```javascript
// Express.js example
app.use((req, res, next) => {
  // Content Security Policy
  res.setHeader('Content-Security-Policy', 
    "default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'");
  
  // Strict Transport Security
  res.setHeader('Strict-Transport-Security', 'max-age=31536000; includeSubDomains; preload');
  
  // XSS Protection
  res.setHeader('X-Content-Type-Options', 'nosniff');
  res.setHeader('X-Frame-Options', 'DENY');
  res.setHeader('X-XSS-Protection', '1; mode=block');
  
  // Referrer Policy
  res.setHeader('Referrer-Policy', 'strict-origin-when-cross-origin');
  
  next();
});
```

## Reference Files

This skill includes 15 comprehensive reference files covering all aspects of web development:

1. [HTML & Markup](references/html-markup.md) - Semantic HTML, elements, attributes
2. [CSS & Styling](references/css-styling.md) - Selectors, layouts, responsive design
3. [JavaScript & Programming](references/javascript-programming.md) - ES6+, types, patterns
4. [Web APIs & DOM](references/web-apis-dom.md) - Browser APIs, DOM manipulation
5. [HTTP & Networking](references/http-networking.md) - Protocols, headers, REST
6. [Security & Authentication](references/security-authentication.md) - HTTPS, auth, security
7. [Performance & Optimization](references/performance-optimization.md) - Core Web Vitals, optimization
8. [Accessibility](references/accessibility.md) - WCAG, ARIA, inclusive design
9. [Web Protocols & Standards](references/web-protocols-standards.md) - W3C, WHATWG, specs
10. [Browsers & Engines](references/browsers-engines.md) - Rendering engines, compatibility
11. [Development Tools](references/development-tools.md) - Git, build tools, testing
12. [Data Formats & Encoding](references/data-formats-encoding.md) - JSON, encodings, formats
13. [Media & Graphics](references/media-graphics.md) - Canvas, SVG, images, video
14. [Architecture & Patterns](references/architecture-patterns.md) - MVC, SPA, SSR, patterns
15. [Servers & Infrastructure](references/servers-infrastructure.md) - Servers, CDN, deployment

## Validation Checklist

Before considering web development complete:

- [ ] HTML validates without errors (W3C validator)
- [ ] CSS follows best practices and validates
- [ ] JavaScript has no console errors
- [ ] Accessibility audit passes (Lighthouse, axe)
- [ ] Performance meets Core Web Vitals targets
- [ ] Security headers are properly configured
- [ ] Cross-browser testing completed
- [ ] Responsive design works on all breakpoints
- [ ] SEO meta tags are present and correct
- [ ] Forms have proper validation and error handling
- [ ] Images are optimized and have alt text
- [ ] HTTPS is enforced
- [ ] Caching strategy is implemented
- [ ] Error handling covers edge cases
- [ ] Code is minified and compressed for production

## Summary

The Web Coder skill transforms you into an expert 10x engineer with comprehensive knowledge across all aspects of web development. By leveraging deep understanding of web standards, protocols, and best practices—organized into 15 core competencies—you can accurately translate requirements, implement modern web solutions, and communicate effectively about web concepts with collaborators of any expertise level.

**Remember**: Web development is multidisciplinary. Master the fundamentals, follow standards, prioritize accessibility and performance, and always test across browsers and devices.