{
"event": "PreToolUse",
"tool_name": "mcp__mcp-docs__docs_create",
"tool_input": {
"title": "UI Components",
"slug": "components",
"parent_id": 144,
"description": "Wiederverwendbare UI-Komponenten Referenz",
"status": "published",
"content": "<nav class=\"breadcrumb\">\n <a href=\"\/docs\">Dokumentation<\/a> »\n <a href=\"\/docs\/frontend\">Frontend<\/a> »\n Components\n<\/nav>\n\n<h1>UI Components<\/h1>\n<p class=\"doc-meta\"><strong>Erstellt:<\/strong> 2025-12-27 | <strong>Aktualisiert:<\/strong> 2025-12-27<\/p>\n\n<p>Wiederverwendbare UI-Komponenten aus <code>admin.css<\/code>.<\/p>\n\n<hr>\n\n<h2>Buttons<\/h2>\n\n<h3>Basis<\/h3>\n<pre><code><button class=\"btn btn--primary\">Primary<\/button>\n<button class=\"btn btn--secondary\">Secondary<\/button>\n<button class=\"btn btn--success\">Success<\/button>\n<button class=\"btn btn--danger\">Danger<\/button>\n<button class=\"btn btn--info\">Info<\/button>\n<button class=\"btn btn--light\">Light<\/button><\/code><\/pre>\n\n<h3>Größen<\/h3>\n<pre><code><button class=\"btn btn--primary btn--small\">Klein<\/button>\n<button class=\"btn btn--primary\">Normal<\/button>\n<button class=\"btn btn--primary btn--large\">Groß<\/button><\/code><\/pre>\n\n<h3>Block (volle Breite)<\/h3>\n<pre><code><button class=\"btn btn--primary btn--block\">Volle Breite<\/button><\/code><\/pre>\n\n<hr>\n\n<h2>Badges<\/h2>\n\n<h3>Status-Badges<\/h3>\n<pre><code><span class=\"badge badge--pending\">Pending<\/span>\n<span class=\"badge badge--in_progress\">In Progress<\/span>\n<span class=\"badge badge--completed\">Completed<\/span>\n<span class=\"badge badge--failed\">Failed<\/span>\n<span class=\"badge badge--cancelled\">Cancelled<\/span><\/code><\/pre>\n\n<h3>Andere Badges<\/h3>\n<pre><code><span class=\"badge badge--draft\">Entwurf<\/span>\n<span class=\"badge badge--published\">Veröffentlicht<\/span>\n<span class=\"badge badge--success\">Erfolg<\/span>\n<span class=\"badge badge--warning\">Warnung<\/span>\n<span class=\"badge badge--primary\">Primary<\/span><\/code><\/pre>\n\n<hr>\n\n<h2>Alerts<\/h2>\n\n<pre><code><div class=\"alert alert--success\">Erfolgreich gespeichert.<\/div>\n<div class=\"alert alert--warning\">Achtung: Ungespeicherte Änderungen.<\/div>\n<div class=\"alert alert--error\">Fehler beim Speichern.<\/div>\n<div class=\"alert alert--info\">Information verfügbar.<\/div><\/code><\/pre>\n\n<hr>\n\n<h2>Forms<\/h2>\n\n<h3>Basis-Form<\/h3>\n<pre><code><form class=\"form\">\n <div class=\"form-group\">\n <label class=\"form-group__label\">Name<\/label>\n <input type=\"text\" class=\"form-input\">\n <span class=\"form-group__hint\">Hilfetext<\/span>\n <\/div>\n \n <div class=\"form-group\">\n <label class=\"form-group__label\">Beschreibung<\/label>\n <textarea class=\"form-textarea\"><\/textarea>\n <\/div>\n \n <div class=\"form-group\">\n <label class=\"form-group__label\">Status<\/label>\n <select class=\"form-select\">\n <option>Aktiv<\/option>\n <option>Inaktiv<\/option>\n <\/select>\n <\/div>\n \n <div class=\"form-actions\">\n <button type=\"submit\" class=\"btn btn--primary\">Speichern<\/button>\n <button type=\"button\" class=\"btn btn--light\">Abbrechen<\/button>\n <\/div>\n<\/form><\/code><\/pre>\n\n<h3>Form-Row (2 Spalten)<\/h3>\n<pre><code><div class=\"form-row\">\n <div class=\"form-group\">\n <label>Vorname<\/label>\n <input class=\"form-input\">\n <\/div>\n <div class=\"form-group\">\n <label>Nachname<\/label>\n <input class=\"form-input\">\n <\/div>\n<\/div><\/code><\/pre>\n\n<hr>\n\n<h2>Cards<\/h2>\n\n<pre><code><div class=\"card\">\n <div class=\"card__header\">\n <h2>Titel<\/h2>\n <span class=\"badge badge--success\">Aktiv<\/span>\n <\/div>\n <p>Card-Inhalt hier...<\/p>\n<\/div><\/code><\/pre>\n\n<hr>\n\n<h2>Stats<\/h2>\n\n<pre><code><div class=\"stats-grid\">\n <div class=\"stat-card\">\n <span class=\"stat-card__value\">42<\/span>\n <span class=\"stat-card__label\">Dokumente<\/span>\n <\/div>\n <div class=\"stat-card stat-card--success\">\n <span class=\"stat-card__value\">98%<\/span>\n <span class=\"stat-card__label\">Erfolgsrate<\/span>\n <\/div>\n <div class=\"stat-card stat-card--warning\">\n <span class=\"stat-card__value\">3<\/span>\n <span class=\"stat-card__label\">Pending<\/span>\n <\/div>\n<\/div><\/code><\/pre>\n\n<hr>\n\n<h2>Lists<\/h2>\n\n<pre><code><div class=\"list\">\n <div class=\"list-item\">\n <div class=\"list-item__main\">\n <h3 class=\"list-item__title\">\n <a href=\"#\">Item Titel<\/a>\n <\/h3>\n <div class=\"list-item__meta\">\n <span>Erstellt: 2025-12-27<\/span>\n <span>5 Einträge<\/span>\n <\/div>\n <\/div>\n <span class=\"badge badge--completed\">Fertig<\/span>\n <\/div>\n<\/div><\/code><\/pre>\n\n<hr>\n\n<h2>Empty State<\/h2>\n\n<pre><code><div class=\"empty-state\">\n <p>Keine Einträge vorhanden.<\/p>\n <a href=\"\/new\" class=\"btn btn--primary\">Erstellen<\/a>\n<\/div>\n\n<!-- Klein -->\n<div class=\"empty-state empty-state--small\">\n <p>Keine Daten.<\/p>\n<\/div><\/code><\/pre>\n\n<hr>\n\n<h2>Pagination<\/h2>\n\n<pre><code><div class=\"pagination\">\n <span class=\"pagination__info\">1-10 von 42<\/span>\n <div class=\"pagination__buttons\">\n <button class=\"pagination__btn\" disabled>&laquo;<\/button>\n <button class=\"pagination__btn pagination__btn--active\">1<\/button>\n <button class=\"pagination__btn\">2<\/button>\n <button class=\"pagination__btn\">3<\/button>\n <button class=\"pagination__btn\">&raquo;<\/button>\n <\/div>\n<\/div><\/code><\/pre>\n\n<hr>\n\n<h2>Action Bar<\/h2>\n\n<pre><code><div class=\"action-bar\">\n <button class=\"btn btn--primary\">Speichern<\/button>\n <button class=\"btn btn--danger\">Löschen<\/button>\n <a href=\"\/back\" class=\"btn btn--light\">Zurück<\/a>\n<\/div><\/code><\/pre>\n\n<hr>\n\n<h2>HTMX-Integration<\/h2>\n\n<h3>Loading Indicator<\/h3>\n<pre><code><button class=\"btn btn--primary\">\n <span class=\"htmx-content\">Speichern<\/span>\n <span class=\"htmx-indicator\">Lade...<\/span>\n<\/button><\/code><\/pre>\n\n<h3>HTMX Messages Container<\/h3>\n<pre><code><div class=\"htmx-messages\" id=\"messages\"><\/div><\/code><\/pre>\n\n<hr>\n\n<h2>Layout-Helper<\/h2>\n\n<h3>Page Container<\/h3>\n<pre><code><div class=\"page-container\">...<\/div>\n<div class=\"page-container page-container--narrow\">...<\/div>\n<div class=\"page-container page-container--wide\">...<\/div><\/code><\/pre>\n\n<h3>Grid Layouts<\/h3>\n<pre><code><div class=\"grid-2\">\n <div>Hauptinhalt<\/div>\n <div>Sidebar (320px)<\/div>\n<\/div>\n\n<div class=\"grid-3\">\n <div>Spalte 1<\/div>\n <div>Spalte 2<\/div>\n <div>Spalte 3<\/div>\n<\/div>\n\n<div class=\"grid-auto\">\n <!-- Auto-fit mit min 140px -->\n<\/div><\/code><\/pre>\n\n<h2>Verwandte Themen<\/h2>\n<ul>\n <li><a href=\"\/docs\/frontend\/css\">CSS Architektur<\/a> - Design Tokens<\/li>\n <li><a href=\"\/docs\/frontend\/htmx\">HTMX<\/a> - Interaktivität<\/li>\n <li><a href=\"\/docs\/frontend\/htmx\/patterns\">HTMX Patterns<\/a> - Code-Beispiele<\/li>\n<\/ul>"
}
}
{
"tool_response": [
{
"type": "text",
"text": "{\n \"success\": true,\n \"doc\": {\n \"id\": 151,\n \"parent_id\": 144,\n \"slug\": \"components\",\n \"path\": \"\/frontend\/components\",\n \"title\": \"UI Components\",\n \"description\": \"Wiederverwendbare UI-Komponenten Referenz\",\n \"content\": \"<nav class=\\\"breadcrumb\\\">\\n <a href=\\\"\/docs\\\">Dokumentation<\/a> »\\n <a href=\\\"\/docs\/frontend\\\">Frontend<\/a> »\\n Components\\n<\/nav>\\n\\n<h1>UI Components<\/h1>\\n<p class=\\\"doc-meta\\\"><strong>Erstellt:<\/strong> 2025-12-27 | <strong>Aktualisiert:<\/strong> 2025-12-27<\/p>\\n\\n<p>Wiederverwendbare UI-Komponenten aus <code>admin.css<\/code>.<\/p>\\n\\n<hr>\\n\\n<h2>Buttons<\/h2>\\n\\n<h3>Basis<\/h3>\\n<pre><code><button class=\\\"btn btn--primary\\\">Primary<\/button>\\n<button class=\\\"btn btn--secondary\\\">Secondary<\/button>\\n<button class=\\\"btn btn--success\\\">Success<\/button>\\n<button class=\\\"btn btn--danger\\\">Danger<\/button>\\n<button class=\\\"btn btn--info\\\">Info<\/button>\\n<button class=\\\"btn btn--light\\\">Light<\/button><\/code><\/pre>\\n\\n<h3>Größen<\/h3>\\n<pre><code><button class=\\\"btn btn--primary btn--small\\\">Klein<\/button>\\n<button class=\\\"btn btn--primary\\\">Normal<\/button>\\n<button class=\\\"btn btn--primary btn--large\\\">Groß<\/button><\/code><\/pre>\\n\\n<h3>Block (volle Breite)<\/h3>\\n<pre><code><button class=\\\"btn btn--primary btn--block\\\">Volle Breite<\/button><\/code><\/pre>\\n\\n<hr>\\n\\n<h2>Badges<\/h2>\\n\\n<h3>Status-Badges<\/h3>\\n<pre><code><span class=\\\"badge badge--pending\\\">Pending<\/span>\\n<span class=\\\"badge badge--in_progress\\\">In Progress<\/span>\\n<span class=\\\"badge badge--completed\\\">Completed<\/span>\\n<span class=\\\"badge badge--failed\\\">Failed<\/span>\\n<span class=\\\"badge badge--cancelled\\\">Cancelled<\/span><\/code><\/pre>\\n\\n<h3>Andere Badges<\/h3>\\n<pre><code><span class=\\\"badge badge--draft\\\">Entwurf<\/span>\\n<span class=\\\"badge badge--published\\\">Veröffentlicht<\/span>\\n<span class=\\\"badge badge--success\\\">Erfolg<\/span>\\n<span class=\\\"badge badge--warning\\\">Warnung<\/span>\\n<span class=\\\"badge badge--primary\\\">Primary<\/span><\/code><\/pre>\\n\\n<hr>\\n\\n<h2>Alerts<\/h2>\\n\\n<pre><code><div class=\\\"alert alert--success\\\">Erfolgreich gespeichert.<\/div>\\n<div class=\\\"alert alert--warning\\\">Achtung: Ungespeicherte Änderungen.<\/div>\\n<div class=\\\"alert alert--error\\\">Fehler beim Speichern.<\/div>\\n<div class=\\\"alert alert--info\\\">Information verfügbar.<\/div><\/code><\/pre>\\n\\n<hr>\\n\\n<h2>Forms<\/h2>\\n\\n<h3>Basis-Form<\/h3>\\n<pre><code><form class=\\\"form\\\">\\n <div class=\\\"form-group\\\">\\n <label class=\\\"form-group__label\\\">Name<\/label>\\n <input type=\\\"text\\\" class=\\\"form-input\\\">\\n <span class=\\\"form-group__hint\\\">Hilfetext<\/span>\\n <\/div>\\n \\n <div class=\\\"form-group\\\">\\n <label class=\\\"form-group__label\\\">Beschreibung<\/label>\\n <textarea class=\\\"form-textarea\\\"><\/textarea>\\n <\/div>\\n \\n <div class=\\\"form-group\\\">\\n <label class=\\\"form-group__label\\\">Status<\/label>\\n <select class=\\\"form-select\\\">\\n <option>Aktiv<\/option>\\n <option>Inaktiv<\/option>\\n <\/select>\\n <\/div>\\n \\n <div class=\\\"form-actions\\\">\\n <button type=\\\"submit\\\" class=\\\"btn btn--primary\\\">Speichern<\/button>\\n <button type=\\\"button\\\" class=\\\"btn btn--light\\\">Abbrechen<\/button>\\n <\/div>\\n<\/form><\/code><\/pre>\\n\\n<h3>Form-Row (2 Spalten)<\/h3>\\n<pre><code><div class=\\\"form-row\\\">\\n <div class=\\\"form-group\\\">\\n <label>Vorname<\/label>\\n <input class=\\\"form-input\\\">\\n <\/div>\\n <div class=\\\"form-group\\\">\\n <label>Nachname<\/label>\\n <input class=\\\"form-input\\\">\\n <\/div>\\n<\/div><\/code><\/pre>\\n\\n<hr>\\n\\n<h2>Cards<\/h2>\\n\\n<pre><code><div class=\\\"card\\\">\\n <div class=\\\"card__header\\\">\\n <h2>Titel<\/h2>\\n <span class=\\\"badge badge--success\\\">Aktiv<\/span>\\n <\/div>\\n <p>Card-Inhalt hier...<\/p>\\n<\/div><\/code><\/pre>\\n\\n<hr>\\n\\n<h2>Stats<\/h2>\\n\\n<pre><code><div class=\\\"stats-grid\\\">\\n <div class=\\\"stat-card\\\">\\n <span class=\\\"stat-card__value\\\">42<\/span>\\n <span class=\\\"stat-card__label\\\">Dokumente<\/span>\\n <\/div>\\n <div class=\\\"stat-card stat-card--success\\\">\\n <span class=\\\"stat-card__value\\\">98%<\/span>\\n <span class=\\\"stat-card__label\\\">Erfolgsrate<\/span>\\n <\/div>\\n <div class=\\\"stat-card stat-card--warning\\\">\\n <span class=\\\"stat-card__value\\\">3<\/span>\\n <span class=\\\"stat-card__label\\\">Pending<\/span>\\n <\/div>\\n<\/div><\/code><\/pre>\\n\\n<hr>\\n\\n<h2>Lists<\/h2>\\n\\n<pre><code><div class=\\\"list\\\">\\n <div class=\\\"list-item\\\">\\n <div class=\\\"list-item__main\\\">\\n <h3 class=\\\"list-item__title\\\">\\n <a href=\\\"#\\\">Item Titel<\/a>\\n <\/h3>\\n <div class=\\\"list-item__meta\\\">\\n <span>Erstellt: 2025-12-27<\/span>\\n <span>5 Einträge<\/span>\\n <\/div>\\n <\/div>\\n <span class=\\\"badge badge--completed\\\">Fertig<\/span>\\n <\/div>\\n<\/div><\/code><\/pre>\\n\\n<hr>\\n\\n<h2>Empty State<\/h2>\\n\\n<pre><code><div class=\\\"empty-state\\\">\\n <p>Keine Einträge vorhanden.<\/p>\\n <a href=\\\"\/new\\\" class=\\\"btn btn--primary\\\">Erstellen<\/a>\\n<\/div>\\n\\n<!-- Klein -->\\n<div class=\\\"empty-state empty-state--small\\\">\\n <p>Keine Daten.<\/p>\\n<\/div><\/code><\/pre>\\n\\n<hr>\\n\\n<h2>Pagination<\/h2>\\n\\n<pre><code><div class=\\\"pagination\\\">\\n <span class=\\\"pagination__info\\\">1-10 von 42<\/span>\\n <div class=\\\"pagination__buttons\\\">\\n <button class=\\\"pagination__btn\\\" disabled>&laquo;<\/button>\\n <button class=\\\"pagination__btn pagination__btn--active\\\">1<\/button>\\n <button class=\\\"pagination__btn\\\">2<\/button>\\n <button class=\\\"pagination__btn\\\">3<\/button>\\n <button class=\\\"pagination__btn\\\">&raquo;<\/button>\\n <\/div>\\n<\/div><\/code><\/pre>\\n\\n<hr>\\n\\n<h2>Action Bar<\/h2>\\n\\n<pre><code><div class=\\\"action-bar\\\">\\n <button class=\\\"btn btn--primary\\\">Speichern<\/button>\\n <button class=\\\"btn btn--danger\\\">Löschen<\/button>\\n <a href=\\\"\/back\\\" class=\\\"btn btn--light\\\">Zurück<\/a>\\n<\/div><\/code><\/pre>\\n\\n<hr>\\n\\n<h2>HTMX-Integration<\/h2>\\n\\n<h3>Loading Indicator<\/h3>\\n<pre><code><button class=\\\"btn btn--primary\\\">\\n <span class=\\\"htmx-content\\\">Speichern<\/span>\\n <span class=\\\"htmx-indicator\\\">Lade...<\/span>\\n<\/button><\/code><\/pre>\\n\\n<h3>HTMX Messages Container<\/h3>\\n<pre><code><div class=\\\"htmx-messages\\\" id=\\\"messages\\\"><\/div><\/code><\/pre>\\n\\n<hr>\\n\\n<h2>Layout-Helper<\/h2>\\n\\n<h3>Page Container<\/h3>\\n<pre><code><div class=\\\"page-container\\\">...<\/div>\\n<div class=\\\"page-container page-container--narrow\\\">...<\/div>\\n<div class=\\\"page-container page-container--wide\\\">...<\/div><\/code><\/pre>\\n\\n<h3>Grid Layouts<\/h3>\\n<pre><code><div class=\\\"grid-2\\\">\\n <div>Hauptinhalt<\/div>\\n <div>Sidebar (320px)<\/div>\\n<\/div>\\n\\n<div class=\\\"grid-3\\\">\\n <div>Spalte 1<\/div>\\n <div>Spalte 2<\/div>\\n <div>Spalte 3<\/div>\\n<\/div>\\n\\n<div class=\\\"grid-auto\\\">\\n <!-- Auto-fit mit min 140px -->\\n<\/div><\/code><\/pre>\\n\\n<h2>Verwandte Themen<\/h2>\\n<ul>\\n <li><a href=\\\"\/docs\/frontend\/css\\\">CSS Architektur<\/a> - Design Tokens<\/li>\\n <li><a href=\\\"\/docs\/frontend\/htmx\\\">HTMX<\/a> - Interaktivität<\/li>\\n <li><a href=\\\"\/docs\/frontend\/htmx\/patterns\\\">HTMX Patterns<\/a> - Code-Beispiele<\/li>\\n<\/ul>\",\n \"status\": \"published\",\n \"sort_order\": 0,\n \"depth\": 1,\n \"created_at\": \"2025-12-27T16:00:40\",\n \"updated_at\": \"2025-12-27T16:00:40\"\n },\n \"message\": \"Document 'UI Components' created with ID 151\"\n}"
}
]
}