How do I install the Web Development skill?

Run npx skillmds@latest add dvcrn/web-development in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Web Development safe to use?

This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. Capability flags: docs only. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Web Development?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Web Development free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Web Development?

dvcrn (@dvcrn) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Web Development by dvcrn — Agent Skill

Name: Web Development
Rating: 4.2 (5 reviews)
Author: dvcrn

File contents

Quick Reference

Need	See
HTML/CSS issues	`html-css.md`
JavaScript patterns	`javascript.md`
React/Next.js/frameworks	`frameworks.md`
Deploy to production	`deploy.md`
Performance/SEO/a11y	`performance.md`

Critical Rules

DOCTYPE matters — Missing <!DOCTYPE html> triggers quirks mode; layouts break unpredictably
CSS specificity beats cascade — .class overrides element selectors regardless of order
=== not == — Type coercion causes "0" == false to be true
Async/await in loops — forEach doesn't await; use for...of or Promise.all
CORS is server-side — No client-side fix; configure Access-Control-Allow-Origin on the server
Responsive = viewport meta — Without <meta name="viewport">, mobile renders desktop-width
Form without preventDefault — Page reloads; call e.preventDefault() in submit handler
Images need dimensions — Missing width/height causes layout shift (CLS penalty)
HTTPS or blocked — Mixed content (HTTP resources on HTTPS pages) gets blocked by browsers
Environment variables leak — NEXT_PUBLIC_* exposes to client; never prefix secrets

Common Requests

"Make it responsive" → Mobile-first CSS with media queries; test at 320px, 768px, 1024px "Deploy to production" → See deploy.md for Vercel/Netlify/VPS patterns "Fix CORS error" → Server must send headers; proxy through same-origin if you can't control server "Improve performance" → Lighthouse audit; focus on LCP, CLS, FID; lazy-load below-fold images "Add SEO" → Title/description per page, semantic HTML, OG tags, sitemap.xml

Framework Decision Tree

Static content, fast builds → Astro or plain HTML
Blog/docs with MDX → Astro or Next.js App Router
Interactive app with auth → Next.js or Remix
Full SSR/ISR control → Next.js
Simple SPA, no SEO needed → Vite + React/Vue

---name: web-developmentdescription: Build, debug, and deploy websites with HTML, CSS, JavaScript, modern frameworks, and production best practices.---## Quick Reference| Need | See ||------|-----|| HTML/CSS issues | `html-css.md` || JavaScript patterns | `javascript.md` || React/Next.js/frameworks | `frameworks.md` || Deploy to production | `deploy.md` || Performance/SEO/a11y | `performance.md` |## Critical Rules1. **DOCTYPE matters** — Missing `<!DOCTYPE html>` triggers quirks mode; layouts break unpredictably2. **CSS specificity beats cascade** — `.class` overrides element selectors regardless of order3. **`===` not `==`** — Type coercion causes `"0" == false` to be true4. **Async/await in loops** — `forEach` doesn't await; use `for...of` or `Promise.all`5. **CORS is server-side** — No client-side fix; configure `Access-Control-Allow-Origin` on the server6. **Responsive = viewport meta** — Without `<meta name="viewport">`, mobile renders desktop-width7. **Form without `preventDefault`** — Page reloads; call `e.preventDefault()` in submit handler8. **Images need dimensions** — Missing `width`/`height` causes layout shift (CLS penalty)9. **HTTPS or blocked** — Mixed content (HTTP resources on HTTPS pages) gets blocked by browsers10. **Environment variables leak** — `NEXT_PUBLIC_*` exposes to client; never prefix secrets## Common Requests**"Make it responsive"** → Mobile-first CSS with media queries; test at 320px, 768px, 1024px**"Deploy to production"** → See `deploy.md` for Vercel/Netlify/VPS patterns**"Fix CORS error"** → Server must send headers; proxy through same-origin if you can't control server**"Improve performance"** → Lighthouse audit; focus on LCP, CLS, FID; lazy-load below-fold images**"Add SEO"** → Title/description per page, semantic HTML, OG tags, sitemap.xml## Framework Decision Tree- **Static content, fast builds** → Astro or plain HTML- **Blog/docs with MDX** → Astro or Next.js App Router- **Interactive app with auth** → Next.js or Remix- **Full SSR/ISR control** → Next.js- **Simple SPA, no SEO needed** → Vite + React/Vue

Frequently asked questions

Web Development