Website
Build fast, accessible, and SEO-friendly websites with modern best practices.
Iván
@ivangdavila
What This Skill Does
Builds fast, accessible, and SEO-friendly websites following modern best practices for performance, mobile-first design, accessibility, and clean HTML/CSS. Includes rules for image optimization, critical CSS inlining, semantic HTML, and pre-launch checks.
Replaces ad-hoc web development workflows by providing a structured, best-practice checklist that covers performance, accessibility, SEO, and common pitfalls.
When to Use It
- Create a new website from scratch with performance and accessibility baked in
- Audit an existing site for common issues like missing alt text, poor color contrast, or render-blocking resources
- Optimize images and fonts to reduce page load time and layout shift
- Set up mobile-first CSS and test responsive behavior at 320px width
- Prepare a site for launch by validating forms, 404 pages, social previews, and sitemaps
Install
$ openclaw skills install @ivangdavila/websiteWebsite Development Rules
Performance
- Images are the #1 cause of slow sites — use WebP/AVIF, lazy-load below-the-fold, and set explicit width/height to prevent layout shift
- Render-blocking CSS delays first paint — inline critical CSS in
<head>, defer the rest - Third-party scripts (analytics, chat widgets) often add 500ms+ — load them with
asyncordefer, audit regularly - Fonts cause invisible text flash (FOIT) — use
font-display: swapand preload critical fonts - Measure with Lighthouse in incognito mode — extensions skew results
Mobile First
- Start CSS with mobile styles, add complexity with
min-widthmedia queries — easier to scale up than strip down - Touch targets need 44x44px minimum — fingers are imprecise, small buttons frustrate users
- Test on real devices, not just browser DevTools — throttling simulation misses real-world jank
- Horizontal scroll is a critical bug — test every page at 320px width minimum
viewportmeta tag is required:<meta name="viewport" content="width=device-width, initial-scale=1">
Accessibility
- Every
<img>needsalttext — emptyalt=""for decorative images, descriptive text for meaningful ones - Color contrast ratio 4.5:1 minimum for body text — use WebAIM contrast checker
- Form inputs must have associated
<label>elements — placeholders alone are not accessible - Keyboard navigation must work — test every interactive element with Tab key
- Screen readers announce heading hierarchy — use H1-H6 in logical order, never skip levels
HTML Structure
- One
<h1>per page only — it's the page title, not a styling tool - Use semantic elements:
<nav>,<main>,<article>,<aside>,<footer>— they communicate structure to browsers and assistive tech <button>for actions,<a>for navigation — don't use divs with click handlers- External links should have
rel="noopener"— prevents security vulnerability withtarget="_blank" - Validate HTML — broken markup causes unpredictable rendering across browsers
CSS Patterns
- Avoid
!important— it breaks cascade and makes debugging painful. Fix specificity instead - Use relative units (
rem,em,%) over fixedpxfor text — respects user font size preferences - CSS custom properties (variables) reduce repetition — define colors and spacing once, use everywhere
- Flexbox for 1D layouts, Grid for 2D — don't force one to do the other's job
- Test without CSS loading — content should still be readable in plain HTML
Common Mistakes
- Missing favicon causes 404 spam in server logs — always include one, even a simple PNG
- Not setting
<html lang="en">breaks screen reader pronunciation - Hardcoded
http://links break on HTTPS sites — use protocol-relative//or alwayshttps:// - Assuming JavaScript is available — core content should work without JS (progressive enhancement)
- Forgetting print styles — add
@media printfor pages users might print (receipts, articles)
Before Launch
- Test all forms actually submit — broken contact forms lose leads silently
- Check 404 page exists and is helpful — default server 404 looks unprofessional
- Verify social sharing previews with Open Graph tags — test in Facebook/Twitter debuggers
- Submit sitemap to Google Search Console — speeds up indexing
- Set up uptime monitoring — know when your site goes down before users tell you
Related skills
Lead Gen Website Builder (SEO PUR)
@lucasgulinoBuild complete local lead generation websites with SEO optimization, conversion tracking, and RGPD compliance. Use for creating service-based websites targeting local markets (plumbers, electricians, home services, etc.) with 10-20 pages, structured data, analytics, and legal compliance.
Web Development
@ivangdavilaBuild, debug, and deploy websites using HTML, CSS, JavaScript, and modern frameworks following production best practices.
EvoWeb.ai Website Builder
@galizkiCreate a Website in 4 Minutes Designed to Bring Clients from ChatGPT, Gemini & Modern Search
here.now
@adamludwinhere.now lets agents publish websites and files to live URLs in seconds. Publish HTML, documents, images, PDFs, videos, and static files to live URLs at {slu...
bb-browser
@yan5xuTurn any website into a CLI command. 36 platforms, 103 commands — Twitter, Reddit, GitHub, YouTube, Zhihu, Bilibili, Weibo, and more. Uses OpenClaw's browser...
AppDeploy
@avimakDeploy web apps with backend APIs, database, file storage, AI operations, authentication, realtime, and cron jobs. Use when the user asks to deploy or publis...