modern-css

Name: modern-css
Author: ccheney

150installs3forks

How to install modern-css?

ccheney/robust-skills/modern-css

$npx -y skills add ccheney/robust-skills --skill modern-css

Installs into the current project.

Summary

Proactively apply when creating design systems, component libraries, or any frontend application. Triggers on CSS Grid, Subgrid, Flexbox, Container Queries, :has(), @layer, @scope, CSS nesting, @property, @function, if(), oklch, color-mix, light-dark, relative color, @starting-st

Files · 1

View on GitHub

SKILL.md

1	# Modern CSS
2
3	Pure native CSS for building interfaces — no preprocessors, no frameworks.
4
5	## When to Use (and When NOT to)
6
7	Support statuses below are as of mid-2026. "Newly Baseline (date)" means all three engines ship it, but users on older browsers won't have it — keep graceful degradation. Verify anything critical on [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS) or [webstatus.dev](https://webstatus.dev/).
8
9	\| Use Freely (Baseline) \| Feature-Detect / Progressive Enhancement \|
10	\|---\|---\|
11	\| CSS Grid, Subgrid, Flexbox \| Scroll-driven animations (Firefox: behind flag) \|
12	\| Container queries — size; style (newly Baseline May 2026) \| Scroll-state queries (Chromium-only) \|
13	\| `:has()`, `:is()`, `:where()` \| `::scroll-button()`, `::scroll-marker` (Chromium-only) \|
14	\| CSS Nesting, `@layer` \| Customizable `<select>` (Chromium; Safari 27 announced) \|
15	\| `@scope` (newly Baseline Dec 2025) \| `@function`, `if()` (Chromium-only) \|
16	\| `@property` (typed custom props) \| `sibling-index()`, `sibling-count()` (no Firefox) \|
17	\| `oklch()`, `color-mix()`, `light-dark()`, relative color \| Typed `attr()` beyond `content` (Chromium-only) \|
18	\| `@starting-style`, `transition-behavior: allow-discrete` \| Cross-document view transitions (no Firefox) \|
19	\| View transitions — same-document (newly Baseline Oct 2025) \| `interpolate-size`, `calc-size()` (Chromium-only) \|
20	\| Anchor positioning (newly Baseline Jan 2026) \| `popover="hint"`, `interestfor` (Chromium-only) \|
21	\| Popover API, `<dialog>`, invoker commands (newly Baseline Dec 2025) \| `text-wrap: pretty`, `text-box` (no Firefox) \|
22	\| `field-sizing: content` (newly Baseline Jun 2026) \| `reading-flow` (Chromium-only) \|
23	\| `text-wrap: balance`, `linear()` easing \| `closedby` on `<dialog>` (no Safari) \|
24	\| Logical properties, `::details-content` \| Grid Lanes / masonry (Safari 26.4 only; flags elsewhere) \|
25	\| \| `random()` (Safari 26.2+ only), `@mixin` (no browser yet) \|
26
27	## CRITICAL: The Modern Cascade
28
29	Understanding how styles resolve is the single most important concept in CSS. The additions of `@layer` and `@scope` fundamentally changed the cascade algorithm.
30
31	```
32	Style Resolution Order (highest priority wins):
33	┌─────────────────────────────────────────────────┐
34	│ 1. Transitions (active transition wins) │
35	│ 2. !important (user-agent > user > author; │
36	│ layer order INVERTS under !important) │
37	│ 3. Unlayered author styles (beat ALL layers) │
38	│ 4. @layer order (later layer > earlier layer) │
39	│ 5. Specificity (ID > class > element) │
40	│ 6. @scope proximity (closer root wins) │
41	│ 7. Source order (later > earlier) │
42	└─────────────────────────────────────────────────┘
43
44	Unlayered > Last layer > ... > First layer
45	(utilities) (reset)
46	```
47
48	Cascade layers (`@layer`) and scope proximity (`@scope`) are now more powerful than selector specificity. Define your layer order once (`@layer reset, base, components, utilities;`) and specificity wars disappear. Unlayered styles always beat layered styles — use this for overrides.
49
50	## Quick Decision Trees
51
52	### "How do I lay this out?"
53
54	```
55	Layout approach?
56	├─ 2D grid (rows + columns) → CSS Grid
57	│ ├─ Children must align across → Grid + Subgrid
58	│ └─ Waterfall / masonry → display: grid-lanes (not yet cross-browser)
59	├─ 1D row OR column → Flexbox
60	├─ Component adapts to container → Container Query + Grid/Flex
61	├─ Viewport-based responsiveness → @media range syntax
62	└─ Element sized to content → fit-content / min-content / stretch
63	```
64
65	### "How do I style this state?"
66
67	```
68	Style based on what?
69	├─ Child/descendant presence → :has()
70	├─ Container size → @container (inline-size)
71	├─ Container custom property → @container style()
72	├─ Scroll position (stuck/snapped) → scroll-state() query
73	├─ Element's own custom property → if(style(...))
74	├─ Browser feature support → @supports
75	├─ User preference (motion/color) → @media (prefers-*)
76	└─ Multiple selectors efficiently → :is() / :where()
77	```
78
79	### "How do

People who liked this also viewed

6 picks

Type

modern-css

150installs3forks

View on GitHub

How to install modern-css?

ccheney/robust-skills/modern-css

$npx -y skills add ccheney/robust-skills --skill modern-css

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Modern CSS
2
3	Pure native CSS for building interfaces — no preprocessors, no frameworks.
4
5	## When to Use (and When NOT to)
6
7	Support statuses below are as of mid-2026. "Newly Baseline (date)" means all three engines ship it, but users on older browsers won't have it — keep graceful degradation. Verify anything critical on [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS) or [webstatus.dev](https://webstatus.dev/).
8
9	\| Use Freely (Baseline) \| Feature-Detect / Progressive Enhancement \|
10	\|---\|---\|
11	\| CSS Grid, Subgrid, Flexbox \| Scroll-driven animations (Firefox: behind flag) \|
12	\| Container queries — size; style (newly Baseline May 2026) \| Scroll-state queries (Chromium-only) \|
13	\| `:has()`, `:is()`, `:where()` \| `::scroll-button()`, `::scroll-marker` (Chromium-only) \|
14	\| CSS Nesting, `@layer` \| Customizable `<select>` (Chromium; Safari 27 announced) \|
15	\| `@scope` (newly Baseline Dec 2025) \| `@function`, `if()` (Chromium-only) \|
16	\| `@property` (typed custom props) \| `sibling-index()`, `sibling-count()` (no Firefox) \|
17	\| `oklch()`, `color-mix()`, `light-dark()`, relative color \| Typed `attr()` beyond `content` (Chromium-only) \|
18	\| `@starting-style`, `transition-behavior: allow-discrete` \| Cross-document view transitions (no Firefox) \|
19	\| View transitions — same-document (newly Baseline Oct 2025) \| `interpolate-size`, `calc-size()` (Chromium-only) \|
20	\| Anchor positioning (newly Baseline Jan 2026) \| `popover="hint"`, `interestfor` (Chromium-only) \|
21	\| Popover API, `<dialog>`, invoker commands (newly Baseline Dec 2025) \| `text-wrap: pretty`, `text-box` (no Firefox) \|
22	\| `field-sizing: content` (newly Baseline Jun 2026) \| `reading-flow` (Chromium-only) \|
23	\| `text-wrap: balance`, `linear()` easing \| `closedby` on `<dialog>` (no Safari) \|
24	\| Logical properties, `::details-content` \| Grid Lanes / masonry (Safari 26.4 only; flags elsewhere) \|
25	\| \| `random()` (Safari 26.2+ only), `@mixin` (no browser yet) \|
26
27	## CRITICAL: The Modern Cascade
28
29	Understanding how styles resolve is the single most important concept in CSS. The additions of `@layer` and `@scope` fundamentally changed the cascade algorithm.
30
31	```
32	Style Resolution Order (highest priority wins):
33	┌─────────────────────────────────────────────────┐
34	│ 1. Transitions (active transition wins) │
35	│ 2. !important (user-agent > user > author; │
36	│ layer order INVERTS under !important) │
37	│ 3. Unlayered author styles (beat ALL layers) │
38	│ 4. @layer order (later layer > earlier layer) │
39	│ 5. Specificity (ID > class > element) │
40	│ 6. @scope proximity (closer root wins) │
41	│ 7. Source order (later > earlier) │
42	└─────────────────────────────────────────────────┘
43
44	Unlayered > Last layer > ... > First layer
45	(utilities) (reset)
46	```
47
48	Cascade layers (`@layer`) and scope proximity (`@scope`) are now more powerful than selector specificity. Define your layer order once (`@layer reset, base, components, utilities;`) and specificity wars disappear. Unlayered styles always beat layered styles — use this for overrides.
49
50	## Quick Decision Trees
51
52	### "How do I lay this out?"
53
54	```
55	Layout approach?
56	├─ 2D grid (rows + columns) → CSS Grid
57	│ ├─ Children must align across → Grid + Subgrid
58	│ └─ Waterfall / masonry → display: grid-lanes (not yet cross-browser)
59	├─ 1D row OR column → Flexbox
60	├─ Component adapts to container → Container Query + Grid/Flex
61	├─ Viewport-based responsiveness → @media range syntax
62	└─ Element sized to content → fit-content / min-content / stretch
63	```
64
65	### "How do I style this state?"
66
67	```
68	Style based on what?
69	├─ Child/descendant presence → :has()
70	├─ Container size → @container (inline-size)
71	├─ Container custom property → @container style()
72	├─ Scroll position (stuck/snapped) → scroll-state() query
73	├─ Element's own custom property → if(style(...))
74	├─ Browser feature support → @supports
75	├─ User preference (motion/color) → @media (prefers-*)
76	└─ Multiple selectors efficiently → :is() / :where()
77	```
78
79	### "How do

People who liked this also viewed

6 picks

Type