Claude MarketplacesSubmit
schalkneethling avatar

Semantic Html

schalkneethling/webdev-agent-skills

This one's about writing HTML that actually means something instead ofDiv Soup with ARIA sprinkled on top. It pushes native elements over role attributes, treats landmarks as navigation tools rather than decoration, and has strong opinions about document structure (like why your h1 belongs inside main, not floating before it). The content realism section is good: it reminds you that real text wraps badly and images come in weird sizes. Use it when you're building components or reviewing markup and want to avoid the "works in Figma, breaks with real content" problem. The skip link guidance is thorough enough to actually implement.

skills.sh installs
351
GitHub stars
7
last updated
Jun 3, 2026
View on GitHub

Install

$ npx -y skills add schalkneethling/webdev-agent-skills --skill semantic-html --agent claude-code

Installs into .claude/skills of the current project.

Files

Semantic HTML

Write HTML that conveys meaning, serves all users, and respects the web platform.

When to Use This Skill

Use this skill when:

  • Creating new components or page sections
  • Reviewing markup for accessibility and semantics
  • Deciding between native HTML elements and ARIA attributes
  • Structuring documents with proper heading hierarchy
  • Making interactive elements accessible
  • Building forms with proper labelling and error handling
  • Creating responsive tables

Core Principles

Content Realism

Design content is idealized. Real content is messy. Always account for:

  • Long sentences and long words
  • Images with varying aspect ratios and sizes
  • Multi-language support (even if not planned—users can translate via browser)
  • Dynamic content that changes in length and structure

Build components that handle real-world content gracefully, not just what looks good in design tools.

Landmarks-First Planning

Before diving into individual components, consider the full page structure. This allows you to:

SKILL.md on GitHub

Sponsors

Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthlyAgent CaffeineSponsoredClose your lid, come back to finished workSnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthlyWaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthlyknobsSponsoredSee your site on any phone, any day, in any language

Details

Repository
github.com/schalkneethling/webdev-agent-skills
Categories
Frontend Development, AI & Agent Building
First seen
Jun 3, 2026

More from schalkneethling/webdev-agent-skills

All 2

Recommended

More Frontend Development
1cloudwego avatareino-componentcloudwego/eino-extEino component selection, configuration, and usage. Use when a user needs to choose or configure a ChatModel, AgenticModel, Embedding, Retriever, Indexer, Tool,348skills.sh installs
2alfredoperez avatarangular-best-practices-translocoalfredoperez/angular-best-practicesangular best practices transloco342skills.sh installs
3arraydude avatarreact-query-best-practicesarraydude/agent-skillsReact Query v4 (TanStack Query) best practices, patterns, and troubleshooting. Use when working with useQuery, useMutation, query invalidation, caching, WebSock339skills.sh installs
4secondsky avatarnuxt-seosecondsky/claude-skillsNuxt SEO v5 modules (robots, sitemap, og-image, schema-org, link-checker, seo-utils, site-config). Use when implementing SEO, robots.txt, sitemaps, Schema.org, 335skills.sh installs
5alfredoperez avatarangular-best-practices-rules-revieweralfredoperez/angular-best-practicesangular best practices rules reviewer331skills.sh installs
6nocobase avatarnocobase-ui-buildernocobase/skillsINTERNAL CONTINUATION ONLY. Never select this skill from a raw user UI request. Use it only after nocobase-portal-manage has already resolved exactly one enable331skills.sh installs