HTML Semantic Engineering

30 battle-tested principles for production HTML. Semantic correctness first, then accessibility, then performance.

Relationship with Other Skills

• web-components-architecture: Component lifecycle and Shadow DOM patterns
• javascript-pragmatic-rules: JavaScript behavior inside components
• utopia-fluid-scales: Typography (--step-*) and spacing (--space-*) tokens
• utopia-grid-layout: Grid utilities (.u-container, .u-grid, --grid-gutter)
• utopia-container-queries: Container context required for cqi fluid units

Example: A <product-card> component should:

• Use this skill for semantic structure (article, heading hierarchy, img alt)
• Use web-components-architecture for Shadow DOM encapsulation
• Use utopia-fluid-scales for typography (--step-2) and spacing (--space-m)
• Use javascript-pragmatic-rules for async data fetching

Design System Integration