Habilidades responsive-design
📱

responsive-design

Seguro

Crie Layouts Web Responsivos

Também disponível em: wshobson

Crie sites que se adaptam perfeitamente a qualquer tamanho de tela usando princípios de design mobile-first, CSS Grid, Flexbox e técnicas responsivas modernas.

Suporta: Claude Codex Code(CC)
📊 71 Adequado
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". Crie um layout grid mobile-first com cards

Resultado esperado:

Código CSS mostrando um grid que começa como 1 coluna, torna-se 2 colunas em 640px e 3 colunas em 1024px, com gap e padding fluidos usando unidades rem.

A utilizar "responsive-design". Torne a tipografia responsiva sem media queries

Resultado esperado:

CSS usando a função clamp() para tamanhos de fonte fluidos que escalam suavemente entre valores mínimos e máximos baseados na largura do viewport.

Auditoria de Segurança

Seguro
v1 • 3/11/2026

This skill is a legitimate documentation resource for responsive web design. The static scanner produced false positives by misidentifying CSS code examples, markdown links, and reference URLs as security vulnerabilities. All 86 detected patterns are false positives - the skill contains only documentation and CSS/HTML code examples with no executable code, network calls to external services, or file system operations beyond standard documentation references.

2
Arquivos analisados
529
Linhas analisadas
3
achados
1
Total de auditorias
Problemas de Baixo Risco (3)
SKILL.md:27-513
CSS Code Examples Misidentified as External Commands
Static scanner incorrectly flagged CSS syntax (`.container`, `@media`, etc.) as Ruby/shell backtick execution. These are legitimate CSS code blocks in documentation.
SKILL.md:496-499
Documentation Reference URLs Misidentified as Network Security Issue
Static scanner flagged reference URLs (MDN, CSS-Tricks) as hardcoded URLs. These are legitimate documentation links in the References section.
SKILL.md:509-510
Markdown Relative Links Misidentified as Path Traversal
Static scanner flagged `../ui-component-patterns/SKILL.md` as path traversal. These are standard markdown relative links to related skills.
Auditado por: claude

Pontuação de qualidade

38
Arquitetura
100
Manutenibilidade
87
Conteúdo
37
Comunidade
99
Segurança
87
Conformidade com especificações

O Que Você Pode Construir

Desenvolvimento de Novo Site

Construa layouts responsivos para novas aplicações web usando abordagem mobile-first com CSS Grid e Flexbox.

Modernização de Site Legado

Converta layouts de largura fixa para designs responsivos que funcionam em todos os dispositivos.

Criação de Biblioteca de Componentes

Crie componentes responsivos reutilizáveis usando container queries para sistemas de design modulares.

Tente Estes Prompts

Layout Responsivo Básico 
Crie um layout responsivo usando CSS mobile-first com container, grid e breakpoint em 768px. Mostre como o layout muda de mobile para tablet.
Navegação Responsiva 
Construa um componente de navegação responsivo com menu hambúrguer no mobile que se expande para menu horizontal no tablet e desktop.
Galeria de Imagens Responsiva 
Crie uma galeria de imagens responsiva que mostra 1 coluna no mobile, 2 no tablet e 4 no desktop usando CSS Grid.
Componentes com Container Query 
Construa um componente card que adapta seu layout com base no tamanho do container usando CSS container queries.

Melhores Práticas

  • Sempre comece com estilos mobile como padrão, depois adicione breakpoints maiores
  • Use unidades relativas (rem, em, %, vw/vh) em vez de pixels fixos para escalabilidade
  • Use CSS Grid para layouts bidimensionais e Flexbox para layouts unidimensionais

Evitar

  • Evite larguras fixas como width: 1200px - use max-width
  • Não duplique estilos em todos os breakpoints - use herança mobile-first
  • Evite usar media queries max-width para estilos base - isso cria código desktop-first

Perguntas Frequentes

O que é design mobile-first?
Design mobile-first significa começar com estilos para as menores telas como padrão, depois adicionar breakpoints maiores com media queries min-width. Essa abordagem garante que a experiência principal funcione em todos os dispositivos.
Quando devo usar CSS Grid vs Flexbox?
Use CSS Grid para layouts bidimensionais (linhas e colunas juntas). Use Flexbox para layouts unidimensionais (ou uma linha OU uma coluna). Grid é melhor para layout geral de página, Flexbox para alinhamento em nível de componente.
O que são container queries?
Container queries permitem que você estilize elementos com base no tamanho do container pai em vez do tamanho do viewport. Isso permite componentes responsivos verdadeiramente reutilizáveis.
Como faço imagens responsivas?
Use o atributo srcset para fornecer múltiplos tamanhos de imagem, o elemento picture para art direction (diferentes imagens em diferentes tamanhos) e CSS background-image com image-set para telas de alta DPI.
Quais são os breakpoints padrão?
Breakpoints comuns são: Mobile (320-767px), Tablet (768-1023px), Desktop (1024-1439px) e Telas grandes (1440px+). Ajuste com base nas necessidades do seu conteúdo.
Como faço tipografia responsiva?
Use a função CSS clamp() para tipografia fluida que escala entre valores mínimos e máximos. Exemplo: font-size: clamp(1rem, 2.5vw, 1.5rem) escala suavemente com a largura do viewport.

Detalhes do Desenvolvedor

Licença

MIT

Repositório

https://github.com/supercent-io/skills-template/tree/main/.agent-skills/responsive-design/

Referência

main

Estrutura de arquivos

📄 SKILL.md

📄 SKILL.toon