good-css: Modern CSS Techniques and Best Practices for Agents and Developers

LinkResource

good-css is a curated reference of modern CSS techniques collected from web experts. Designed for both developers and AI coding agents, it focuses on standard, framework-agnostic CSS that prioritises native browser capabilities over complex media query ladders or JavaScript dependencies.

Key points

  1. A modern CSS reset incorporates properties like 'interpolate-size: allow-keywords', 'scrollbar-gutter: stable', 'text-wrap: pretty/balance', and 'min-width: 0'.
  2. Consistent use of logical properties (such as 'padding-inline' and 'inset-block-start') instead of physical directions simplifies RTL localisation.
  3. OKLCH color space and 'color-mix()' ensure perceptual consistency and prevent hue shifts during tints and shades.
  4. Single-token theming using 'light-dark()' and 'color-scheme' eliminates redundant duplicate variable declarations across media queries.
  5. Fluid scaling for spacing and typography using 'clamp()' with 'rem + vw' combinations replaces brittle ladders of responsive breakpoint overrides.

Why it matters

Modern CSS features replace many legacy hacks, polyfills, and redundant media queries. good-css codifies these modern defaults into a concise reference and agent skill, preventing regressions and out-of-date patterns when generating or writing CSS.

Analysis

The guide's philosophy is clear: a single adaptive declaration beats multiple breakpoints, and native CSS features beat scripting. By systematically documenting rationale, edge cases (such as avoiding bare 'vw' in clamp() to preserve user font settings or using 'none' for gray hues in OKLCH), and browser compatibility, good-css serves as a reliable blueprint for contemporary web frontends.

Mentioned links

Found in

Summary generated by AI (Gemini 3.8 Flash, 8 October 2026). It may contain errors – the original source is authoritative.

Related entries

Similar in content, found by the AI search.

  • X post:Vojta Holik

    good-css: 47 Modern CSS Techniques for Coding Agents

    Vojta Holik introduced good-css, an agent-focused reference guide featuring 47 modern CSS techniques. The resource aims to steer AI coding agents away from legacy workarounds and ensure they default to native features like :has(), subgrid, and anchor positioning.

    374bookmarks27.3kviews

    AI & LLMs· Resource

  • Link:Jakub Krehel

    Skills: Agent-Based UI and UX Optimisation Toolkit

    Jakub Krehel introduces a collection of agent skills designed to help developers refine user interfaces across typography, OKLCH colours, accessibility, layout, and UX writing.

    AI & LLMs· Tool

  • Link:Tailwind Labs

    ui.sh: AI Agent Skills for Interface Builders

    The creators of Tailwind CSS and Refactoring UI have introduced ui.sh, a collection of task-oriented prompts and workflows designed to help AI agents build high-quality user interfaces.

    AI & LLMs· Tool

  • Link:Impeccable AI

    Impeccable: Design Vocabulary and Anti-Slop System for Coding Agents

    Impeccable is a design skill and plugin for AI coding agents such as Claude and Cursor. It provides models with a shared design vocabulary, detects common AI visual defaults, and integrates existing design systems directly into code.

    AI & LLMs· Tool

  • Link:Resend

    Resend Publishes Design System Guidelines and Agent Skill

    Resend has documented its design and brand guidelines in a machine-readable format, packaging the specifications as an installable Agent Skill alongside a web reference. The guide defines typography, colours, logo constraints, and core design principles.

    Web development· Resource

Back to the knowledge base

Let's talk about your project

Get in touch

Locations

  • Mattersburg
    Johann Nepomuk Bergerstraße 7/2/14
    7210 Mattersburg, Austria
  • Vienna
    Ungargasse 64-66/3/404
    1030 Wien, Austria

Parts of this content were created with the assistance of AI.