frontend-responsive
Criar layouts responsivos mobile-first
こちらからも入手できます: 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.
スキルZIPをダウンロード
Claudeでアップロード
設定 → 機能 → スキル → スキルをアップロードへ移動
オンにして利用開始
テストする
「frontend-responsive」を使用しています。 Crie um componente de cartão responsivo que empilhe no mobile e exiba lado a lado no desktop
期待される結果:
- 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
「frontend-responsive」を使用しています。 Faça meu menu de navegação funcionar bem em dispositivos mobile
期待される結果:
- 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
「frontend-responsive」を使用しています。 Quais unidades de dimensionamento devo usar para um sistema de tipografia responsiva
期待される結果:
- 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
セキュリティ監査
安全This 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.
リスク要因
🌐 ネットワークアクセス (1)
📁 ファイルシステムへのアクセス (4)
品質スコア
作れるもの
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
これらのプロンプトを試す
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?
ベストプラクティス
- 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
回避
- 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