Une philosophie CSS minimaliste et un ensemble de compétences conçus pour créer des styles efficaces et résilients en exploitant les capacités natives du navigateur et les propriétés logiques modernes.
Installer & Télécharger
1. ClawHub CLI
Le moyen le plus rapide d'installer une compétence directement depuis le registre.
npx clawhub@latest install tiny-css
2. Installation manuelle
Copiez le dossier de la compétence dans l'un de ces emplacements
~/.openclaw/skills/ <project>/skills/ Priorité : Espace de travail > Local > Intégré
3. Installation du prompt
Copiez ce prompt dans OpenClaw pour l'installer automatiquement.
Aide-moi à installer tiny-css via Clawhub. Si Clawhub n'est pas installé, installe-le d'abord (npm i -g clawhub).
Vous préférez télécharger ?
Obtenez les fichiers bruts de la compétence dans une archive ZIP.
Qu'est-ce que tiny-css ?
tiny-css est une approche spécialisée au sein d'Openclaw Skills conçue pour les développeurs qui privilégient la rapidité, la performance et la simplicité. Elle s'éloigne des lourds resets CSS et des systèmes de design complexes, prônant au contraire une mentalité de « confiance au navigateur ». Cette compétence est optimisée pour les sites personnels, les prototypes et les pages de destination où le maintien d'une base de code légère est la priorité.
En utilisant des fonctionnalités modernes telles que color-scheme, les propriétés logiques et les comportements de retour à la ligne natifs, tiny-css garantit que vos projets sont accessibles, réactifs et internationalisés avec un minimum absolu de code. C'est l'antithèse parfaite des frameworks encombrants, se concentrant sur la résilience et les préférences de l'utilisateur.
Cas d'utilisation de tiny-css
- Construction de portfolios personnels et de blogs légers.
- Prototypage rapide de composants UI sans la surcharge d'un système de design complet.
- Création de pages de destination haute performance pour les campagnes marketing.
- Modernisation de projets existants à petite échelle avec des propriétés logiques et des polices système.
- Développement de contenu web accessible respectant les paramètres système définis par l'utilisateur.
Comment fonctionne tiny-css
- Analyser la portée du projet pour s'assurer qu'il s'inscrit dans les critères minimalistes de la compétence.
- Appliquer des configurations au niveau de la racine pour color-scheme et la typographie système afin de tirer parti des paramètres par défaut du navigateur.
- Implémenter la logique de retour à la ligne du texte en utilisant les valeurs balance et pretty pour optimiser la lisibilité.
- Remplacer les propriétés physiques (margin-left, top) par des propriétés logiques (margin-inline, block) pour assurer le support multilingue.
- Intégrer des media queries pour l'accessibilité, incluant le support du contraste élevé et de la réduction de mouvement.
- Générer un fichier CSS unique hautement optimisé ne nécessitant aucun JavaScript pour les fonctionnalités de mise en page principales.
Configuration de tiny-css
Pour implémenter tiny-css en utilisant Openclaw Skills, vous pouvez initialiser votre feuille de style avec le modèle de base suivant :
# Navigate to your project directory
touch style.css
Ajoutez la base minimale à votre projet :
:root {
color-scheme: light dark;
accent-color: #0066cc;
font-family: system-ui;
}
:where(img, svg, video, iframe) {
max-inline-size: 100%;
block-size: auto;
}
Schéma de données et taxonomie de tiny-css
La compétence tiny-css suit une structure de données légère pour maintenir une haute performance et une maintenance réduite. Elle organise les données de style comme suit :
| Component | Implementation Strategy |
|---|---|
| Variables Globales | Définies dans :root en utilisant des variables CSS natives pour les couleurs d'accentuation. |
| Mise en Page | Pilotée par des propriétés logiques (inline-size, padding-block) pour la résilience. |
| Typographie | Polices système et propriétés text-wrap natives pour une surcharge de chargement nulle. |
| Actifs | SVGs utilisant currentColor pour hériter du contexte sans classes supplémentaires. |
| Accessibilité | Préférences pilotées par media queries pour le mouvement et les couleurs forcées. |
Fonctionnalités avancées de tiny-css
- Défilement fluide conditionnel basé sur les préférences de mouvement de l'utilisateur.
- Intégration automatique du mode sombre au niveau du système via la propriété color-scheme.
- Support du mode Forced-colors pour la visibilité à haut contraste de Windows.
- Mises en page prêtes pour l'internationalisation utilisant les CSS Logical Properties.
- Méthodologie zero-reset pour réduire le temps de recalcul du navigateur.
SKILL.md
Chargement
Compétences Openclaw associées
FreeGuard VPN CLI Manager
Automatisez votre flux de travail VPN avec la CLI FreeGuard pour une gestion réseau sécurisée basée sur le terminal.
Analyzer Agent
Une compétence d'analyste technique expert qui découvre et cartographie une structure, des modèles et des conventions de projet existants pour fournir un contexte aux agents en aval.
Wireshark Network Traffic Analysis
Une compétence complète d'analyse réseau pour capturer, filtrer et examiner les paquets afin de résoudre les problèmes de connectivité et d'enquêter sur les incidents de sécurité.
Elite Frontend Design
Une compétence d'ingénierie UI premium qui génère du code frontend sophistiqué et esthétique tout en évitant explicitement les modèles de design génériques de style AI.
Aptos TypeScript SDK Orchestrator
Un orchestrateur complet pour intégrer le SDK TypeScript officiel d'Aptos dans des applications décentralisées fullstack.
Habit Tracker Companion
Un assistant automatisé de création d'habitudes conçu pour aider les utilisateurs à maintenir leur régularité grâce à des pointages, des statistiques et des jalons de motivation.
Expert en Clonage et Synchronisation de Dépôts GitHub
Un guide haute performance pour maîtriser la gestion de dépôts Git, de l'authentification aux stratégies de synchronisation avancées.
En vedette*
