Website

What This Skill Does

The Website skill is a comprehensive toolkit designed to assist users in building high-performance, accessible, and SEO-optimized web applications. It serves as an architectural advisor and code assistant, enforcing modern web development standards. By utilizing this skill, users ensure their projects adhere to critical best practices such as semantic HTML structure, responsive mobile-first design, and stringent accessibility compliance. Whether you are scaffolding a new project or auditing existing code, the Website skill acts as a guardrail against common pitfalls like layout shifts, accessibility gaps, and SEO penalties.

Installation

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

clawhub install openclaw/skills/skills/ivangdavila/website

Use Cases

• Project Scaffolding: Generate the foundational architecture for a new website, ensuring semantic structure and proper viewport meta-tags from the start.
• Performance Auditing: Receive actionable recommendations on how to optimize asset loading, such as implementing WebP/AVIF images, deferring non-critical JavaScript, and inlining critical CSS.
• Accessibility Compliance: Verify that your site meets WCAG standards, ensuring color contrast, logical heading hierarchies, and proper ARIA labels for assistive technologies.
• Refactoring & Debugging: Modernize legacy codebases by replacing deprecated elements with semantic tags and addressing specificity issues to remove reliance on !important.

Example Prompts

1. "Analyze my current landing page code and suggest improvements to reduce LCP (Largest Contentful Paint) while maintaining SEO best practices."
2. "Draft the HTML structure for an accessible contact form that follows modern guidelines, including proper labels and input types."
3. "Review my CSS and help me transition from fixed pixel values to relative rem units for better accessibility and responsiveness."

Tips & Limitations

To maximize the efficacy of this skill, treat the output as a set of professional standards. Always remember that while this skill provides expert guidance, real-world testing is paramount; perform testing on actual mobile devices to catch issues that simulations miss. Note that this skill is primarily focused on front-end development and accessibility; for complex backend interactions or database management, you may need to pair it with supplementary skills. Always remember that accessibility is not a one-time check but a continuous process; use keyboard navigation tests and screen reader simulations frequently during your development workflow to ensure that all users have an equitable experience.