good-css: 47 Modern CSS Techniques for Coding Agents

X postVojta HolikResource

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.

Key points

  1. Agent-friendly architecture: The site scores 100/100 on is-agentic and can be read directly via URL or installed as a persistent agent skill with 'npx skills@latest add vojtaholik/good-css'.
  2. Framework agnostic: Every solution consists of plain CSS properties and values, making it directly applicable to vanilla CSS, Tailwind, StyleX, or plain HTML files.
  3. Key modern features: Highlights breakout grids, :has(), subgrid, container queries, anchor positioning, view transitions, and fluid typography built with pow().
  4. Modern baseline reset: Implements rules for interpolate-size, scrollbar-gutter: stable, text-wrap: balance/pretty, touch-action: manipulation, and 100svh.
  5. Improves Figma-to-code conversions: Discourages agents from hard-coding frames and magic numbers, promoting self-adapting responsive layouts.

Why it matters

Coding agents frequently fall back on legacy CSS hacks, repetitive media queries, or JavaScript when generating UI code. good-css provides explicit architectural guidance to ensure models choose modern native standards first.

Analysis

The project directly targets prompt-level conditioning for AI development agents. Rather than introducing a custom class naming system or library dependency, good-css provides canonical rules explaining why specific modern properties work. This approach allows agents to produce cleaner, more maintainable code across any modern tech stack without adding project dependencies.

Original post

Vojta Holik

@vojta_holik · 7 October 2026

The site scores 100/100 on is-agentic, so you can just point your agent at it. No install, no setup. "Read t.co/qqfBbHexkM before you write CSS."

196 likes3 replies374 bookmarks27.3k views

View on X
More posts in the thread (7)
  1. It's not a framework. Every technique is plain properties and values, so your agent writes it in whatever you use: one static HTML file, Tailwind, StyleX or vanilla CSS. No package, no class names to adopt.
  2. What changes in the page you get back: - Breakout grids - :has() - anchor positioning - subgrid - container queries - view transitions - a fluid type scale built with pow() All plain properties and values, so your agent writes them in whatever you use: a static HTML file,
  3. Your coding agent knows :has(), subgrid and anchor positioning. It just rarely reaches for them. I built good-css so it does: 47 modern CSS techniques your agent uses first. t.co/qziSDAVYVM
  4. t.co/qqfBbHexkM Try it on the next page you ask your agent for. :)
  5. It's also a skill, so your agent uses it on every project without being asked: npx skills@latest add vojtaholik/good-css
  6. Each technique runs on the site as a live specimen of its own code, so you can watch it work before your agent writes it. From experts, for agents.
  7. It's been great for Figma to code too. The agent stops hard-coding every frame and writes CSS that scales: one set of tokens, one fluid type scale, layouts that adapt on their own. Fewer magic numbers, far less to maintain when the design changes.
Selected replies (5)
  • @WebApoll @vojta_holik Woah thank you @vojta_holik 🎉🤠
  • @aghoniem_ @vojta_holik Much needed ty!!
  • @trevorlasn @vojta_holik Running this tomorrow
  • @bat8cat @vojta_holik link to github on your website does not work t.co/29RH1oWuml
  • @terkelg @vojta_holik This is so good - nothing beats modern CSS

Mentioned links

Links and tools from this entry

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.

  • Link:good-css.com

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

    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.

    Web development· Resource

  • 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

  • X post:Adham Dannaway

    Design Skills for AI Agents: Equipping Coding Agents with UX and UI Knowledge

    Adham Dannaway highlights 'Design Skills for AI Agents', an open collection developed by Carlos Cuéllar. The repository provides structured design heuristics, WCAG 2.2 accessibility rules, and design system frameworks for tools such as Claude Code, Cursor, and Codex.

    100bookmarks5.2kviews

    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

  • Repository:VoltAgent/awesome-design-md

    Awesome DESIGN.md: Markdown Design System Profiles for AI Coding Agents

    The awesome-design-md repository curates ready-to-use DESIGN.md files derived from well-known brand design systems. These plain-text Markdown files provide AI coding agents with design tokens, patterns, and style rules for generating visually coherent UIs.

    118.6kstars

    AI & LLMs· 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.