Web Development
Build, debug, and deploy websites using HTML, CSS, JavaScript, and modern frameworks following production best practices.
Iván
@ivangdavila
Install
$ openclaw skills install @ivangdavila/webQuick 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 —
.classoverrides element selectors regardless of order ===not==— Type coercion causes"0" == falseto be true- Async/await in loops —
forEachdoesn't await; usefor...oforPromise.all - CORS is server-side — No client-side fix; configure
Access-Control-Allow-Originon the server - Responsive = viewport meta — Without
<meta name="viewport">, mobile renders desktop-width - Form without
preventDefault— Page reloads; calle.preventDefault()in submit handler - Images need dimensions — Missing
width/heightcauses 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
Related skills
Web Deploy GitHub Pages
@thomeksolutionsCreate and deploy single-page static websites to GitHub Pages with autonomous workflow. Use when building portfolio sites, CV pages, landing pages, or any static web project that needs GitHub Pages deployment. Handles complete workflow from project initialization to live deployment with GitHub Actions automation.
Website
@ivangdavilaBuild fast, accessible, and SEO-friendly websites with modern best practices.
Senior Dev
@michaelmonetizedProduction development workflow with TODO tracking, Graphite PRs, GitHub issues, Vercel deploy checks, and SMS notifications. Use when starting a new task, fixing bugs, implementing features, or any development work that needs tracked progress and code review.
Web Development
@bingggUse when users need to implement, integrate, debug, build, deploy, or validate a Web frontend after the product direction is already clear, especially for Re...
Cloudbase
@bingggUse this skill when you develop, design, build, deploy, debug, migrate, or troubleshoot CloudBase (腾讯云开发, 云开发, TCB, 微信云开发) projects. Covers Web, 微信小程序, 小程序,...
JavaScript
@wscatsA comprehensive JavaScript style guide skill. When activated, it provides best-practice JavaScript coding conventions and generates code that strictly follow...