Web Development

What This Skill Does

The Web Development skill provides an expert-level interface for building, debugging, and deploying high-performance websites. It covers the full lifecycle of web development, from conceptualizing site architecture and writing semantic HTML to implementing complex JavaScript logic and deploying applications to modern cloud providers. This skill acts as a mentor and hands-on engineer, ensuring that your projects adhere to industry standards like accessibility (a11y), Search Engine Optimization (SEO), and Core Web Vitals performance benchmarks.

Installation

To integrate this skill into your OpenClaw environment, execute the following command in your terminal or command palette:

clawhub install openclaw/skills/skills/ivangdavila/web

Use Cases

• Prototyping: Rapidly scaffold static or dynamic sites using frameworks like Next.js, Astro, or Vite.
• Debugging: Identify and resolve elusive issues like CSS layout shifts, CORS blocking, or asynchronous execution errors in JavaScript.
• Optimization: Audit existing sites for performance, providing actionable insights for LCP, CLS, and FID improvements.
• Deployment: Configure and execute deployment workflows for platforms like Vercel, Netlify, or custom VPS instances.
• SEO Implementation: Enhance site visibility by optimizing meta tags, semantic hierarchy, and Open Graph configurations.

Example Prompts

1. "I am getting a CORS error when fetching data from my API on localhost. How can I fix this without compromising security?"
2. "Help me choose between Astro and Next.js for a documentation site that relies heavily on MDX files."
3. "My mobile layout is broken and elements are overflowing. Can you help me implement a mobile-first responsive design strategy?"

Tips & Limitations

• Strict Type Checking: Always utilize strict equality (===) and avoid implicit type coercion to prevent bugs.
• Performance First: Always include width and height attributes on images to prevent CLS, and ensure viewport meta tags are present for mobile devices.
• Environment Security: Never store secrets in client-side code; use appropriate environment variable prefixes (e.g., NEXT_PUBLIC_*) carefully and leverage server-side environment variables for sensitive API keys.
• Limitations: Note that this skill requires server-side configuration to resolve CORS issues, as client-side fixes are technically impossible. Ensure you have the necessary access to the backend environment when dealing with cross-origin requests.