Uma filosofia CSS minimalista e conjunto de habilidades projetado para criar estilos eficientes e resilientes, aproveitando as capacidades nativas do navegador e propriedades lógicas modernas.
Instalar e Baixar
1. ClawHub CLI
A maneira mais rápida de instalar uma habilidade diretamente do registro.
npx clawhub@latest install tiny-css
2. Instalação Manual
Copie a pasta da habilidade para um desses locais
~/.openclaw/skills/ <project>/skills/ Prioridade: Espaço de Trabalho > Local > Integrado
3. Instalação do Prompt
Copie este prompt para o OpenClaw para instalá-lo automaticamente.
Ajude-me a instalar o tiny-css usando o Clawhub. Se o Clawhub não estiver instalado, instale-o primeiro (npm i -g clawhub).
Prefere baixar?
Obtenha os arquivos originais da habilidade em um arquivo ZIP.
O que é tiny-css?
tiny-css é uma abordagem especializada dentro do Openclaw Skills projetada para desenvolvedores que valorizam velocidade, desempenho e simplicidade. Ela se afasta de resets CSS pesados e sistemas de design complexos, defendendo em vez disso uma mentalidade de 'confiar no navegador'. Esta habilidade é otimizada para sites pessoais, protótipos e landing pages onde manter uma base de código enxuta é a prioridade.
Ao utilizar recursos modernos como color-scheme, propriedades lógicas e comportamentos nativos de quebra de texto, o tiny-css garante que seus projetos sejam acessíveis, responsivos e internacionalizados com o mínimo absoluto de código. É a antítese perfeita para frameworks inchados, focando na resiliência e nas preferências do usuário.
Casos de uso do tiny-css
- Construção de portfólios pessoais e blogs leves.
- Prototipagem rápida de componentes de UI sem a sobrecarga de um sistema de design completo.
- Criação de landing pages de alto desempenho para campanhas de marketing.
- Modernização de projetos legados de pequena escala com propriedades lógicas e fontes do sistema.
- Desenvolvimento de conteúdo web acessível que respeite as configurações de sistema definidas pelo usuário.
Como o tiny-css funciona
- Analisar o escopo do projeto para garantir que ele se encaixe nos critérios minimalistas da habilidade.
- Aplicar configurações de nível raiz para color-scheme e tipografia do sistema para aproveitar os padrões do navegador.
- Implementar a lógica de quebra de texto usando valores balance e pretty para otimizar a legibilidade.
- Substituir propriedades físicas (margin-left, top) por propriedades lógicas (margin-inline, block) para garantir suporte multilíngue.
- Integrar media queries para acessibilidade, incluindo suporte a alto contraste e redução de movimento.
- Gerar um único arquivo CSS altamente otimizado que requer zero JavaScript para a funcionalidade principal do layout.
Configuração do tiny-css
Para implementar o tiny-css usando Openclaw Skills, você pode inicializar sua folha de estilo com o seguinte modelo base:
# Navigate to your project directory
touch style.css
Adicione a base minimalista ao seu projeto:
: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 Dados e Taxonomia de tiny-css
A habilidade tiny-css segue uma estrutura de dados enxuta para manter alto desempenho e baixa manutenção. Ela organiza os dados de estilização da seguinte forma:
| Component | Implementation Strategy |
|---|---|
| Variáveis Globais | Definidas em :root usando variáveis CSS nativas para cores de destaque. |
| Layout | Impulsionado por propriedades lógicas (inline-size, padding-block) para resiliência. |
| Tipografia | Fontes do sistema e propriedades text-wrap nativas para zero sobrecarga de carregamento. |
| Ativos | SVGs usando currentColor para herdar o contexto sem classes extras. |
| Acessibilidade | Preferências baseadas em media queries para movimento e cores forçadas. |
Recursos avançados do tiny-css
- Rolagem suave condicional baseada nas preferências de movimento do usuário.
- Integração automática do modo escuro em nível de sistema usando a propriedade color-scheme.
- Suporte ao modo Forced-colors para visibilidade de alto contraste do Windows.
- Layouts prontos para internacionalização usando CSS Logical Properties.
- Metodologia de zero-reset para reduzir o tempo de recalculação do navegador.
SKILL.md
Carregamento
Habilidades relacionadas do Openclaw
FreeGuard VPN CLI Manager
Automatize seu fluxo de trabalho VPN com o FreeGuard CLI para um gerenciamento de rede seguro baseado em terminal.
Analyzer Agent
Uma habilidade de analista técnico especializado que descobre e mapeia uma estrutura, padrões e convenções de projeto existentes para fornecer contexto para agentes downstream.
Wireshark Network Traffic Analysis
Uma habilidade abrangente de análise de rede para capturar, filtrar e examinar pacotes para resolver problemas de conectividade e investigar incidentes de segurança.
Elite Frontend Design
Uma habilidade de engenharia de UI premium que gera código frontend sofisticado e estético, evitando explicitamente padrões de design genéricos estilo AI.
Aptos TypeScript SDK Orchestrator
Um orquestrador abrangente para integrar o SDK TypeScript oficial da Aptos em aplicativos descentralizados fullstack.
Habit Tracker Companion
Um assistente automatizado de criação de hábitos projetado para ajudar os usuários a manter a consistência por meio de check-ins, estatísticas e marcos motivacionais.
Especialista em Clone e Sincronização de Repositórios GitHub
Um guia de alto desempenho para dominar o gerenciamento de repositórios Git, desde a autenticação até estratégias avançadas de sincronização.
Apresentou*
