good-css: 47 moderne CSS-Techniken für Coding-Agents

X-PostVojta HolikSammlung

Vojta Holik hat good-css vorgestellt, eine kuratierte Sammlung moderner CSS-Techniken, die speziell für KI-gestützte Coding-Agents aufbereitet wurde. Ziel ist es, Agents dazu zu bringen, moderne Standard-CSS-Features wie :has(), Subgrid oder Anchor Positioning anstelle von Workarounds und JavaScript zu verwenden.

Das Wichtigste

  1. Agenten-optimiert: Die Website erreicht einen Score von 100/100 auf is-agentic und kann per URL oder als Skill via 'npx skills@latest add vojtaholik/good-css' direkt in Workflows eingebunden werden.
  2. Kein Framework: Alle 47 Techniken basieren auf standardisierten CSS-Eigenschaften und -Werten, wodurch sie in nativem CSS, Tailwind, StyleX oder statischen HTML-Dateien funktionieren.
  3. Moderne CSS-Features im Fokus: Beinhaltet Breakout Grids, :has(), Subgrid, Container Queries, Anchor Positioning, View Transitions und fluide Typografie mit pow().
  4. Kuratierter moderner Reset: Enthält Voreinstellungen für interpolate-size, scrollbar-gutter: stable, text-wrap: balance/pretty, touch-action: manipulation sowie 100svh.
  5. Vorteil bei Figma-to-Code: Agents vermeiden hartcodierte Layouts und Magic Numbers zugunsten responsiver nativer Eigenschaften.

Warum das relevant ist

Coding-Agents greifen bei Stylesheets oft auf veraltete Muster, starre Breakpoints oder unnötiges JavaScript zurück, obwohl moderne Browser-Standards elegantere native Lösungen bieten. Die Sammlung standardisiert Best Practices direkt für LLMs.

Einordnung

Das Projekt adressiert eine Lücke im Prompting von Frontend-Agents: Modelle beherrschen moderne Spezifikationen rein theoretisch, bevorzugen im Standardverhalten jedoch häufig veraltete Trainingsmuster. Indem good-css auf überflüssige Abstraktionen und CSS-Klassen verzichtet und stattdessen konkrete Deklarationsmuster mitsamt Begründungen liefert, fungiert es als schlankes Regelwerk für agentenbasiertes Coden.

Original-Post

Vojta Holik

@vojta_holik · 7. Oktober 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 Antworten374 Lesezeichen27.291 Aufrufe

Auf X ansehen
Weitere Posts im 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.
Ausgewählte Antworten (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

Erwähnte Links

Links und Tools aus diesem Beitrag

Zusammenfassung von KI erstellt (Gemini 3.8 Flash, 8. Oktober 2026). Sie kann Fehler enthalten – maßgeblich ist die Originalquelle.

Ähnliche Einträge

Inhaltlich ähnlich, ermittelt über die KI-Suche.

  • Link:good-css.com

    good-css: Moderne CSS-Techniken und Best Practices für KI-Agenten und Entwickler

    good-css ist eine kuratierte Referenz moderner CSS-Techniken, die praxiserprobte Best Practices von Branchenexperten zusammenfasst. Die Sammlung richtet sich sowohl an Entwickler als auch an autonome KI-Coding-Agenten und setzt konsequent auf standardisiertes, framework-unabhängiges CSS ohne unnötige Breakpoints oder JavaScript-Abhängigkeiten.

    Webentwicklung· Sammlung

  • Link:Tailwind Labs

    ui.sh: KI-Agenten-Fähigkeiten für Interface-Entwickler

    Die Macher von Tailwind CSS und Refactoring UI haben mit ui.sh eine Sammlung aufgabenorientierter Prompts und Workflows für KI-Agenten vorgestellt. Das Toolkit soll Entwicklern helfen, hochwertige Benutzeroberflächen zu erstellen.

    KI & AI· Tool

  • X-Post:Adham Dannaway

    Design Skills for AI Agents: UX- und UI-Wissen für KI-Coding-Tools

    Adham Dannaway empfiehlt eine von Carlos Cuéllar erstellte Sammlung strukturierter Design-Skills für Coding-Agents wie Claude Code, Cursor und Codex. Das Repository liefert fundierte Heuristiken, Accessibility-Regeln nach WCAG 2.2 und Designsystem-Standards direkt in den Arbeitskontext der KI.

    100Lesezeichen5174Aufrufe

    KI & AI· Sammlung

  • Link:Jakub Krehel

    Skills: Agenten-Toolkit zur Optimierung von UI und UX

    Jakub Krehel stellt eine Sammlung spezialisierter Agent Skills vor, die Frontend-Teams bei Interface-Details wie Typografie, OKLCH-Farben, Barrierefreiheit, Layouts und Microcopy unterstützen.

    KI & AI· Tool

  • Repository:VoltAgent/awesome-design-md

    Awesome DESIGN.md: Designsystem-Vorgaben in Markdown für KI-Coding-Agents

    Das Repository awesome-design-md sammelt vorgefertigte DESIGN.md-Dateien bekannter Websites und Designsysteme. Diese Markdown-Dateien dienen KI-Coding-Agenten als strukturierte Leitlinie, um visuell konsistente Benutzeroberflächen ohne zusätzliche Konvertierungswerkzeuge zu erstellen.

    118.636Sterne

    KI & AI· Sammlung

Zurück zur Wissensbasis

Sprechen wir über Ihr Projekt.

Kontakt

Standorte

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

Ein Teil von diesem Inhalt wurde mit KI gemacht.