Eine minimalistische CSS-Philosophie und ein Skill-Set, das darauf ausgelegt ist, effiziente, widerstandsfähige Stile zu erstellen, indem native Browser-Funktionen und moderne logische Eigenschaften genutzt werden.
Installieren & Herunterladen
1. ClawHub CLI
Der schnellste Weg, einen Skill direkt aus der Registry zu installieren.
npx clawhub@latest install tiny-css
2. Manuelle Installation
Kopiere den Skill-Ordner an einen dieser Orte
~/.openclaw/skills/ <project>/skills/ Priorität: Workspace > Lokal > Integriert (Bundled)
3. Prompt-Installation
Kopiere diesen Prompt in OpenClaw, um ihn automatisch zu installieren.
Hilf mir, tiny-css über Clawhub zu installieren. Falls Clawhub nicht installiert ist, installiere es bitte zuerst (npm i -g clawhub).
Lieber herunterladen?
Hole dir die rohen Skill-Dateien in einem ZIP-Archiv.
Was ist tiny-css?
tiny-css ist ein spezialisierter Ansatz innerhalb von Openclaw Skills, der für Entwickler konzipiert wurde, die Wert auf Geschwindigkeit, Leistung und Einfachheit legen. Er verzichtet auf schwere CSS-Resets und komplexe Design-Systeme und plädiert stattdessen für eine 'Vertrauen in den Browser'-Mentalität. Dieser Skill ist für persönliche Websites, Prototypen und Landing Pages optimiert, bei denen die Aufrechterhaltung einer schlanken Codebasis oberste Priorität hat.
Durch die Nutzung moderner Funktionen wie color-scheme, logische Eigenschaften und natives Textumbruchverhalten stellt tiny-css sicher, dass Ihre Projekte mit einem absoluten Minimum an Code barrierefrei, responsiv und internationalisiert sind. Es ist der perfekte Gegensatz zu überladenen Frameworks und konzentriert sich auf Widerstandsfähigkeit und Benutzerpräferenzen.
tiny-css Anwendungsfälle
- Erstellung leichtgewichtiger persönlicher Portfolios und Blogs.
- Schnelles Prototyping von UI-Komponenten ohne den Overhead eines vollständigen Design-Systems.
- Erstellung hochperformanter Landing Pages für Marketingkampagnen.
- Modernisierung bestehender kleiner Projekte mit logischen Eigenschaften und System-Schriftarten.
- Entwicklung barrierefreier Webinhalte, die benutzerdefinierte Systemeinstellungen berücksichtigen.
So funktioniert tiny-css
- Analysieren des Projektumfangs, um sicherzustellen, dass er in die minimalistischen Kriterien des Skills passt.
- Anwenden von Konfigurationen auf Root-Ebene für color-scheme und System-Typografie, um Browser-Standards zu nutzen.
- Implementieren der Textumbruchlogik mit balance- und pretty-Werten zur Optimierung der Lesbarkeit.
- Ersetzen physikalischer Eigenschaften (margin-left, top) durch logische Eigenschaften (margin-inline, block), um Sprachübergreifende Unterstützung zu gewährleisten.
- Integration von Media Queries für Barrierefreiheit, einschließlich Unterstützung für hohen Kontrast und reduzierte Bewegung.
- Generierung einer einzigen, hochoptimierten CSS-Datei, die keinerlei JavaScript für die Kernfunktionalität des Layouts benötigt.
tiny-css Einrichtung
Um tiny-css mit Openclaw Skills zu implementieren, können Sie Ihr Stylesheet mit der folgenden Kernvorlage initialisieren:
# Navigate to your project directory
touch style.css
Fügen Sie die minimale Basis zu Ihrem Projekt hinzu:
:root {
color-scheme: light dark;
accent-color: #0066cc;
font-family: system-ui;
}
:where(img, svg, video, iframe) {
max-inline-size: 100%;
block-size: auto;
}
tiny-css Datenschema & Taxonomie
Der tiny-css Skill folgt einer schlanken Datenstruktur, um hohe Leistung und geringen Wartungsaufwand zu gewährleisten. Er organisiert Styling-Daten wie folgt:
| Component | Implementation Strategy |
|---|---|
| Globale Variablen | Definiert in :root unter Verwendung nativer CSS-Variablen für Akzentfarben. |
| Layout | Gesteuert durch logische Eigenschaften (inline-size, padding-block) für Widerstandsfähigkeit. |
| Typografie | System-Schriftarten und native text-wrap-Eigenschaften für Null-Lade-Overhead. |
| Assets | SVGs mit currentColor, um den Kontext ohne zusätzliche Klassen zu erben. |
| Barrierefreiheit | Media-Query-gesteuerte Präferenzen für Bewegung und erzwungene Farben. |
tiny-css Erweiterte Funktionen
- Bedingtes sanftes Scrollen basierend auf den Bewegungseinstellungen des Benutzers.
- Automatische Integration des systemweiten Dunkelmodus mithilfe der color-scheme Eigenschaft.
- Unterstützung des Forced-colors Modus für die Windows High Contrast Sichtbarkeit.
- Internationalisierungsfertige Layouts mit CSS Logical Properties.
- Zero-Reset-Methodik zur Reduzierung der Neuberechnungszeit des Browsers.
SKILL.md
Laden
Verwandte Openclaw-Skills
FreeGuard VPN CLI Manager
Automatisieren Sie Ihren VPN-Workflow mit der FreeGuard CLI für eine sichere, terminalbasierte Netzwerkverwaltung.
Analyzer Agent
Ein Experten-Skill für technische Analysen, der eine bestehende Projektstruktur, Muster und Konventionen entdeckt und kartiert, um Kontext für nachgelagerte Agenten bereitzustellen.
Wireshark Network Traffic Analysis
Ein umfassender Skill zur Netzwerkanalyse zum Erfassen, Filtern und Untersuchen von Paketen, um Konnektivitätsprobleme zu lösen und Sicherheitsvorfälle zu untersuchen.
Elite Frontend Design
Eine erstklassige UI-Engineering-Fähigkeit, die anspruchsvollen, ästhetischen Frontend-Code generiert und dabei explizit generische KI-Designmuster vermeidet.
Aptos TypeScript SDK Orchestrator
Ein umfassender Orchestrator zur Integration des offiziellen Aptos TypeScript SDK in dezentrale Fullstack-Anwendungen.
Habit Tracker Companion
Ein automatisierter Assistent zur Gewohnheitsbildung, der Benutzern hilft, durch Check-ins, Statistiken und motivierende Meilensteine Konsistenz zu wahren.
Hervorgehoben*
