Una filosofía CSS minimalista y un conjunto de habilidades diseñado para crear estilos eficientes y resilientes aprovechando las capacidades nativas del navegador y las propiedades lógicas modernas.
Instalar y Descargar
1. ClawHub CLI
La forma más rápida de instalar una habilidad directamente desde el registro.
npx clawhub@latest install tiny-css
2. Instalación manual
Copia la carpeta de la habilidad a una de estas ubicaciones
~/.openclaw/skills/ <project>/skills/ Prioridad: Espacio de trabajo > Local > Integrado
3. Instalación del prompt
Copia este prompt en OpenClaw para instalarlo automáticamente.
Ayúdame a instalar tiny-css usando Clawhub. Si Clawhub no está instalado, instálalo primero (npm i -g clawhub).
¿Prefieres descargar?
Obtén los archivos originales de la habilidad en un archivo ZIP.
¿Qué es tiny-css?
tiny-css es un enfoque especializado dentro de Openclaw Skills diseñado para desarrolladores que valoran la velocidad, el rendimiento y la simplicidad. Se aleja de los pesados resets de CSS y los sistemas de diseño complejos, abogando en su lugar por una mentalidad de 'confiar en el navegador'. Esta habilidad está optimizada para sitios personales, prototipos y landing pages donde mantener un código base ligero es la prioridad.
Al utilizar características modernas como color-scheme, propiedades lógicas y comportamientos nativos de ajuste de texto, tiny-css garantiza que tus proyectos sean accesibles, responsivos e internacionalizados con el mínimo absoluto de código. Es la antítesis perfecta de los frameworks sobrecargados, centrándose en la resiliencia y las preferencias del usuario.
Casos de uso de tiny-css
- Construcción de portafolios personales y blogs ligeros.
- Prototipado rápido de componentes de UI sin la sobrecarga de un sistema de diseño completo.
- Creación de landing pages de alto rendimiento para campañas de marketing.
- Modernización de proyectos heredados de pequeña escala con propiedades lógicas y fuentes del sistema.
- Desarrollo de contenido web accesible que respete la configuración del sistema definida por el usuario.
Cómo funciona tiny-css
- Analizar el alcance del proyecto para asegurar que encaje dentro de los criterios minimalistas de la habilidad.
- Aplicar configuraciones de nivel raíz para color-scheme y tipografía del sistema para aprovechar los valores predeterminados del navegador.
- Implementar la lógica de ajuste de texto usando los valores balance y pretty para optimizar la legibilidad.
- Reemplazar las propiedades físicas (margin-left, top) por propiedades lógicas (margin-inline, block) para asegurar el soporte multiidioma.
- Integrar media queries para accesibilidad, incluyendo soporte para alto contraste y reducción de movimiento.
- Generar un único archivo CSS altamente optimizado que requiera cero JavaScript para la funcionalidad principal del diseño.
Configuración de tiny-css
Para implementar tiny-css usando Openclaw Skills, puedes inicializar tu hoja de estilo con la siguiente plantilla principal:
# Navigate to your project directory
touch style.css
Añade la base mínima a tu proyecto:
:root {
color-scheme: light dark;
accent-color: #0066cc;
font-family: system-ui;
}
:where(img, svg, video, iframe) {
max-inline-size: 100%;
block-size: auto;
}
Esquema de datos y taxonomía de tiny-css
La habilidad tiny-css sigue una estructura de datos ligera para mantener un alto rendimiento y un bajo mantenimiento. Organiza los datos de estilo de la siguiente manera:
| Component | Implementation Strategy |
|---|---|
| Variables Globales | Definidas en :root usando variables CSS nativas para colores de acento. |
| Diseño | Impulsado por propiedades lógicas (inline-size, padding-block) para mayor resiliencia. |
| Tipografía | Fuentes del sistema y propiedades text-wrap nativas para cero sobrecarga de carga. |
| Activos | SVGs usando currentColor para heredar el contexto sin clases adicionales. |
| Accesibilidad | Preferencias impulsadas por media queries para movimiento y colores forzados. |
Funciones avanzadas de tiny-css
- Desplazamiento suave condicional basado en las preferencias de movimiento del usuario.
- Integración automática del modo oscuro a nivel de sistema usando la propiedad color-scheme.
- Soporte del modo Forced-colors para la visibilidad de alto contraste de Windows.
- Diseños listos para la internacionalización usando CSS Logical Properties.
- Metodología de zero-reset para reducir el tiempo de recálculo del navegador.
SKILL.md
Cargando
Habilidades relacionadas de Openclaw
FreeGuard VPN CLI Manager
Automatice su flujo de trabajo de VPN con la CLI de FreeGuard para una gestión de red segura basada en terminal.
Analyzer Agent
Una habilidad de analista técnico experto que descubre y mapea la estructura, los patrones y las convenciones de un proyecto existente para proporcionar contexto a los agentes posteriores.
Wireshark Network Traffic Analysis
Una habilidad integral de análisis de red para capturar, filtrar y examinar paquetes con el fin de resolver problemas de conectividad e investigar incidentes de seguridad.
Elite Frontend Design
Una habilidad de ingeniería de UI premium que genera código frontend sofisticado y estético, evitando explícitamente los patrones de diseño genéricos de estilo AI.
Aptos TypeScript SDK Orchestrator
Un orquestador integral para integrar el SDK oficial de TypeScript de Aptos en aplicaciones descentralizadas fullstack.
Habit Tracker Companion
Un asistente automatizado para la creación de hábitos diseñado para ayudar a los usuarios a mantener la consistencia mediante registros, estadísticas e hitos motivacionales.
Experto en Clonación y Sincronización de Repositorios GitHub
Una guía de alto rendimiento para dominar la gestión de repositorios Git, desde la autenticación hasta estrategias avanzadas de sincronización.
Presentado*
