agentsclimarketplace
Sign in

Css cascade

Skill Amey-Thakur/AI-SKILLS/skills/css-styling/css-cascade

Manage specificity with layers, :where, and low-specificity selectors so overrides stay predictable. Use when styles fight each other, !important spreads, or you are setting selector conventions for a codebase.From its SKILL.md

Install
npx -y skills add Amey-Thakur/AI-SKILLS --skill css-cascade

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

  • 4 stars4 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

2.4 KB, 512 tokens by cl100k_base, as published. Nobody here has run it

CSS cascade

Every "CSS is broken" bug is the cascade working exactly as specified. Win by keeping specificity low and flat, so source order and layers decide, and by knowing the resolution order cold.

Method

  1. Know the order that decides. Importance, then origin, then cascade layer, then specificity, then source order. Inline styles and !important invert layer logic; a style attribute beats any selector, and !important in an earlier layer beats later layers.
  2. Structure with @layer. Declare once, in order of increasing power: @layer reset, base, components, utilities;. Anything unlayered beats all layers, so put third-party CSS into a layer (@import url(lib.css) layer(vendor)) to cap its power forever.
  3. Keep component selectors at one class. .card-title, not .card .header h2. Descendant chains encode DOM structure into specificity and make every future override a war. One class deep means any later rule with one class can override cleanly.
  4. Erase specificity where you need reach. :where(.theme-dark a) has zero specificity: perfect for defaults meant to be overridden. :is() takes the specificity of its strongest argument; use it for brevity, :where() for humility.
  5. Reserve !important for utilities and a11y overrides. A utility like .visually-hidden may claim it by design. Anywhere else it is a confession that specificity got away; refactor the competing selector instead of escalating.
  6. Debug from the computed pane. Devtools shows the winning rule and every loser struck through, with layer attribution. Find who wins and why before writing a stronger selector; the fix is usually weakening the winner, not strengthening the loser.

Boundaries

  • Inherited properties (color, font) reaching a child is inheritance, not the cascade; inherit/initial/revert-layer are the levers there.
  • Shadow DOM isolates styles by design; piercing it is a component API conversation (custom properties, parts), not a selector trick.
  • Custom properties resolve at use time, not declaration time; a variable override follows the same cascade rules as any declaration.

What ships with it

Read from the repository

Just SKILL.md. No reference files, no scripts.

Gives 0 of the 12 instructions most css styling skills give in 512 tokens

Counted across 512 of the 512 authors here whose files we hold, read 2026-09-06

  • Animate only transform and opacityin 32 of 512, across 30 files
  • Respect prefers-reduced-motionin 21 of 512
  • Support reduced motion preferencesin 16 of 512, across 6 files
  • Use Tailwind CSS for stylingin 14 of 512, across 13 files
  • Specify AnimatePresence mode explicitlyin 12 of 512, across 2 files
  • Set initial states explicitlyin 12 of 512, across 2 files
  • Use semantic HTML elementsin 11 of 512, across 10 files
  • Use oklch for color valuesin 11 of 512, across 10 files
  • Honor prefers-reduced-motion in animationsin 10 of 512
  • Provide a reduced-motion fallback for animationsin 10 of 512, across 9 files
  • Use property names in camelCasein 9 of 512, across 4 files
  • Ensure UI animations stay under 300msin 9 of 512, across 6 files

Said here and by no other author read

  • Keep specificity low and flat
  • Structure styles with cascade layers
  • Keep component selectors at one class
  • Use where for zero specificity
  • Debug from the computed pane

Grouped from the skills themselves: near-identical wordings counted once, and counted by distinct author, so one author publishing three of these counts once. Length counted with cl100k_base; the agent that loads this file may tokenize it differently.

Keep looking

Skills are one crate of 325,949. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.