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.
تنزيل ZIP المهارة
رفع في Claude
اذهب إلى Settings → Capabilities → Skills → Upload skill
فعّل وابدأ الاستخدام
اختبرها
استخدام "responsive-design". Criar um card responsivo com container queries
النتيجة المتوقعة:
- /* 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;
- }
- }
استخدام "responsive-design". Gerar tipografia fluida com clamp()
النتيجة المتوقعة:
- :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);
- }
التدقيق الأمني
آمن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.
درجة الجودة
ماذا يمكنك بناءه
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.
جرّب هذه الموجهات
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.
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.
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.
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.
أفضل الممارسات
- 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
تجنب
- 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