Frontend Markup Practices
Application skill for HTML/CSS learning (from the archived awesome-guidelines style capsules). For React/TS component patterns, inspect current project frontend code and any project-local reference/ or reference/web/ assets first; then load applicable stack capsules in skills/*-foundation.
Core Principle
Structure in HTML, presentation in CSS, behavior in JS, with explicit, reusable class selectors and separate JS hooks so refactors do not cross wires.
When to Use / NOT
- Static templates, email HTML, design-system CSS, or pre-framework markup review.
- Auditing selector specificity, a11y alt text, or asset loading.
NOT when:
- TypeScript/React implementation: inspect current project components/tokens, then relevant
reference/web/ or code references, then typescript-coding-standards and applicable skills/*-foundation.
- Stack-specific UI kit already owns conventions, project wins.
Workflow
- Markup, doctype, charset,
lang, semantic elements, meaningful alt, no inline presentation (frontend-html-semantics-accessibility.md).
- Naming, hyphenated purpose classes; no
#id selectors; selector intent; .js-* for behavior only (frontend-css-naming-selectors.md).
- Structure, 2-space formatting, grouped declarations, media queries beside rules, component-scoped files (
frontend-css-structure-formatting.md).
- Delivery, HTTPS assets, avoid
@import, validate HTML/CSS (frontend-assets-delivery.md).
- Verify, validator + a11y spot check + Stylelint/style guide config.
Red Flags
<div onclick> / missing alt.#id or header ul styling.- Same class used for CSS and JS binding.
- Protocol-relative or HTTP CDN URLs on HTTPS sites.
- Reactive
!important sprawl.
Verification
- W3C HTML/CSS validator (or CI equivalent) on changed templates.
- Lighthouse/axe on representative pages.
- Stylelint rules aligned with capsules.
- Grep:
.js- absent from CSS; @import absent from production entry CSS.
References
awesome-guidelines/references/frontend-style-learning-note.mdawesome-guidelines/references/frontend-html-semantics-accessibility.mdawesome-guidelines/references/frontend-css-naming-selectors.mdawesome-guidelines/references/frontend-css-structure-formatting.mdawesome-guidelines/references/frontend-assets-delivery.md
1---2name: frontend-markup-practices3description: Use when authoring or reviewing static HTML/CSS, semantic markup, accessibility, class-based low-specificity CSS, js-* hooks, formatting, HTTPS assets, and validation; distilled from Google HTML/CSS, CSS Guidelines, and Code Guide.4---56# Frontend Markup Practices78Application skill for HTML/CSS learning (from the archived `awesome-guidelines` style capsules). For React/TS component patterns, inspect current project frontend code and any project-local `reference/` or `reference/web/` assets first; then load applicable stack capsules in `skills/*-foundation`.910## Core Principle1112**Structure in HTML, presentation in CSS, behavior in JS**, with explicit, reusable class selectors and separate JS hooks so refactors do not cross wires.1314## When to Use / NOT1516- Static templates, email HTML, design-system CSS, or pre-framework markup review.17- Auditing selector specificity, a11y alt text, or asset loading.1819**NOT when:**2021- TypeScript/React implementation: inspect current project components/tokens, then relevant `reference/web/` or code references, then `typescript-coding-standards` and applicable `skills/*-foundation`.22- Stack-specific UI kit already owns conventions, project wins.2324## Workflow25261. **Markup**, doctype, charset, `lang`, semantic elements, meaningful `alt`, no inline presentation (`frontend-html-semantics-accessibility.md`).272. **Naming**, hyphenated purpose classes; no `#id` selectors; selector intent; `.js-*` for behavior only (`frontend-css-naming-selectors.md`).283. **Structure**, 2-space formatting, grouped declarations, media queries beside rules, component-scoped files (`frontend-css-structure-formatting.md`).294. **Delivery**, HTTPS assets, avoid `@import`, validate HTML/CSS (`frontend-assets-delivery.md`).305. **Verify**, validator + a11y spot check + Stylelint/style guide config.3132## Red Flags3334- `<div onclick>` / missing `alt`.35- `#id` or `header ul` styling.36- Same class used for CSS and JS binding.37- Protocol-relative or HTTP CDN URLs on HTTPS sites.38- Reactive `!important` sprawl.3940## Verification4142- W3C HTML/CSS validator (or CI equivalent) on changed templates.43- Lighthouse/axe on representative pages.44- Stylelint rules aligned with capsules.45- Grep: `.js-` absent from CSS; `@import` absent from production entry CSS.464748## References4950- `awesome-guidelines/references/frontend-style-learning-note.md`51- `awesome-guidelines/references/frontend-html-semantics-accessibility.md`52- `awesome-guidelines/references/frontend-css-naming-selectors.md`53- `awesome-guidelines/references/frontend-css-structure-formatting.md`54- `awesome-guidelines/references/frontend-assets-delivery.md`
ryan-brosas