Skills
.Work. You
Rest

css-features

Community

Use modern CSS: oklch, queries, :has()

Design & Creative#css#oklch#container queries#cascade layers#relative color syntax#selectors :has()
AuthorTheNordicOne
Version1.0.0
Installs0

System Documentation

What problem does it solve?

It prevents inconsistent or fragile styling by guiding you to use modern, interoperable CSS features when designing color systems and responsive component layouts.

Core Features & Use Cases

  • OKLCH color tokens: Build your theme around oklch() and relative color syntax for predictable adjustments to lightness, chroma, and hue.
  • Container queries: Prefer component-scoped responsiveness with container-type: inline-size and container query units instead of global media-query breakpoints.
  • Modern selectors and layout polish: Use :has() for parent/ancestor styling based on child state and apply small typographic improvements like text-wrap: balance/pretty.

Quick Start

Update your .scss or .css files to define colors as oklch CSS variables, switch component responsiveness to container queries, and use :has() and @layer where they improve selector logic and cascade control.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: css-features
Download link: https://github.com/TheNordicOne/ngx-formbar/archive/main.zip#css-features

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.