SkillsAdd

kemiljk/skills

semantic-html-first

Choose HTML semantics and accessible behavior for controls, forms, and custom interaction primitives.

First seen Jul 27, 2026

Installation

$ npx skills add kemiljk/skills --skill semantic-html-first
View on skills.sh ↗ GitHub repository ↗

Similar popular skills

Related neighbors and high-traction skills in the same topics — useful to compare before installing.

snowflake-semanticview Similar name
github/awesome-copilot

Create, alter, and validate Snowflake semantic views using Snowflake CLI (snow). Use when asked…

9.1K installs
semantic-kernel Similar name
github/awesome-copilot

Create, update, refactor, explain, or review Semantic Kernel solutions using shared guidance pl…

1.7K installs
redis-semantic-cache Similar name
redis/agent-skills

Redis LangCache guidance for semantic caching of LLM responses on Redis Cloud — calling search/…

1.4K installs
semanticscholar-skill Similar name
agents365-ai/365-skills

Use when searching academic papers, looking up citations, finding authors, or getting paper rec…

3.1K installs
pgvector-semantic-search Similar name
timescale/pg-aiguide

Use this skill for setting up vector similarity search with pgvector for AI/ML embeddings, RAG …

6 installs
building-dbt-semantic-layer Similar name
dbt-labs/dbt-agent-skills

Use when creating or modifying dbt Semantic Layer components — semantic models, metrics, dimens…

787 installs

Also in this package

Other skills from kemiljk/skills · top by installs.

npx skills add kemiljk/skills
modern-css-html 30 write-first-design 26 fluid-design 26 product-delight 25 dxe 25 prototype-to-production 24 subtractive-design 24 interface-affordances 24 design-engineering 24 ai-output-judgement 24

Browse all from kemiljk/skills

More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Not declared
Cursor Not declared
Codex Not declared
GitHub Copilot Not declared
Windsurf Not declared
Gemini CLI Not declared
Cline Not declared
OpenCode Not declared

Repository health

Stars 28
License LICENSE
Default branch main
Open issues 0
Status Active

Skill metadata

Parsed from SKILL.md frontmatter.

LicenseMIT

Package contents

Files included with this skill beyond the listing page.

  • skill md SKILL.md 2,050 B
  • docs SUMMARY.md 128 B

History

  1. First seen on skills.sh
  2. First recorded snapshot · 24 installs

SKILL.md

Semantic HTML First

Semantic HTML is interface infrastructure. Native elements carry keyboard support, form participation, disabled behaviour, and accessibility semantics without a second implementation.

Defaults

  1. Start with the native element that matches the interaction.
  2. Use ARIA to refine native semantics, not to rebuild them on div/span.
  3. Prefer explicit composition over magic asChild polymorphism when it obscures the real element.
  4. Style states with native pseudo-classes (:disabled, :checked, :open, :invalid) before parallel data-* state systems.
  5. If a library primitive exists, verify it still renders a real semantic element in the DOM.

Prefer / Reject

Prefer Reject
<button type="button"> <div onClick> / <span role="button"> without need
<a href> for navigation Button-styled divs that only route in JS
<details> / <summary> Custom disclosure with ad-hoc keyboard code
<dialog> / Popover API Modal divs fighting focus and top-layer behaviour
Native <form> controls Clickable rows that ignore Enter/Space/disabled

Decision guide

  • Performs an action: button
  • Goes somewhere: a[href]
  • Toggles visibility of related content: details or disclosure button + controlled region
  • Requires a temporary overlay task: dialog or popover
  • Collects input: native form controls inside form

Review checklist

  • Can this be a native element?
  • Tab focus works without extra code?
  • Enter/Space activate buttons?
  • Disabled state blocks interaction and exposure correctly?
  • Screen reader role matches the visual control?
  • Form controls submit/reset with the form?
  • Custom ARIA is additive, not a rewrite of the platform?

Source essays

  • On the semantic web
  • Why I built a semantic-HTML first library