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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Working with Web Terminology

Accurate Translation

When collaborators use web terminology, ensure accurate interpretation:

Assess Terminology Accuracy

High confidence terms

Standard terms like "API", "DOM", "HTTP" - use as stated

Ambiguous terms

Terms with multiple meanings (e.g., "Block" - CSS box model vs code block)

Incorrect terms

Misused terminology - translate to correct equivalent

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:

Identify the domain

- Which of the 15 competency areas does this fall under?

Consult relevant reference

- Read the appropriate reference file for terminology and best practices

Translate terminology

- Convert colloquial terms to technical equivalents

Apply web standards

- Use W3C/WHATWG specifications as guidance

Implement with best practices

- Follow modern patterns and conventions

Validate against standards

- Check accessibility, performance, security

Example: "Make the form accessible"

Domain

Accessibility (Competency #8)

Reference

:

Accessibility Reference

Translate

"Accessible" = WCAG compliant, screen reader friendly, keyboard navigable

Standards

WCAG 2.1 Level AA

Implement

:

Add proper

elements

Include ARIA attributes where needed

Ensure keyboard navigation

Provide error messaging

Test with screen readers

Validate

Run accessibility audit tools

Workflow 2: Debug Web Issues

When encountering web-related problems:

Categorize the issue

- Which layer (HTML, CSS, JS, Network, etc.)?

Use browser dev tools

- Inspect Elements, Network, Console, Performance tabs

Check browser compatibility

- Is this a cross-browser issue?

Review relevant standards

- What does the spec say should happen?

Test hypothesis

- Does fixing the root cause resolve the issue?

Implement solution

- Apply standards-compliant fix

Workflow 3: Optimize Web Performance

When asked to improve performance:

Measure baseline

- Use Lighthouse, WebPageTest, or performance APIs

Identify bottlenecks

- Network, rendering, JavaScript execution?

Apply targeted optimizations

:

Network

Compression, CDN, caching headers

Rendering

Critical CSS, lazy loading, image optimization

JavaScript

Code splitting, tree shaking, minification

Measure improvement

- Compare metrics to baseline

Iterate

- Continue optimizing until performance budgets are met

Workflow 4: Implement Web Security

When implementing security features:

Identify threats

- XSS, CSRF, injection, MitM, etc.

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 Test security - Use security scanning tools Monitor - Set up logging and alerting Best Practices Do's ✅ Use semantic HTML elements (

) ✅ 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: < form action = " /submit " method = " POST " > < label for = " email " > Email: < input type = " email " id = " email " name = " email " required > < button type = " submit " > Submit /* Enhanced styling */ form { display : flex ; flex-direction : column ; gap : 1 rem ; } // Enhanced interactivity form . addEventListener ( 'submit' , async ( e ) => { e . preventDefault ( ) ; await fetch ( '/api/submit' , { /* ... */ } ) ; } ) ; Pattern 2: Responsive Design Mobile-first approach with progressive enhancement: /* Mobile-first base styles */ .container { padding : 1 rem ; } /* Tablet and up */ @media ( min-width : 768 px ) { .container { padding : 2 rem ; max-width : 1200 px ; margin : 0 auto ; } } /* Desktop */ @media ( min-width : 1024 px ) { .container { display : grid ; grid-template-columns : repeat ( 3 , 1 fr ) ; gap : 2 rem ; } } Pattern 3: Accessible Component Keyboard navigation, ARIA, semantic HTML: < nav aria-label = " Main navigation " > < ul role = " menubar " > < li role = " none " > < a href = " / " role = " menuitem " > Home < li role = " none " > < button role = " menuitem " aria-expanded = " false " aria-haspopup = " true " > Products Pattern 4: Performance Optimization Lazy loading, code splitting, and efficient loading: < img src = " placeholder.jpg " data-src = " high-res.jpg " loading = " lazy " alt = " Description " > < link rel = " preload " href = " critical.css " as = " style " > < link rel = " preconnect " href = " https://api.example.com " > < script src = " analytics.js " async > < script src = " app.js " defer > 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): // 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: 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: /* Container queries (modern browsers) */ @container ( min-width : 400 px ) { .card { display : grid ; grid-template-columns : 1 fr 2 fr ; } } /* CSS Grid with subgrid */ .grid { display : grid ; grid-template-columns : repeat ( auto-fit , minmax ( 250 px , 1 fr ) ) ; gap : 2 rem ; } .grid-item { display : grid ; grid-template-rows : subgrid ; grid-row : span 3 ; } /* CSS custom properties with fallbacks */ :root { --primary-color : #007bff ; --spacing : 1 rem ; } .element { color : var ( --primary-color , blue ) ; padding : var ( --spacing , 16 px ) ; } 4. Security Headers Implement comprehensive security headers: // 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: HTML & Markup - Semantic HTML, elements, attributes CSS & Styling - Selectors, layouts, responsive design JavaScript & Programming - ES6+, types, patterns Web APIs & DOM - Browser APIs, DOM manipulation HTTP & Networking - Protocols, headers, REST Security & Authentication - HTTPS, auth, security Performance & Optimization - Core Web Vitals, optimization Accessibility - WCAG, ARIA, inclusive design Web Protocols & Standards - W3C, WHATWG, specs Browsers & Engines - Rendering engines, compatibility Development Tools - Git, build tools, testing Data Formats & Encoding - JSON, encodings, formats Media & Graphics - Canvas, SVG, images, video Architecture & Patterns - MVC, SPA, SSR, patterns Servers & Infrastructure - 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.

← 返回排行榜

web-coder

安装