modern-css

SKILL.md

Pure native CSS for building interfaces — no preprocessors, no frameworks.

| CSS Grid, Subgrid, Flexbox | @function, if() (Chrome-only) | | Container Queries (size + style) | Customizable (Chrome-only) | | :has(), :is(), :where() | Scroll-state queries (Chrome-only) | | CSS Nesting, @layer, @scope | sibling-index(), sibling-count() | | @property (typed custom props) | ::scroll-button(), ::scroll-marker |

| oklch(), color-mix(), light-dark() | Typed attr() beyond content | | Relative color syntax | field-sizing: content | | @starting-style, transition-behavior | interpolate-size (Chrome-only) | | Scroll-driven animations | Grid Lanes / masonry (experimental) | | Anchor positioning, Popover API | random() (Safari TP only) |

Wenden Sie es proaktiv an, wenn Sie Designsysteme, Komponentenbibliotheken oder andere Frontend-Anwendungen erstellen. Triggert auf CSS-Raster, Subgrid, Flexbox, Containerabfragen, :has(), @layer, @scope, CSS-Verschachtelung, @property, @function, if(), oklch, Farbmischung, Hell-Dunkel, relative Farbe, @starting-style, scrollgesteuerte Animationen, Ansichtsübergänge, Ankerpositionierung, Popover, anpassbare Auswahl, Inhaltssichtbarkeit, logische Eigenschaften, Textumbruch, Interpolationsgröße, Klammer, Feldgröße, modernes CSS, CSS Architektur, Responsive Design, Dark Mode, Theming, Design-Tokens, Kaskadenebenen. Verwenden Sie es, wenn Sie CSS für ein beliebiges Webprojekt schreiben, Layoutansätze auswählen, reaktionsfähige Komponenten erstellen, den Dunkelmodus oder Theming implementieren, Animationen oder Übergänge erstellen, Formularelemente formatieren oder ältere Stylesheets modernisieren. Moderne CSS-Funktionen und Best Practices zum Erstellen von Schnittstellen mit reinem nativem CSS. Quelle: ccheney/robust-skills.

Original anzeigen