data-attributes
Installation
SKILL.md
Data Attributes Skill
This skill covers the use of data-* attributes as the preferred mechanism for state management, variant styling, and configuration in HTML-first development.
Philosophy
Data attributes replace classes for dynamic concerns. While semantic elements and custom elements handle structure, data-* attributes handle:
- State (
data-expanded,data-loading,data-valid) - Variants (
data-type,data-variant,data-topic) - Configuration (
data-columns,data-size,data-animation)
This creates a clean HTML/CSS/JS bridge where markup declares intent, CSS responds to it, and JavaScript (when needed) manipulates data attributes rather than class lists.