lang-html
This skill defines rules for writing maintainable, progressively enhanced HTML with CUBE CSS and Every Layout.
Reference Guide
Load the relevant reference when the task involves:
| Topic |
File |
Load When |
| CUBE CSS |
references/cube-css.md |
writing or reviewing CSS, class naming, cascade decisions |
| Every Layout |
references/every-layout.md |
layout primitives: stack, cluster, sidebar, grid, center, box |
| HTMX |
references/htmx.md |
HTMX attributes, partial rendering, swap strategies, events |
Core Philosophy
- HTML is the foundation. CSS enhances. HTMX progressively adds interactivity.
- Prefer semantic HTML over
<div> soup.
- The cascade is a feature — use it, don't fight it.
- Layouts are solved with composable primitives (Every Layout), not one-off utilities.
CSS Architecture: CUBE CSS
Structure all CSS in four layers:
- Composition — layout primitives (
.stack, .cluster, .sidebar, .grid, .center, .box)
- Utility — single-purpose design tokens (
.text-step-1, .bg-surface, .color-accent)
- Block — component-scoped styles (
.card, .nav, .hero)
- Exception — overrides using
data-* attributes ([data-variant="inverted"])
Apply classes in that order: composition first, utilities second, blocks third, exceptions last.
Every Layout: Use These Primitives
Do not write ad-hoc layout CSS. Use these intrinsic primitives:
| Primitive |
Use for |
.stack |
Vertical spacing between siblings |
.box |
Padding + optional border for a contained region |
.center |
Horizontal centering with max-width |
.cluster |
Wrapping flex groups (tags, buttons, nav items) |
.sidebar |
Two-column layout with one fixed-width side |
.grid |
Auto-responsive grid without media queries |
.frame |
Fixed aspect-ratio media containers |
.reel |
Horizontal scrolling rows |
.icon |
Inline SVG icon with text sizing |
See references/every-layout.md for CSS implementations.
MUST DO
- Use semantic HTML elements (
<nav>, <main>, <article>, <section>, <aside>, <header>, <footer>)
- Define spacing, color, and typography via custom properties (
--space-s, --color-text, --step-0)
- Use
data-* attributes for state/variant exceptions, not modifier classes (card--dark)
- Use
hx-boost on <a> and <form> elements before reaching for more specific HTMX attributes
- Scope block CSS to a single class selector matching the HTML element's role
- Write layout CSS using
gap, not margin between siblings
- Validate that HTMX targets exist on the page before wiring
hx-target
MUST NOT
- Write inline styles (except generated/dynamic values that cannot be in CSS)
- Use utility classes for layout spacing — use Every Layout primitives instead
- Nest block selectors more than one level deep
- Use
!important except in utility classes (where it is intentional)
- Use class names that encode visual appearance (
red-text, big-button) — use semantics or tokens
- Add HTMX attributes without defining a clear fallback for no-JS environments
- Use
hx-swap="outerHTML" on the element that triggers the request (causes self-deletion)
1---2name: lang-html3description: HTML, HTMX, and CSS best practices following CUBE CSS methodology and Every Layout primitives. Use when working with HTML templates, HTMX interactions, CSS styling, or building server-rendered UI components.4---56# lang-html78This skill defines rules for writing maintainable, progressively enhanced HTML with CUBE CSS and Every Layout.910## Reference Guide1112Load the relevant reference when the task involves:1314| Topic | File | Load When |15|-------|------|-----------|16| CUBE CSS | `references/cube-css.md` | writing or reviewing CSS, class naming, cascade decisions |17| Every Layout | `references/every-layout.md` | layout primitives: stack, cluster, sidebar, grid, center, box |18| HTMX | `references/htmx.md` | HTMX attributes, partial rendering, swap strategies, events |1920## Core Philosophy2122- HTML is the foundation. CSS enhances. HTMX progressively adds interactivity.23- Prefer semantic HTML over `<div>` soup.24- The cascade is a feature — use it, don't fight it.25- Layouts are solved with composable primitives (Every Layout), not one-off utilities.2627## CSS Architecture: CUBE CSS2829Structure all CSS in four layers:30311. **Composition** — layout primitives (`.stack`, `.cluster`, `.sidebar`, `.grid`, `.center`, `.box`)322. **Utility** — single-purpose design tokens (`.text-step-1`, `.bg-surface`, `.color-accent`)333. **Block** — component-scoped styles (`.card`, `.nav`, `.hero`)344. **Exception** — overrides using `data-*` attributes (`[data-variant="inverted"]`)3536Apply classes in that order: composition first, utilities second, blocks third, exceptions last.3738## Every Layout: Use These Primitives3940Do not write ad-hoc layout CSS. Use these intrinsic primitives:4142| Primitive | Use for |43|-----------|---------|44| `.stack` | Vertical spacing between siblings |45| `.box` | Padding + optional border for a contained region |46| `.center` | Horizontal centering with max-width |47| `.cluster` | Wrapping flex groups (tags, buttons, nav items) |48| `.sidebar` | Two-column layout with one fixed-width side |49| `.grid` | Auto-responsive grid without media queries |50| `.frame` | Fixed aspect-ratio media containers |51| `.reel` | Horizontal scrolling rows |52| `.icon` | Inline SVG icon with text sizing |5354See `references/every-layout.md` for CSS implementations.5556## MUST DO5758- Use semantic HTML elements (`<nav>`, `<main>`, `<article>`, `<section>`, `<aside>`, `<header>`, `<footer>`)59- Define spacing, color, and typography via custom properties (`--space-s`, `--color-text`, `--step-0`)60- Use `data-*` attributes for state/variant exceptions, not modifier classes (`card--dark`)61- Use `hx-boost` on `<a>` and `<form>` elements before reaching for more specific HTMX attributes62- Scope block CSS to a single class selector matching the HTML element's role63- Write layout CSS using `gap`, not `margin` between siblings64- Validate that HTMX targets exist on the page before wiring `hx-target`6566## MUST NOT6768- Write inline styles (except generated/dynamic values that cannot be in CSS)69- Use utility classes for layout spacing — use Every Layout primitives instead70- Nest block selectors more than one level deep71- Use `!important` except in utility classes (where it is intentional)72- Use class names that encode visual appearance (`red-text`, `big-button`) — use semantics or tokens73- Add HTMX attributes without defining a clear fallback for no-JS environments74- Use `hx-swap="outerHTML"` on the element that triggers the request (causes self-deletion)
arhuman