Habilidades responsive-design
📱

responsive-design

Seguro

Criar layouts responsivos com CSS

Construir interfaces que se adaptam em diferentes dispositivos é complexo e demorado. Esta habilidade fornece padrões de código prontos para uso para container queries, tipografia fluida, layouts CSS Grid e breakpoints mobile-first para acelerar o desenvolvimento responsivo.

Suporta: Claude Codex Code(CC)
🥉 73 Bronze
1

Baixar o ZIP da skill

2

Upload no Claude

Vá em Configurações → Capacidades → Skills → Upload skill

3

Ative e comece a usar

Testar

A utilizar "responsive-design". Criar um card responsivo com container queries

Resultado esperado:

  • /* Container context */
  • .card-container {
  • container-type: inline-size;
  • container-name: card;
  • }
  •  
  • /* Default: stacked layout */
  • .card {
  • display: flex;
  • flex-direction: column;
  • }
  •  
  • /* Side-by-side at 400px+ */
  • @container card (min-width: 400px) {
  • .card {
  • flex-direction: row;
  • gap: 1rem;
  • }
  • }

A utilizar "responsive-design". Gerar tipografia fluida com clamp()

Resultado esperado:

  • :root {
  • --text-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
  • --text-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  • --text-lg: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);
  • --text-xl: clamp(1.25rem, 1rem + 1.25vw, 1.5rem);
  • --text-2xl: clamp(1.5rem, 1.25rem + 1.25vw, 2rem);
  • }

Auditoria de Segurança

Seguro
v1 • 1/29/2026

This is a pure documentation skill containing CSS code examples and React components for responsive design patterns. All static scanner findings are false positives: backticks detected are markdown code fences, URLs are documentation links, and all references to cryptographic or system commands are text mentions within documentation. No executable code, network calls, or credential access exists.

4
Arquivos analisados
2,221
Linhas analisadas
0
achados
1
Total de auditorias
Nenhum problema de segurança encontrado
Auditado por: claude

Pontuação de qualidade

45
Arquitetura
100
Manutenibilidade
87
Conteúdo
32
Comunidade
100
Segurança
87
Conformidade com especificações

O Que Você Pode Construir

Construir componentes de card adaptativos

Criar componentes de card que mudam de layout com base no espaço disponível usando container queries.

Implementar escalas de tipografia fluida

Gerar tipografia responsiva que escala suavemente entre tamanhos mínimos e máximos nas viewports.

Criar navegação responsiva

Construir padrões de navegação que se adaptam entre menus hamburger mobile e layouts desktop horizontais.

Tente Estes Prompts

Configuração básica de container query 
Crie um componente de card responsivo usando CSS container queries. O card deve mudar de layout empilhado para lado a lado quando o container tiver pelo menos 400px de largura.
Escala de tipografia fluida 
Gere uma escala de tipografia fluida usando CSS clamp(). Crie variáveis para text-xs até text-4xl com tamanhos mínimos em torno de 12px a 18px e tamanhos máximos em torno de 14px a 36px.
Layout de grid responsivo 
Crie um layout de grid responsivo usando CSS Grid com auto-fit. O grid deve ter colunas com pelo menos 250px de largura e quebrar para novas linhas conforme necessário.
Estratégia de breakpoints mobile-first 
Defina uma estratégia de breakpoints mobile-first para um sistema de design. Inclua breakpoints em 640px, 768px, 1024px e 1280px com casos de uso típicos para cada um.

Melhores Práticas

  • Comece com estilos mobile e aprimore para telas maiores usando media queries com min-width
  • Use container queries para responsividade em nível de componente em vez de queries baseadas em viewport
  • Defina breakpoints com base nas necessidades de conteúdo em vez de dimensões de dispositivos específicos
  • Use unidades relativas como rem, em e porcentagens para layouts escaláveis

Evitar

  • Usar larguras em pixels fixos em vez de unidades fluidas ou relativas
  • Criar breakpoints para tamanhos de dispositivos específicos em vez de pontos de reflow de conteúdo
  • Aplicar estilos responsivos no nível da viewport quando container queries seriam mais adequados
  • Ignorar unidades de viewport dinâmicas que consideram a UI do navegador mobile

Perguntas Frequentes

O que são container queries e como diferem de media queries?
Container queries aplicam estilos baseados no tamanho de um container pai em vez da viewport. Media queries respondem à largura da viewport. Container queries permitem componentes verdadeiramente reutilizáveis que se adaptam ao seu container independentemente de onde são placements.
Como funciona a tipografia fluida?
Tipografia fluida usa CSS clamp() para criar tamanhos de fonte que escalam suavemente entre valores mínimos e máximos baseados na largura da viewport. Isso elimina a necessidade de múltiplos tamanhos de fonte específicos para cada breakpoint.
O que é a abordagem mobile-first?
Mobile-first significa escrever estilos base para dispositivos mobile primeiro, depois adicionar aprimoramentos com media queries min-width para telas maiores. Essa abordagem melhora a performance no mobile e simplifica a estrutura do stylesheet.
Quando devo usar CSS Grid vs Flexbox?
Use CSS Grid para layouts bidimensionais (linhas e colunas simultaneamente). Use Flexbox para layouts unidimensionais (única linha ou coluna). Grid destaca-se em layouts de nível de página; Flexbox funciona bem para alinhamento em nível de componente.
O que são unidades de viewport dinâmicas?
Unidades de viewport dinâmicas (dvh, svh, lvh) consideram a UI do navegador mobile que aparece e desaparece. Use 100dvh para altura total que se ajusta para mostrar/esconder a chrome do navegador, 100svh para a menor viewport, e 100lvh para a maior.
Como testar designs responsivos de forma eficaz?
Teste em dispositivos reais quando possível. Use a emulação de dispositivos do DevTools do navegador para verificações iniciais. Foque em faixas de breakpoint comuns em vez de dispositivos específicos. Teste alvos de toque, legibilidade de texto e overflow de conteúdo em cada breakpoint.

Detalhes do Desenvolvedor

Autor

wshobson

Licença

MIT

Repositório

https://github.com/wshobson/agents/tree/main/plugins/ui-design/skills/responsive-design/

Referência

main

Estrutura de arquivos

📁 references/

📄 breakpoint-strategies.md

📄 container-queries.md

📄 fluid-layouts.md

📄 SKILL.md