Habilidade do Agente de Recursos Modernos do CSS: Impor Práticas Modernas de CSS em Agentes de Codificação de IA

Há uma nova habilidade para agentes no GitHub chamada css-modern-features que impõe práticas modernas de CSS com base nos navegadores alvo do seu projeto. Ela cobre mais de 57 recursos de CSS entre cor, layout, seletores, animação, tipografia, posicionamento e padrões de componentes.

Como Funciona

A habilidade se conecta a agentes de IA de codificação e restringe a saída de CSS apenas a recursos modernos e apropriados para o navegador alvo. Por exemplo, se o seu projeto tem como alvo navegadores modernos, ela preferirá display: grid em vez de layouts baseados em float, clamp() para tipografia fluida e :has() para seleção de pai. Você define os navegadores alvo e a habilidade ajusta quais recursos são permitidos.

Agentes Suportados

A habilidade funciona com:

• Claude Code
• Cursor
• Windsurf
• Codex
• Cline
• GitHub Copilot

Por Que Isso Importa

Agentes de IA de codificação frequentemente geram CSS desatualizado (por exemplo, float, clearfix, prefixos de fornecedores) porque seus dados de treinamento incluem código antigo. Essa habilidade os força a usar apenas recursos modernos, poupando você de refatorações manuais. É particularmente útil para equipes que mantêm bases de código que devem ter como alvo versões específicas de navegadores (por exemplo, 'last 2 versions' via Browserslist).

Repositório: github.com/rushenn/css-modern-features

O tópico do Reddit (link abaixo) tem discussões adicionais da comunidade sobre personalização do conjunto de recursos.