CtrlK
BlogDocsLog inGet started
Tessl Logo

html-coder

Expert HTML development skill for building web pages, forms, and interactive content. Use when creating HTML documents, structuring web content, implementing semantic markup, adding forms and media, working with HTML5 APIs, or needing HTML templates, best practices, and accessibility guidance. Supports modern HTML5 standards and responsive design patterns.

71

Quality

87%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Passed

No findings from the security scan

SKILL.md
Quality
Evals
Security

HTML Coder Skill

Expert skill for professional HTML development with focus on semantic markup, accessibility, HTML5 features, and standards-compliant web content.

When to Use This Skill

  • Creating HTML documents with semantic structure
  • Building accessible forms with HTML5 validation
  • Implementing responsive markup and multimedia
  • Using HTML5 APIs (Canvas, SVG, Storage, Geolocation)
  • Troubleshooting validation or accessibility issues

OpenSquilla Webpage Delivery

For a new runnable webpage when workspace file-authoring tools are available:

  1. Create a filesystem-safe, dedicated project subdirectory such as webpage-<topic-slug>/; never place a generated site directly in the workspace root.
  2. Keep index.html, local CSS/JavaScript, and every local asset inside that project root, using browser-relative references.
  3. Validate the finished project, then call publish_artifact exactly once with the entry file and the complete dedicated root:
{
  "path": "webpage-<topic-slug>/index.html",
  "mime": "text/html",
  "bundle": "directory",
  "bundle_root": "webpage-<topic-slug>"
}

Do not bundle the entire workspace. When a caller explicitly requests source-only output, forbids tool calls, or supplies its own deterministic writer—as AwesomeWebpageMetaSkill does—follow that narrower caller contract instead. When file authoring or publish_artifact is unavailable, return only the requested guidance or source and do not claim that a runnable project was published.

Core Capabilities

  • Semantic HTML: Document structure, content sections, accessibility-first markup
  • Forms: All input types, validation attributes, fieldsets, labels
  • Media: Responsive images, audio/video, Canvas, SVG
  • HTML5 APIs: Web Storage, Geolocation, Drag & Drop, Web Workers
  • Accessibility: ARIA, screen reader support, WCAG compliance

Essential References

Core documentation for HTML experts:

  • references/add-css-style.md - Add CSS via link tag, inline, or embedded in html
  • references/add-javascript.md - Add JavaScript via script src="link.js" tag, inline script, or embedded in html
  • references/attributes.md - HTML attribute essentials
  • references/essentials.md - Semantic markup, validation, responsive techniques
  • references/global-attributes.md - Complete global attribute information
  • references/glossary.md - Complete HTML element and attribute reference
  • references/standards.md - HTML5 specifications and standards

Best Practices

Semantic HTML - Use elements that convey meaning: <article>, <nav>, <header>, <section>, <footer>, not div soup.

Accessibility First - Proper heading hierarchy, alt text, labels with inputs, keyboard navigation, ARIA when needed.

HTML5 Validation - Leverage built-in validation (required, pattern, type="email") before JavaScript.

Responsive Images - Use <picture>, srcset, and loading="lazy" for performance.

Performance - Minimize DOM depth, optimize images, defer non-critical scripts, use semantic elements.

Quick Patterns

Semantic Page Structure

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Page Title</title>
</head>
<body>
  <header><nav><!-- Navigation --></nav></header>
  <main><article><!-- Content --></article></main>
  <aside><!-- Sidebar --></aside>
  <footer><!-- Footer --></footer>
</body>
</html>

Accessible Form

<form method="post" action="/submit">
  <fieldset>
    <legend>Contact</legend>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required
           pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
    <button type="submit">Send</button>
  </fieldset>
</form>

Responsive Image

<picture>
  <source media="(min-width: 1200px)" srcset="large.webp">
  <source media="(min-width: 768px)" srcset="medium.webp">
  <img src="small.jpg" alt="Description" loading="lazy">
</picture>

Troubleshooting

  • Validation: W3C Validator (validator.w3.org), check unclosed tags, verify nesting
  • Accessibility: Lighthouse audit, screen reader testing, keyboard nav, color contrast
  • Compatibility: Can I Use (caniuse.com), feature detection, provide fallbacks

Key Standards

  • WHATWG HTML Living Standard: https://html.spec.whatwg.org/
  • WCAG Accessibility: https://www.w3.org/WAI/WCAG21/quickref/
  • MDN Web Docs: https://developer.mozilla.org/en-US/docs/Web/HTML
Repository
TokenRhythm/opensquilla
Path

src/opensquilla/skills/bundled/html-coder/SKILL.md

Commit

94ac35e

Last updated
First committed

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.

Claim skill