Source profileQuality 90/100

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

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.

Source repository stars: 6,661
Declared platforms: 0
Static risk flags: 0
Last source update: 2026-08-25
Source checked: 2026-08-25

Decision Compatibility Install Workflow Permissions Evidence Source FAQ

Decision brief

What it does: where it fits

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

Best for

Creating HTML documents with semantic structure
Building accessible forms with HTML5 validation
Implementing responsive markup and multimedia

Not for

Validation: W3C Validator (validator.w3.org), check unclosed tags, verify nesting
Accessibility: Lighthouse audit, screen reader testing, keyboard nav, color contrast

Compatibility matrix

Platform support, with evidence labels

Platform	Status	Evidence	What to check
Codex	Not declared	No explicit evidence	Portability before use
Claude Code	Not declared	No explicit evidence	Portability before use
Cursor	Not declared	No explicit evidence	Portability before use
Gemini CLI	Not declared	No explicit evidence	Portability before use

Open the compatibility checker

Installation

Inspect first. Install second.

The source command is displayed only when detected. A safe inspection prompt is always available so your agent can explain every action before execution.

Source-detected install commandSource

npx skills add https://github.com/opensquilla/opensquilla --skill "src/opensquilla/skills/bundled/html-coder"

Safe inspection promptEditorial

Inspect the Agent Skill "html-coder" from https://github.com/opensquilla/opensquilla/blob/92bea137855e471e9e9c2bf46eabff59fe4ebb1c/src/opensquilla/skills/bundled/html-coder/SKILL.md at commit 92bea137855e471e9e9c2bf46eabff59fe4ebb1c. List every install step, command, network request, credential, file read/write, external action, and rollback step. Explain whether it fits my task. Do not install or execute anything until I approve.

Workflow

What the source asks the agent to do

01
When to Use This Skill
Creating HTML documents with semantic structure
Creating HTML documents with semantic structureBuilding accessible forms with HTML5 validationImplementing responsive markup and multimedia
02
OpenSquilla Webpage Delivery
For a new runnable webpage when workspace file-authoring tools are available:
Create a filesystem-safe, dedicated project subdirectory such asKeep index.html, local CSS/JavaScript, and every local asset inside thatValidate the finished project, then call publishartifact exactly once
03
Core Capabilities
Semantic HTML: Document structure, content sections, accessibility-first markup
Semantic HTML: Document structure, content sections, accessibility-first markupForms: All input types, validation attributes, fieldsets, labelsMedia: Responsive images, audio/video, Canvas, SVG
04
Essential References
Core documentation for HTML experts:
references/add-css-style.md - Add CSS via link tag, inline, or embedded in htmlreferences/add-javascript.md - Add JavaScript via script src="link.js" tag, inline script, or embedded in htmlreferences/attributes.md - HTML attribute essentials
05
Best Practices
Semantic HTML - Use elements that convey meaning: , , , , , not div soup.
Semantic HTML - Use elements that convey meaning: , , , , , 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.

Permission review

Static risk signals and limitations

No configured static risk pattern was detected

This is not proof of safety. Runtime behavior, indirect dependencies, and hidden external systems are outside the static scan.

Evidence record

Why each signal appears

EvidenceSourceComputedTestedEditorial

Signal	Value	Evidence type	Meaning
Quality score	90/100	Computed	Documentation, specificity, maintenance, and trust rules
Repository stars	6,661	Source	Repository attention, not individual Skill quality
Compatibility	0 platforms	Source	Declared in the catalog source record
Usage guide	automated source guide	Editorial	Generated or reviewed according to the visible evidence level

Pinned source

Provenance and original SKILL.md

Repository: opensquilla/opensquilla
Skill path: src/opensquilla/skills/bundled/html-coder/SKILL.md
Commit: 92bea137855e471e9e9c2bf46eabff59fe4ebb1c
License: Apache-2.0
Collected: 2026-08-25
Default branch: main

View the original SKILL.md

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:

Create a filesystem-safe, dedicated project subdirectory such as webpage-<topic-slug>/; never place a generated site directly in the workspace root.
Keep index.html, local CSS/JavaScript, and every local asset inside that project root, using browser-relative references.
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

Frequently asked questions

What to verify before installation and use

What does the html-coder source document cover?

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

How do I install html-coder?

The source record exposes this install command: npx skills add https://github.com/opensquilla/opensquilla --skill "src/opensquilla/skills/bundled/html-coder". Inspect the command and pinned source before running it.

Alternatives

Compare before choosing

Computed 10045,511

coreyhaines31/marketingskills

ab-testing

When the user wants to plan, design, or implement an A/B test or experiment, or build a growth experimentation program. Also use when the user mentions "A/B test," "split test," "experiment," "test this change," "variant copy," "multivariate test," "hypothesis," "should I test this," "which version is better," "test two versions," "statistical significance," "how long should I run this test," "growth experiments," "experiment velocity," "experiment backlog," "ICE score," "experimentation program

Computed 100147

oaustegard/claude-skills

featuring

Generate hierarchical _FEATURES.md files that describe what a codebase DOES from a user/consumer perspective, anchored to source symbols via tree-sitting. Supports large complex codebases through feature-driven decomposition into sub-feature files. Uses a multi-pass synthesis: orientation → detail → overview rewrite. Use when someone says "what does this do", "document features", "feature inventory", "_FEATURES.md", or needs to understand a codebase's purpose before modifying it. Complements tre

Computed 1008

narrative-io/narrative-skills-marketplace

design-analysis

Translate a fuzzy analytical question into a rigorous investigation plan. Interrogates the ask, grounds the plan in the available data dictionary, applies analytical best practices, and produces a structured brief of query specifications for a downstream query-writing skill. Plans, does not write SQL. Use when: "why did X drop", "is there a relationship between A and B", "who are our highest-value customers", "what's driving the change in Y", "investigate this trend", "design an analysis for", "

Computed 1007

event4u-app/agent-config

existing-ui-audit

Use BEFORE writing or editing any non-trivial UI — inventories components, design tokens, shadcn primitives, and reusable patterns into state.ui_audit. Hard gate for the ui directive set.