# Web Developer

> Build with AI. Ship with confidence. Tools, skills, and quality checks for modern web developers.

Web Developer is a curated resource for engineers using AI coding tools (Cursor, Claude Code, Codex, Aider, etc.). We publish installable SKILL.md files for front-end work and pre-deploy review, profile the agent-era tools worth knowing, and track the news that actually changes how we build.

## News

Daily-ish coverage of AI coding tools, model releases, and developer-platform shifts. Best entry point if you want to know what changed this week.

- [News index](https://webdeveloper.com/news/): Curated web development news, AI tools, and developer commentary.

## Tools

Profiles of editors, agents, design tools, and workflow utilities for the AI-coding era.

- [Tools index](https://webdeveloper.com/tools/): All tools.
- [Claude Code](https://webdeveloper.com/tools/claude-code/): Anthropic's terminal agent with subagents, session forking, and MCP.
- [Codex CLI](https://webdeveloper.com/tools/codex-cli/): OpenAI's sandbox-first terminal coding agent.
- [Cursor](https://webdeveloper.com/tools/cursor/): AI-first code editor for the agent era.
- [Devin Desktop](https://webdeveloper.com/tools/devin-desktop/): Cognition's AI-native IDE with agent command center (formerly Windsurf).
- [GitHub Copilot](https://webdeveloper.com/tools/github-copilot/): AI autocomplete and agent mode for VS Code and JetBrains.
- [OpenCode](https://webdeveloper.com/tools/opencode/): Open-source AI coding agent for the terminal.
- [Aider](https://webdeveloper.com/tools/aider/): Pair-program with LLMs in your terminal, Git-native.
- [Gemini CLI](https://webdeveloper.com/tools/gemini-cli/): Google's free terminal agent with MCP support.
- [Cline](https://webdeveloper.com/tools/cline/): Open-source BYOM agent for VS Code.
- [Conductor](https://webdeveloper.com/tools/conductor/): Run parallel Claude Code & Codex agents on your Mac.
- [gstack](https://webdeveloper.com/tools/gstack/): Claude Code workflow that acts as a virtual dev team.
- [v0](https://webdeveloper.com/tools/v0/): Vercel's AI UI generator with shadcn/ui output.
- [Lovable](https://webdeveloper.com/tools/lovable/): Full-stack vibe coding from prompt to deploy.
- [Bolt](https://webdeveloper.com/tools/bolt/): StackBlitz in-browser full-stack app builder.
- [Replit](https://webdeveloper.com/tools/replit/): Browser IDE with an AI agent that builds and deploys.
- [Stitch](https://webdeveloper.com/tools/stitch/): Turn mockups and prompts into front-end code (Google Labs).
- [CSS.dev](https://webdeveloper.com/tools/css-dev/): CSS intelligence layer for AI coding tools — installable skills for modern CSS.
- [Impeccable](https://webdeveloper.com/tools/impeccable/): Design vocabulary for AI agents with 23 commands, Live Mode, and anti-pattern detection.
- [Spline Omma](https://webdeveloper.com/tools/spline-omma/): AI canvas for interactive 3D, motion, and UI.
- [Chrome DevTools for Agents](https://webdeveloper.com/tools/chrome-devtools-agents/): MCP server for agent-native browser debugging.
- [JetBrains AI](https://webdeveloper.com/tools/jetbrains-ai/): Agentic coding inside IntelliJ, WebStorm, and the JetBrains family.
- [Zed](https://webdeveloper.com/tools/zed/): Rust-native editor with Agent Client Protocol support.
- [Ghostty](https://webdeveloper.com/tools/ghostty/): Fast, GPU-accelerated terminal emulator.

## Front-end Skills

Installable SKILL.md files that teach AI coding tools modern front-end practices.

- [Skills index](https://webdeveloper.com/skills/): All skills.
- [Modern CSS](https://webdeveloper.com/skills/web-developer/frontend-css/): Native nesting, container queries, :has(), scroll-driven animations, oklch colors, logical properties, and CSS layers.
- [Components](https://webdeveloper.com/skills/web-developer/frontend-components/): Semantic HTML, ARIA widget patterns, native dialog and Popover API, heading hierarchy, progressive enhancement, and BEM naming.
- [Performance](https://webdeveloper.com/skills/web-developer/frontend-performance/): Core Web Vitals (LCP, INP, CLS), resource hints, image optimization, font loading, and the Speculation Rules API.
- [Design Tokens](https://webdeveloper.com/skills/web-developer/frontend-design-system/): Two-tier token architecture, spacing and type scales, oklch color system, dark/light theming, motion tokens, and z-index scales.
- [SEO](https://webdeveloper.com/skills/web-developer/frontend-seo/): JSON-LD structured data templates, meta tags, Open Graph, canonical URLs, sitemaps, and mobile-first indexing patterns.
- [Accessibility](https://webdeveloper.com/skills/web-developer/frontend-accessibility/): WCAG 2.2 AA compliance, keyboard navigation, focus management, color contrast, screen reader patterns, and form accessibility.

## MCP Servers

Hand-picked Model Context Protocol servers for web and design developers. Browse by category and install in Cursor, Claude Code, and Codex.

- [MCP directory](https://webdeveloper.com/mcp/): 29 curated servers with internal install pages for Playwright, Chrome DevTools, GitHub, Sentry, Atlassian, Auth0, Sanity, PostHog, Firebase, Railway, Buildkite, Notion, and more. Company GitHub repos only; cross-referenced with registry.modelcontextprotocol.io and claudemarketplaces.com/mcp?official=1.

## Review Skills

Installable SKILL.md files that audit AI-generated code before deploy.

- [Pre-Deploy Review](https://webdeveloper.com/skills/web-developer/review-pre-deploy/): Error handling audit, debug artifact removal, responsive design checks, form validation, loading states, and the full pre-deploy checklist.
- [Security Review](https://webdeveloper.com/skills/web-developer/review-security/): XSS prevention, input sanitization, secret exposure, Content Security Policy, CORS, auth token storage, and CSRF protection.
- [Testing Review](https://webdeveloper.com/skills/web-developer/review-testing/): Behavior-first testing, error and edge case coverage, accessibility contract tests, form validation flows, and mocking guidelines.

## Learn

The umbrella for everything educational on the site: long-form Guides, installable Skills, and copy-paste Prompt Packs. Free, no paywall, no email gate.

- [Learn hub](https://webdeveloper.com/learn/): The umbrella page surfacing Guides, Skills, and Prompt Packs.

## Guides

Long-form, opinionated guides on AI coding for web developers. Some include interactive in-page widgets (calculator, checklist, decision tree) built with vanilla JS — no third-party scripts.

- [Guides index](https://webdeveloper.com/learn/guides/): All guides with category filter.
- [How to Actually Deploy Your Vibe-Coded App](https://webdeveloper.com/learn/guides/deploy-vibe-coded-apps/): Choose a host, lock down secrets, set up a domain, monitor, and roll back. Includes a 12-point interactive deploy-readiness checklist with score and persistence.
- [Stop Burning Tokens](https://webdeveloper.com/learn/guides/optimize-ai-coding-tokens/): Real cost math for AI coding in 2026. Model pricing matrix (Claude Opus 4.7, Sonnet 4.6, GPT-5.3 Codex, GPT-5.5, Gemini 3.1 Pro), caching tactics, compact-vs-fresh decisions, and a live session cost calculator.
- [Cursor for Web Developers](https://webdeveloper.com/learn/guides/master-cursor-web-developer/): The complete Cursor reference — AGENTS.md, model picker, custom modes, rules vs skills, hooks, MCP servers, background and Cloud agents.
- [Running 4 Agents at Once Without Losing Your Mind](https://webdeveloper.com/learn/guides/parallel-coding-agents/): When parallel AI agents pay off and when they hurt. Covers raw git worktrees, Conductor, task routing, and the review discipline that keeps it from turning into chaos.
- [OpenCode from Zero to Production](https://webdeveloper.com/learn/guides/opencode-end-to-end/): Install, configure providers (Anthropic, OpenAI, Google, Ollama local), MCP, and an honest comparison with Claude Code, Codex CLI, and Cursor CLI. Includes a 6-question decision-tree quiz that recommends a CLI based on your workflow.
- [AGENTS.md for Web Projects](https://webdeveloper.com/learn/guides/agents-md-for-web-projects/): What to actually put in AGENTS.md for Next, Astro, SvelteKit, and Remix repos — and what to leave out. Includes a live generator that builds a tailored file from your framework, package manager, styling, test runner, and DB choices.
- [MCP Servers for Web Devs](https://webdeveloper.com/learn/guides/mcp-servers-for-web-devs/): The seven Model Context Protocol servers that earn their keep in a 2026 web-dev stack (Playwright, Postgres, GitHub, Linear, Sentry, Figma, Filesystem). Per-server token-tax math and a live stack builder with cost estimation.
- [Picking a Model in 2026](https://webdeveloper.com/learn/guides/pick-a-model-2026/): Decision tree for Claude Opus 4.7, Sonnet 4.6, GPT-5.3 Codex, Composer 2.5, and Gemini 3.1 Pro. Pricing table, task-to-model matrix, and a 5-question live picker that recommends a model with per-task and per-day cost estimates.
- [Testing AI-Written Code](https://webdeveloper.com/learn/guides/testing-ai-written-code/): The AI-era test pyramid (more integration, more e2e, fewer unit). Contract tests vs implementation tests, who writes which tests, and a coverage planner that distributes a test budget across layers based on your sprint and risk profile.
- [Self-Hosting an AI Coding Stack](https://webdeveloper.com/learn/guides/self-hosted-ai-coding-stack/): Running Qwen3 Coder, DeepSeek-Coder-V3, and Llama 4 locally with Ollama, Cline, and Aider. Hardware tiers, model picks, where local actually wins versus frontier, and a payback calculator for hardware upgrades.
- [Streaming AI in Web Apps](https://webdeveloper.com/learn/guides/streaming-ai-web-apps/): Ship LLM features in web apps using the Vercel AI SDK 5. Transport-based useChat, server streamText with SSE, tool calls with zod schemas and stepCountIs caps, edge vs Node runtime, cancellation via abortSignal, and a live monthly-spend estimator across Claude Sonnet/Opus, GPT-5/mini, Gemini 2.5 Pro, and Haiku.
- [Securing AI-Generated Code](https://webdeveloper.com/learn/guides/securing-ai-generated-code/): The 2026 web-app security playbook for AI-written code. Slopsquatting defenses (npm ci --ignore-scripts, dependency-review action, registry checkers), prompt-injection containment for shipped LLM features, agent-permission rules, .env protections, a minimum-viable CI security workflow, and a 12-control self-audit with localStorage persistence.
- [Prompting for UI Code](https://webdeveloper.com/learn/guides/prompting-ui-code/): The five-part prompt structure (contract, tokens, states, a11y, test) that makes AI agents produce shippable React/Svelte/Vue components. Type-first specs, tokens-block for AGENTS.md, the eight states to always enumerate, jest-axe verification, and a live prompt-quality scorer that grades a pasted prompt out of 8.
- [Building MCP Servers](https://webdeveloper.com/learn/guides/building-mcp-servers/): A working TypeScript playbook for the Model Context Protocol. When MCP is the right shape vs a tool call or CLI, stdio vs Streamable HTTP transport (HTTP+SSE is deprecated), stateless vs stateful sessions, OAuth 2.1 / bearer / mTLS auth, deploy ops, and a live scaffold generator that emits a runnable starter file from a few inputs.
- [AI for Performance Optimization](https://webdeveloper.com/learn/guides/ai-performance-optimization/): Prompts that actually move Core Web Vitals. Per-metric LCP/INP/CLS playbooks with the priority-ordered checks the agent needs, the unnecessary-'use client' hunt for Next.js App Router, RUM as ground truth, and a live vitals diagnostic that classifies p75 numbers and emits the right prompt for the failing metric.
- [Observability for AI Features](https://webdeveloper.com/learn/guides/observability-for-ai-features/): OpenTelemetry GenAI semantic conventions (gen_ai.* namespace, OTEL_SEMCONV_STABILITY_OPT_IN=gen_ai_latest_experimental), the seven attributes every span needs, SLOs for streaming endpoints (TTFT + stream success, never total time), vendor tree (Langfuse vs Helicone vs Datadog), seven alerts worth paging on, and a live error-budget calculator.
- [Claude Code for Web Developers](https://webdeveloper.com/learn/guides/claude-code-for-web-developers/): The complete Claude Code reference for web devs. Install, CLAUDE.md vs AGENTS.md, model picker, permissions and sandbox, MCP, subagents, session forking, hooks, and a live permission profile builder for `.claude/settings.json`.
- [Codex CLI for Web Developers](https://webdeveloper.com/learn/guides/codex-cli-for-web-developers/): OpenAI's terminal agent for long autonomous runs. Workspace context, goal mode, prompt-driven security review workflow, MCP, comparison with Claude Code and Cursor, and a 5-question task router that recommends the right agent for the job.
- [Accessibility for AI-Built Sites](https://webdeveloper.com/learn/guides/accessibility-for-ai-built-sites/): WCAG 2.2 Level AA for vibe-coded UIs. What agents get wrong, the a11y prompt contract for AGENTS.md, keyboard/focus/modal patterns, axe-core + Playwright automation, and a 12-point audit checklist widget with localStorage persistence.
- [CI/CD for Agent-Written Code](https://webdeveloper.com/learn/guides/ci-for-ai-generated-code/): GitHub Actions playbook for AI-era repos. Secret scanning (gitleaks), dependency-review-action, CodeQL, preview deploys, agent PR hygiene, Copilot CLI /security-review vs enforced CI gates, and a stack picker that emits workflow YAML.
- [RAG for Web Apps](https://webdeveloper.com/learn/guides/rag-for-web-apps/): Production RAG for web apps in 2026. Chunking (400–800 tokens), text-embedding-3-small/large, pgvector vs Pinecone vs Cloudflare Vectorize, tenant isolation, AI SDK 5 embedMany + streamText retrieval route, and a monthly cost estimator.
- [Design-to-Code with AI](https://webdeveloper.com/learn/guides/design-to-code-with-ai/): When to use generators (Stitch, v0) vs in-repo agents (Cursor, Claude Code). Figma MCP workflow, Impeccable and CSS.dev design fluency skills, merge checklist, and an input-type picker that outputs tool sequence + sample prompt.

## Prompt Packs

Numbered, copy-paste prompt sequences that build complete websites end-to-end with AI coding agents. Each pack has 8 milestones with verify-checkpoints between steps.

- [Prompt Packs index](https://webdeveloper.com/learn/prompt-packs/): All four packs with previews.
- [Portfolio Site](https://webdeveloper.com/learn/prompt-packs/portfolio/): Developer portfolio from scaffold to deploy.
- [Business Landing](https://webdeveloper.com/learn/prompt-packs/business-landing/): Hero, features, pricing, FAQ, deploy.
- [Course Website](https://webdeveloper.com/learn/prompt-packs/course-website/): Curriculum, testimonials, pricing, deploy.
- [Resume Site](https://webdeveloper.com/learn/prompt-packs/resume-site/): Timeline, skills, projects, print stylesheet.

## Optional

- [Sitemap](https://webdeveloper.com/sitemap.xml): Full URL inventory.
- [Home](https://webdeveloper.com/): Site landing page.