HTML

What This Skill Does

The HTML skill serves as a comprehensive auditing and optimization assistant for modern web development. It focuses on the structural integrity, accessibility, and search engine optimization of your HTML markup. By analyzing your codebase, this agent identifies common technical debt, such as layout shift risks, improperly configured form controls, and security vulnerabilities like missing rel attributes on external links. It ensures that your semantic markup follows best practices for screen readers, search engine crawlers, and mobile devices, effectively reducing browser-related bugs and improving site performance.

Installation

To integrate this skill into your environment, run the following command in your terminal: clawhub install openclaw/skills/skills/ivangdavila/html

Use Cases

• Web Accessibility Auditing: Use this to verify that your navigation, forms, and data tables meet WCAG standards, ensuring screen readers interpret your content correctly.
• Performance Optimization: Prevent Cumulative Layout Shift (CLS) by having the agent verify that image tags and CSS are correctly configured with appropriate dimensions and aspect ratios.
• SEO Hardening: Generate and audit metadata, including canonical links, Open Graph tags for social sharing, and structured content markers to maximize search visibility.
• Form Robustness: Enhance user experience on mobile by configuring proper inputmode attributes and enterkeyhint to match specific user tasks.

Example Prompts

1. "Analyze my site's registration form; it's currently triggering a page refresh whenever the submit button is pressed, and the mobile keyboard doesn't show the number pad for the phone field."
2. "Review the accessibility of my product comparison table and suggest the correct ARIA roles and scope attributes for headers."
3. "Check all external links in my article template to ensure they have the necessary security attributes to prevent cross-site scripting vulnerabilities."

Tips & Limitations

When working with this skill, ensure your provided HTML snippets are well-formed enough for the agent to parse. Note that this skill focuses on markup best practices and is not a substitute for full-stack integration testing. Always verify automated accessibility suggestions with manual screen reader testing. While the skill can identify missing rel tags or improper button types, it cannot automatically refactor your CSS or JavaScript if the HTML structure requires a complete rewrite to resolve deeper architectural issues. Use the agent as a guardrail during development rather than a complete replacement for manual code reviews.