css-first-ui

Files (6)

• SKILL.md
• container-queries.md · references/
• has-patterns.md · references/
• layer-architecture.md · references/
• native-components.md · references/
• oklch-system.md · references/

SKILL.md (first lines)

<!--
id: SK-084
name: css-first-ui
description: CSS-First UI Engine — Container Queries, :has(), @layer specificity architecture, native Popover+Anchor components, scroll-state queries, OKLCH color, CSS Nesting. Load when building UI components that should minimize JavaScript.
keywords: css-first, container-queries, has-selector, layer, popover, anchor, scroll-state, oklch, css-nesting, style-queries, zero-js, native-components
version: 1.0.0
-->

# CSS-First UI Engine

## When to Use This Skill

Load when building UI components. The CSS-First principle: **use native CSS before any JS library.** Every feature here ships zero JavaScript, is GPU-composited, and requires no hydration.

**Companion:** Load `web-l100` (SK-083) for the full Vanguard architecture — Render Tiers, animation orchestration, and streaming pipeline.

---

## The CSS Revolution — Before/After

### Example 1: Form Validation Styling (was ~50 lines of JS)

```css
/* CSS only — no JS event listeners, no state, no re-renders */
form:has(:invalid) .submit-btn {
  opacity: 0.5;
  pointer-events: none;
}

form:has(:focus-visible) .form-help {
  display: block;
}

.field:has(:user-invalid) .error-message {
  display: block;
  color: oklch(0.6 0.25 25);
}
```

### Example 2: Responsive Card (was ~30 lines of JS + ResizeObserver)

```css
.card-container { container-type: inline-size; }

.card {
  display: grid;
  gap: 1rem;
}

@container (min-width: 400px) {
  .card { grid-template-columns: 200px 1fr; }
}

@container (min-width: 600px) {
  .card { grid-template-columns: 250px 1fr auto; }
}
```

### Example 3: Dropdown Menu (was ~200 lines of JS + Floating UI)

```html
<button popovertarget="menu" style="anchor-name: --menu-btn">Options</button>
<ul id="menu" popover style="
  position-anchor: --menu-btn;
  position-area: bottom span-left;
  margin-block-start: 4px;
">
  <li>Edit</li>
  <li>Duplicate</li>
  <li>Delete</li>
</ul>
```

```css
[popover] {
  transition: opacity 0.15s, transform 0.15s, display 0.15s allow-discrete;
  opacity: 0; transform: translateY(-4px);
}
[popover]:popover-open {
  opacity: 1; transform: translateY(0);
}
@starting-style {
  [popover]:popover-open { opacity: 0; transform: translateY(-4px); }
}
```

Zero JavaScript. Light-dismiss. Keyboard accessible. Proper positioning with overflow handling.

---

## @layer Architecture

> Deep patterns: [references/layer-architecture.md](references/layer-architecture.md)

Every project starts with a specificity architecture. `@layer` eliminates specificity wars.

```css
/* globals.css — declare layer order once */
@layer reset, base, tokens, components, utilities, overrides;

/* reset layer — lowest specificity */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; margin: 0; }
  img, picture, video, canvas, svg { display: block; max-width: 100%; }
}

/* tokens layer — design tokens as custom properties */
@layer tokens {
  :root {
    --color-surface: oklch(0.99 0.005 260);
    --color-text: oklch(0.15 0.02 260);
    --color-accent: oklch(0.65 0.25 260);
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    color-scheme: light dark;
  }
}

/* components layer — your components */
@layer components {

From Leo-Atienza/atlas-claude, MIT.

More from Leo-Atienza/atlas-claude