frontend-responsive
Criar layouts responsivos mobile-first
Também disponível em: DevanB
Criar layouts web responsivos que funcionam em todos os dispositivos é complexo e propenso a erros. Esta habilidade fornece ao Claude diretrizes claras sobre princípios de design mobile-first, contêineres fluidos, unidades relativas e interações amigáveis ao toque para garantir que seus projetos web escalem perfeitamente do mobile para desktop.
Baixar o ZIP da skill
Upload no Claude
Vá em Configurações → Capacidades → Skills → Upload skill
Ative e comece a usar
Testar
A utilizar "frontend-responsive". Crie um componente de cartão responsivo que empilhe no mobile e exiba lado a lado no desktop
Resultado esperado:
- Mobile-first: Comece com layout empilhado para telas pequenas
- Use flexbox ou grid para disposição lado a lado no desktop
- Adicione ponto de interrupção em torno de 768px para tablet e acima
- Garanta alvos de toque mínimos de 44px para botões
- Use unidades rem para espaçamento que escala com a fonte base
A utilizar "frontend-responsive". Faça meu menu de navegação funcionar bem em dispositivos mobile
Resultado esperado:
- Use o padrão de menu hamburger para mobile com dropdown em largura total
- Aplique altura mínima de 44px para alvos de toque
- Considere cabeçalho fixo para acesso fácil no mobile
- Use flexbox para menu horizontal nos pontos de interrupção desktop
A utilizar "frontend-responsive". Quais unidades de dimensionamento devo usar para um sistema de tipografia responsiva
Resultado esperado:
- Use rem para tamanhos de fonte para respeitar configurações do navegador do usuário
- Use em para espaçamento específico de componente dentro de widgets
- Use vw para títulos que escalam com a largura do viewport
- Evite px para tamanhos de fonte para suportar preferências de acessibilidade
Auditoria de Segurança
SeguroThis is a pure documentation skill containing only guidance about frontend responsive design standards. No executable code, network calls, file system access, or command execution capabilities are present. All 58 static findings are false positives triggered by keyword matching on benign documentation text.
Fatores de risco
🌐 Acesso à rede (1)
📁 Acesso ao sistema de arquivos (4)
Pontuação de qualidade
O Que Você Pode Construir
Criando interfaces web responsivas
Crie layouts que se adaptam fluidamente de celulares a telas desktop usando técnicas modernas de CSS
Implementando designs mobile-first
Traduza mockups de design em código responsivo com pontos de interrupção adequados e interações amigáveis ao toque
Otimizando experiências entre dispositivos
Garanta que aplicações web forneçam experiências consistentes em todos os tamanhos de viewport e tipos de dispositivos
Tente Estes Prompts
Ajude-me a criar um contêiner responsivo para minha página web que funcione em mobile, tablet e desktop usando a abordagem mobile-first.
Quais são os pontos de interrupção padrão que devo usar para um design responsivo mobile-first? Mostre-me como implementá-los em CSS.
Quando devo usar rem vs em vs px vs vw/vh para dimensionamento em layouts responsivos? Dê-me exemplos práticos para cada um.
Como garantir que meus botões e elementos interativos sejam amigáveis ao toque em dispositivos mobile? Quais são os requisitos mínimos de dimensionamento?
Melhores Práticas
- Comece com estilos mobile e use media queries min-width para aprimorar progressivamente para telas maiores
- Use unidades relativas (rem, em) para tipografia e espaçamento para suportar preferências de zoom do usuário
- Teste em dispositivos reais ou emuladores confiáveis, não apenas ferramentas de redimensionamento do navegador
Evitar
- Evite projetar desktop-first e tentar simplificar para mobile - isso frequentemente resulta em experiências mobile ruins
- Não use larguras fixas em pixels para contêineres - use max-width com porcentagem ou unidades de viewport
- Evite ocultar conteúdo no mobile sem fornecer acesso alternativo - considere estratégias de priorização de conteúdo