Expert Next.js and TypeScript frontend engineer. Use when building React components with Next.js, implementing TypeScript type safety, styling with Tailwind CSS, and managing frontend state and APIs.
Master Next.js with TypeScript and Tailwind CSS to build modern, type-safe React applications. This skill enables you to create scalable frontends with strong typing, responsive design through Tailwind utilities, and seamless API integration.
Like a seasoned Next.js architect who combines React patterns, TypeScript type safety, and Tailwind's utility-first styling to deliver production-ready components.
As a web coder, you possess expert knowledge across 15 key domains:
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
Utility-first CSS with Tailwind CSS, responsive design, dark mode, custom extensions, and component composition patterns.
Key Concepts: Utility classes, responsive prefixes, dark mode, state variants Reference: CSS & Styling Reference
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
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
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
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
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
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
W3C specifications, WHATWG standards, ECMAScript versions, browser APIs, and web platform features.
Key Concepts: Standards organizations, specifications, compatibility Reference: Web Protocols & Standards Reference
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
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
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
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
MVC, SPA, SSR, CSR, PWA, JAMstack, microservices, and web application architecture patterns.
Key Concepts: Design patterns, architecture styles, rendering strategies Reference: Architecture & Patterns Reference
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
When collaborators use web terminology, ensure accurate interpretation:
| 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 |
Different contexts require different interpretations:
Frontend Context:
Backend Context:
DevOps Context:
When given web-related requirements:
<label> elementsWhen encountering web-related problems:
When asked to improve performance:
When implementing security features:
<article>, <nav>, <main>)Start with semantic HTML, enhance with Tailwind styling, add JavaScript functionality:
// React component with Tailwind
export function ContactForm() {
return (
<form onSubmit={handleSubmit} className="flex flex-col gap-4">
<label htmlFor="email" className="text-sm font-medium">
Email:
</label>
<input
type="email"
id="email"
name="email"
required
className="rounded border border-gray-300 px-3 py-2 focus:border-blue-500 focus:outline-none"
/>
<button
type="submit"
className="rounded bg-blue-600 px-4 py-2 text-white hover:bg-blue-700"
>
Submit
</button>
</form>
);
}
Mobile-first Tailwind approach with responsive prefixes:
export function ResponsiveGrid() {
return (
<div className="p-4 md:p-8 md:max-w-4xl md:mx-auto lg:grid lg:grid-cols-3 lg:gap-8">
<article className="mb-4 rounded-lg bg-white p-4 shadow md:mb-0">
<h2 className="mb-2 text-lg font-bold">Card 1</h2>
<p>Content here</p>
</article>
<article className="mb-4 rounded-lg bg-white p-4 shadow md:mb-0">
<h2 className="mb-2 text-lg font-bold">Card 2</h2>
<p>Content here</p>
</article>
<article className="rounded-lg bg-white p-4 shadow">
<h2 className="mb-2 text-lg font-bold">Card 3</h2>
<p>Content here</p>
</article>
</div>
);
}
Keyboard navigation, ARIA, semantic 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>
Lazy loading, code splitting, and efficient loading:
<!-- 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>
| 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 |
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'] });
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);
}
}
}
Use Tailwind's powerful features for responsive, theme-aware styling:
// Tailwind configuration for custom utilities
// tailwind.config.js
export default {
theme: {
extend: {
colors: {
brand: '#007bff',
},
},
},
};
// Component with dark mode and state variants
export function ModernCard() {
return (
<div className="rounded-lg bg-white p-6 shadow dark:bg-slate-900 dark:shadow-lg">
<h3 className="mb-4 text-xl font-bold text-gray-900 dark:text-white">
Card Title
</h3>
<p className="mb-4 text-gray-600 dark:text-gray-300">
Responsive card with dark mode support.
</p>
<button className="rounded bg-brand px-4 py-2 text-white hover:opacity-90 active:scale-95 dark:bg-brand dark:hover:opacity-80">
Action
</button>
</div>
);
}
// Grid with responsive columns
export function ResponsiveGrid() {
return (
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
{/* grid items */}
</div>
);
}
// Flexbox layout with Tailwind
export function FlexLayout() {
return (
<div className="flex flex-col items-center justify-between gap-4 md:flex-row">
{/* flex items */}
</div>
);
}
Implement comprehensive security headers:
// Express.js example
app.use((req, res, next) => {
// Content Security Policy (no unsafe-inline)
res.setHeader('Content-Security-Policy',
"default-src 'self'; script-src 'self' https://trusted-cdn.com; style-src 'self' https://trusted-cdn.com; img-src 'self' data: https:");
// 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();
});
This skill includes 15 comprehensive reference files covering all aspects of web development:
Before considering web development complete:
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.