Semantic markup & modern CSS

Load first on marketing UI, layout refactors, or any task touching TSX + styles. Pair with react-client-expert for client state; this skill owns HTML, ARIA, tokens, and CSS architecture.

devprofile overlay: references/devprofile-marketing-css.md

Decision order (always)

1. Native element — can <button>, <a>, <dialog>, <details>, <address>, <figure>, <ul>/<ol> do the job?
2. Semantics + one heading level — correct landmark/section/article; single h1, section h2, card h3
3. WAI-ARIA only to fill gaps — prefer native semantics; don't duplicate what HTML already exposes
4. data-* state in DOM — style with CSS; avoid parallel isOpen && "block" class soup
5. Token/contrast fix — adjust CSS variables before per-component color hacks
6. Tailwind for layout/type — spacing, grid, responsive; CSS for scroll-margin, :has(), @container, color-mix, reduced motion