Systra Tools changelog

• + categories
• + recipes

• + build_landing_page
• + find_section
• + restyle_component

description

Search and pull 500+ production-ready React + Tailwind sections and elements → Search and pull production-ready React + Tailwind sections and elements from a growing library

repository_url

https://github.com/roesmannamelie-alt/systra-tools-plugin → https://github.com/systra-tools/systra-tools-plugin

version

1.0.0 → 1.0.1

https://systra.tools/llms.txt

− > erreichbar über die Website und über MCP. 623 Komponenten in 37 Kategorien.− - Wie viele Bausteine gibt es? 623 Komponenten in 37 Kategorien, Stand 07.09.2026. Die größten Kategorien: heroes (79), elemente (77), features (38), interaktiv (34), gallery (24).− - list_categories: alle 37 Kategorien mit Namen und Anzahl.+ > erreichbar über die Website und über MCP. 645 Komponenten in 29 Kategorien.+ - Wie viele Bausteine gibt es? 645 Komponenten in 29 Kategorien, Stand 03.11.2026. Die größten Kategorien: heroes (83), buttons (61), typography (58), features (44), scroll-effects (30).+ - list_categories: alle 29 Kategorien mit Namen und Anzahl.+ - [Preise](https://systra.tools/pricing): kostenlos starten, Premium für 19 € im Monat, 179 € im Jahr oder einmalig 449 €, Agency-Lizenz für bis zu fünf Personen einmalig 1.490 €, alle Preise inklusive USt.+ - [Newsletter](https://systra.tools/newsletter): jeden Montag eine kostenlose Section für React und Tailwind per Mail, mit Double-Opt-in und Abmeldung mit einem Klick.+ - [Formulare validieren mit CSS statt mit einer Bibliothek](https://systra.tools/guides/form-validation-with-css-user-invalid): Wie validiert man ein Formular ohne Bibliothek? :invalid trifft ein leeres Pflichtfeld schon beim Laden, :user-invalid erst nach Eingabe und Verlassen des Feldes oder nach einem Absendeversuch, und prüft danach bei jedem Tastendruck nach. Die Pseudo-Klasse läuft seit Ende 2023 in allen Engines und gilt seit dem 2. Mai 2026 als weithin verfügbar. Die Meldung gehört sicht

https://systra.tools/llms.txt

− - Wie kommt der Key in die Konfiguration? Als Authorization-Header im Format Bearer <key>, nie als Teil der URL.− Endpunkt: https://systra.tools/api/mcp (MCP über HTTP, Bearer-Token im Authorization-Header)− - [MCP-Zugang](https://systra.tools/mcp): Einrichtung für Claude Code, Cursor, VS Code und Windsurf, dazu der AGENTS.md-Block.+ - Gibt es Systra Tools in Claude? Ja, als Connector im offiziellen Claude-Verzeichnis: https://claude.ai/directory/systra-tools. Man meldet sich dort mit dem Systra-Konto an (OAuth), ein Key muss nicht kopiert werden. Für Claude Code gibt es zusätzlich ein Plugin mit Regeln und Skills: `/plugin marketplace add systra-tools/systra-tools-plugin`, danach `/plugin install systra-tools@systra`.+ - Wie kommt der Key in die Konfiguration? Als Authorization-Header im Format Bearer <key>, nie als Teil der URL. In den Claude-Apps entfällt der Key, dort läuft die Anmeldung über OAuth.+ Endpunkt: https://systra.tools/api/mcp (MCP über HTTP, Bearer-Token im Authorization-Header oder Anmeldung per OAuth)+ Im Claude-Verzeichnis: https://claude.ai/directory/systra-tools+ - [Kostenlose Komponenten](https://systra.tools/free-components): alles, was ohne Premium mit vollem Quelltext offen ist, je Kategorie die ersten sechs und drei Ganzseiten-Vorlagen.+ - [MCP-Zugang](https://systra.tools/mcp): Einrichtung für Claude, Claude Code, Cursor, VS Code und Windsurf, dazu der AGENTS.md-Block.+ - [Eine Komponenten-Bibliothek mit Claude verbinden](https://systra.tools/guides/connect-component-library-to-claude): Wie verbindet man eine Komponenten-Bibliothek mit Claude? Über den Eintrag im Connector-Verzeichnis, das laut Anthropic claude.ai, Desktop, Mobil, Cowork und Claude Code zugleich bedient, über einen Befehl in Claude Code oder über ein Plugin, das neben dem Server auch Fähigkeiten und Regeln mitbringt. In den Claude-Apps meldet man sich an, statt einen Schlüssel einzutragen. Curs+ - [Karussell ohne JavaScript mit scroll-snap und Scroll-Markern](https://systra.tools/guides/css-carousel-without-javascript): Wie baut man ein Karussell nur mit CSS? Ein Scroll-Container mit scroll-snap-type und scroll-snap-align übernimmt Wischen und Einrasten, scroll-snap-stop: always verhindert das Überspringen. Punkte und Pfeile entstehen mit scroll-marker-group und scroll-button ohne Markup, bisher nur in Chromium, deshalb als Zugabe über einer Fassung, die überall trägt.+ - [Farbskalen mit OKLCH und color-mix](https://systra.tools/guides/color-scales-with-oklch-and-color-mix): Warum OKLCH für Farbskalen? Das L ist wahrgenommene Helligkeit, zwei Farben mit gleichem L wirken gleich hell, in HSL nicht. Eine Skala hält den Farbton fest, führt L in gleichen Schritten und das Chroma im Bogen mit dem höchsten Wert in der Mitte. color-mix mischt in oklab, beides läuft seit 2023 in allen großen Browsern. Kontrast prüft man trotzdem gesondert.+ - [Seitenübergänge mit der View Transitions API](https://systra.tools/guides/page-transitions-with-view-transitions-api): Wie bekommt ein Seitenwechsel einen Übergang ohne JavaScript? Ein Block @view-transition mit navigation: auto in beiden Seiten, gleiche Herkunft vorausgesetzt. view-transition-name lässt ein einzelnes Element mitwandern und muss pro Seite einmalig sein. Firefox fehlt die Variante zwischen Dokumenten noch, nach vier Sekunden Ladezeit bricht sie ab.+ - [Dropdowns ohne JavaScript mit popover und Anchor Positioning](https://systra.tools/guides/dropdowns-without-javascript-popover-anchor): Wie baut man ein Dropdown nur mit HTML und CSS? Das popover-Attribut übernimmt oberste Ebene, Schließen per Klick daneben und Escape, Anchor Positioning hängt das Panel an seinen Knopf und klappt es am Rand um. Der Übergang braucht allow-discrete und @starting-style. Ein Popover ist nie modal, dafür bleibt dialog.

https://systra.tools/llms.txt

− - Gibt es Bilder dazu? Ja, über die Werkzeuge list_images und search_images, mit dauerhaft gültigen Adressen unter https://systra.tools/heros/.− - [Bilder](https://systra.tools/resources/images): mit KI erzeugte Bilder, Renderings und Texturen in siebzehn Alben, nach Motiv und Format durchsuchbar.+ - Gibt es Bilder dazu? Ja, über die Werkzeuge list_images und search_images, mit dauerhaft gültigen Adressen unter https://systra.tools/media/. Ohne Premium-Schlüssel sind es drei Bilder je Album.+ - [Bilder](https://systra.tools/resources/images): mit KI erzeugte Bilder, Renderings und Texturen in neunzehn Alben, nach Motiv und Format durchsuchbar.

https://systra.tools/llms.txt

− - [Bilder](https://systra.tools/resources/images): freie Fotos, Renderings und Texturen in sechzehn Alben, nach Motiv und Format durchsuchbar.+ - [Bilder](https://systra.tools/resources/images): mit KI erzeugte Bilder, Renderings und Texturen in siebzehn Alben, nach Motiv und Format durchsuchbar.