responsive-design
Faz seu agente criar layouts que se adaptam a qualquer tamanho de tela. É útil para garantir que sites e apps funcionem bem em celulares, tablets e computadores.
O que ela faz
Essa habilidade ajuda a criar sites e aplicativos que se ajustam automaticamente a qualquer tamanho de tela, seja um celular, tablet ou computador. Ela garante que tudo fique bonito e funcional em qualquer dispositivo.
Quando usar
- ✓Ao criar um site que precisa funcionar bem em celulares e computadores.
- ✓Quando você quer que partes específicas do seu site se ajustem sozinhas.
- ✓Para fazer o texto e os espaçamentos ficarem proporcionais em telas de todos os tamanhos.
Exemplo do que pedir para a IA
“Como faço para meu site se ajustar a telas de diferentes tamanhos?”
Quer saber mais? Abra as seções abaixo.
Como usar
O jeito mais fácil: copie a mensagem abaixo e cole no Claude, ChatGPT, Cursor ou outra IA. Ela lê a skill e segue as instruções.
Link da skill
Mensagem pronta para colar
Como funciona
Ela usa técnicas modernas para que os elementos visuais se reorganizem e redimensionem conforme o espaço disponível. Começa pensando no celular e depois adapta para telas maiores, garantindo uma boa experiência em todos os lugares.
Instalação
Jeito mais fácil: copie o link da skill e cole no Claude, ChatGPT ou Cursor pedindo para seguir as instruções.
No terminal (Claude Code, Codex, Cursor), na pasta do projeto:
npx skills add wshobson/agents --skill responsive-designOu baixe só o arquivo:
curl -L https://raw.githubusercontent.com/wshobson/agents/main/plugins/ui-design/skills/responsive-design/SKILL.md -o SKILL.mdConteúdo técnico (SKILL.md)
Tradução do texto original do autor no GitHub. Os comandos e códigos estão como no original.
Design Responsivo
Domine técnicas modernas de design responsivo para criar interfaces que se adaptam perfeitamente a todos os tamanhos de tela e contextos de dispositivos.
Quando Usar Esta Habilidade
- Implementar layouts responsivos mobile-first
- Usar container queries para responsividade baseada em componentes
- Criar tipografia fluida e escalas de espaçamento
- Construir layouts complexos com CSS Grid e Flexbox
- Projetar estratégias de breakpoints para sistemas de design
- Implementar imagens e mídias responsivas
- Criar padrões de navegação adaptáveis
- Construir tabelas e visualizações de dados responsivas
Padrões Detalhados e Exemplos Práticos
A documentação detalhada dos padrões está em references/details.md. Leia este arquivo quando o nível de navegação acima for insuficiente.
Melhores Práticas
- Mobile-First: Comece com estilos para mobile, aprimore para telas maiores
- Breakpoints de Conteúdo: Defina breakpoints com base no conteúdo, não nos dispositivos
- Fluidez em Vez de Fixidez: Use valores fluidos para tipografia e espaçamento
- Container Queries: Use para responsividade em nível de componente
- Teste em Dispositivos Reais: Simuladores não capturam todos os problemas
- Performance: Otimize imagens, carregue conteúdo fora da tela sob demanda (lazy load)
- Áreas de Toque: Mantenha um mínimo de 44x44px em dispositivos móveis
- Propriedades Lógicas: Use inline/block para internacionalização
Problemas Comuns
- Overflow Horizontal: Conteúdo saindo da viewport
- Larguras Fixas: Usar px em vez de unidades relativas
- Altura da Viewport: Problemas com 100vh em navegadores mobile
- Tamanho da Fonte: Texto muito pequeno em dispositivos móveis
- Áreas de Toque: Botões muito pequenos para serem tocados com precisão
- Proporção de Aspecto: Imagens achatando ou esticando
- Empilhamento de Z-Index: Overlays quebrando em telas diferentes
Perguntas frequentes
O que significa 'mobile-first'?
Significa começar o design pensando em como ele ficará na tela menor de um celular e depois ir adicionando melhorias para telas maiores.
O que são 'container queries'?
São como regras que fazem um componente (uma parte da página) se ajustar ao tamanho do espaço onde ele está, em vez de se ajustar ao tamanho total da tela.
Por que é importante testar em dispositivos reais?
Simuladores podem não mostrar todos os problemas. Testar em celulares e tablets de verdade garante que o site funcione perfeitamente para todos os usuários.
Detalhes
Descrição original do autor
Implement modern responsive layouts using container queries, fluid typography, CSS Grid, and mobile-first breakpoint strategies. Use when building adaptive interfaces, implementing fluid layouts, or creating component-level responsive behavior.
repo: wshobson/agents
Popularidade
- Estrelas no GitHub
- 41 mil
- Posição no ranking
- #4974
- Licença
- MIT
- Atualizada em
- 15/10/2026
Comentários
- …
Mais skills deste repositório
screen-reader-testing
Faz seu agente testar sites usando leitores de tela para garantir que sejam acessíveis.
wshobson/agents
wcag-audit-patterns
Ajuda seu agente a auditar sites para acessibilidade e corrigir problemas de acordo com as diretrizes WCAG.
wshobson/agents
multi-reviewer-patterns
Faz seu agente coordenar revisões de código paralelas, deduplicando achados e consolidando relatórios.
wshobson/agents
parallel-debugging
Permite ao agente depurar problemas complexos com investigações paralelas e análise de causa raiz.
wshobson/agents
Skills parecidas
accessibility
Ajuda seu agente a criar interfaces que todos possam usar. Garante que sites e aplicativos funcionem bem para pessoas com deficiência, como cegos ou com mobilidade reduzida.
affaan-m/ECC
design-system
Ajuda seu agente a criar um sistema de design a partir de um código existente. Ele extrai informações visuais e verifica a consistência, gerando um relatório e uma prévia interativa.
affaan-m/ECC
liquid-glass-design
Ajuda seu agente a criar interfaces de usuário com efeito 'Liquid Glass' para iOS. Permite adicionar efeitos visuais dinâmicos e interativos em SwiftUI e UIKit.
affaan-m/ECC