frontend-core-architecture
Installation
SKILL.md
Frontend Core Architecture
This skill defines the platform model every other frontend skill builds on. It splits the web platform into four authoring layers, fixes a deterministic spec lookup order, maps each CSS and DOM operation onto the browser rendering pipeline, and sets the rules for when a build step is required versus harmful.
The skill is framework-agnostic. It targets the evergreen-2026 baseline (Chrome, Firefox, Safari, Edge current stable). Features at Baseline 2024 status MUST work without polyfill. Features at Baseline 2025 status MUST be gated via @supports or runtime feature detection.
Quick Reference
The four authoring layers
| Layer | Spec home | What lives here | Output of layer |
|---|---|---|---|
| Markup | WHATWG HTML Living Standard | Document structure, semantics, landmarks, native controls | DOM tree |
| Style | W3C CSS Working Group (TR + ED) | Cascade, layout, color, typography, scope, container queries | CSSOM, render tree |
| Behavior | ECMAScript + WHATWG DOM + Web APIs | Event handling, data fetching, observers, custom elements | Mutations to DOM and CSSOM |
| Animation/timeline | CSS animations, View Transitions API, scroll-driven animations | Time-based and scroll-driven choreography | Compositor layers |
Verified against WHATWG HTML Living Standard (verified 2026-05-19) and web.dev: Baseline (verified 2026-05-19).