responsive-design

Visão geral da skill responsive-design

A skill responsive-design ajuda um agente a produzir orientações modernas e prontas para implementação para interfaces adaptativas, usando container queries, dimensionamento fluido, CSS Grid, Flexbox e breakpoints mobile-first. Ela é mais indicada para quem está construindo layouts reais de UI, componentes de design system, dashboards, cards, navegação ou telas com muito conteúdo que precisam funcionar bem em diferentes tamanhos de tela sem depender de CSS frágil e específico por dispositivo.

Para quem a skill responsive-design é indicada

Use a skill responsive-design se você precisa de algo além de “deixar responsivo para mobile”. Ela atende bem engenheiros frontend, UI designers que trabalham com detalhes de implementação e usuários de agentes que querem padrões responsivos práticos para comportamento em nível de componente, e não apenas conselhos genéricos sobre media queries.

Que tipo de tarefa ela realmente ajuda a concluir

O trabalho real que ela resolve é transformar um objetivo de layout ainda bruto em uma estratégia de implementação responsiva: o que deve ser fluido, o que deve usar breakpoints, quando usar container queries em vez de consultas baseadas na viewport e como manter componentes reutilizáveis em diferentes contextos.

O que diferencia esta skill de um prompt genérico

Um prompt genérico costuma gerar recomendações ultrapassadas, como breakpoints por tipo de dispositivo e excesso de media queries. A skill responsive-design é centrada em padrões CSS mais atuais, destacados no repositório, especialmente:

• estratégia de breakpoints mobile-first guiada pelo conteúdo
• container queries para componentes reutilizáveis
• tipografia e espaçamento fluidos com clamp()
• decisões de layout que separam preocupações da viewport das preocupações do componente

O que mais importa antes de instalar

Ela é uma boa escolha se o seu resultado desejado for CSS, especificações de componentes ou orientação de implementação de UI. É menos útil se você quer apenas mockups visuais, instruções para ferramentas no-code ou abstrações específicas de framework sem discutir as decisões de CSS por baixo. O repositório é orientado a referência, então o valor dele está nos padrões e exemplos em references/, não em scripts de automação.

Como usar a skill responsive-design

Contexto de instalação da responsive-design

Instale a skill a partir da coleção de skills na raiz do repositório:

npx skills add https://github.com/wshobson/agents --skill responsive-design

Como a skill upstream não vem com scripts nem bindings para frameworks, a instalação serve principalmente para tornar essa orientação acionável pelo seu agente. Espere uma skill de documentação e padrões, não um gerador de código com entradas rígidas.

Leia estes arquivos primeiro

Comece por estes arquivos, nesta ordem:

1. plugins/ui-design/skills/responsive-design/SKILL.md
2. plugins/ui-design/skills/responsive-design/references/container-queries.md
3. plugins/ui-design/skills/responsive-design/references/fluid-layouts.md
4. plugins/ui-design/skills/responsive-design/references/breakpoint-strategies.md

Essa ordem importa: a skill principal define o escopo, e depois as referências acrescentam os detalhes de implementação que realmente elevam a qualidade da resposta.

Que entradas a skill precisa de você

A skill responsive-design funciona melhor quando você informa:

• o tipo de componente ou página
• as restrições de layout
• os contextos de tela alvo
• se a responsividade deve ser baseada em viewport, em container ou em um modelo misto
• quaisquer tokens do design system ou convenções de breakpoint
• requisitos de suporte a navegadores

Entrada fraca: “Deixa isso responsivo.”

Entrada melhor: “Crie uma grade responsiva de cards para um dashboard. Os cards precisam funcionar em uma página full width e também em uma sidebar estreita. Use container queries quando o contexto do componente mudar, espaçamento e tipografia fluidos, e mantenha os breakpoints alinhados à nossa escala de tokens sm/md/lg, a menos que o conteúdo exija outro limite.”

Como transformar um objetivo vago em um prompt forte

Um bom prompt de responsive-design usage geralmente inclui cinco partes:

1. Objeto de UI: lista de cards, barra de navegação, tabela de preços, formulário, tabela de dados
2. Mudanças de comportamento: empilhar, quebrar linha, colapsar, redimensionar, reordenar, revelar
3. Origem da restrição: viewport, container pai, largura do conteúdo
4. Regras do sistema: escala de tokens, regras de grid, tamanho mínimo de toque, necessidades de acessibilidade
5. Formato de saída: exemplo em CSS, plano de implementação, justificativa de breakpoints, orientação de refatoração

Exemplo de prompt:

“Use the responsive-design skill to propose a responsive strategy for a product comparison table. Prioritize small screens first, avoid horizontal overflow where possible, use content-based breakpoints, and explain whether container queries or viewport media queries should control each part. Include sample CSS for typography, spacing, and layout transitions.”

Quando pedir container queries na responsive-design

Use container queries quando um componente precisa se adaptar com base no lugar onde foi inserido, e não apenas na largura do navegador. Isso é especialmente importante para cards reutilizáveis, painéis laterais, widgets, módulos embarcados e componentes de design system.

O arquivo references/container-queries.md do repositório é a melhor referência se o seu componente aparece em vários layouts-pai. Ele inclui sintaxe prática, named containers e observações sobre suporte a navegadores.

Quando pedir layouts fluidos em vez de mais breakpoints

Se o seu problema de UI é principalmente escalar texto, espaçamento ou larguras de forma suave, direcione o agente primeiro para técnicas fluidas. O arquivo references/fluid-layouts.md é útil quando você quer menos saltos rígidos de breakpoint e um redimensionamento mais natural com clamp(), unidades relativas e intrinsic sizing.

Isso normalmente melhora:

• headings e texto corrido
• espaçamento entre seções
• dimensionamento de cards
• grids que devem “respirar” antes de travar em outro estado

Como usar bem a orientação de breakpoints

O repositório favorece fortemente breakpoints mobile-first guiados pelo conteúdo, e não catálogos de dispositivos. Na prática, peça para a skill justificar cada breakpoint com base na pressão do layout: comprimento de linha, cards espremidos, overflow em tabelas, quebra na navegação ou problemas com alvos de toque.

Se a sua equipe já usa tokens de breakpoint do Tailwind ou do Bootstrap, diga isso. As referências incluem escalas comuns, o que ajuda a skill a mapear uma estratégia moderna para sistemas já existentes em vez de inventar valores arbitrários.

Fluxo de trabalho sugerido para projetos reais

Um fluxo prático com a responsive-design guide:

1. Descreva o componente e os modos de falha em tamanhos pequenos e grandes.
2. Peça uma estratégia de layout antes de pedir código.
3. Decida o que deve ser fluido, o que deve ter snap e o que deve fazer reflow.
4. Só então peça CSS de exemplo, depois que a estratégia estiver consistente.
5. Teste a saída com as larguras reais dos seus containers, não apenas com presets de navegador.
6. Faça iterações com screenshots, estrutura DOM ou CSS atual se a primeira resposta vier genérica demais.

Essa sequência gera resultados melhores do que pedir o CSS final logo de cara.

Formatos de saída que funcionam melhor

Peça para a skill um destes formatos de saída:

• plano de implementação responsiva
• tabela de justificativa de breakpoints
• padrão inicial de CSS
• estratégia de refatoração de componente
• auditoria de um layout existente
• decisão “container query vs media query”

Esses formatos forçam decisões mais claras do que simplesmente “me dê um código responsivo”.

Dicas práticas que melhoram a qualidade das respostas

Para obter resultados melhores com responsive-design for UI Design:

• inclua a estrutura HTML atual quando as relações de layout importarem
• especifique se o comprimento do conteúdo varia muito
• informe o tamanho mínimo de texto legível e os tamanhos mínimos de alvos interativos
• diga ao agente se é permitido reordenar conteúdo
• aponte restrições de navegadores legados antes que ele sugira soluções muito centradas em container queries

Sem essas informações, a skill pode escolher padrões tecnicamente modernos que não se encaixam na sua matriz de suporte ou na arquitetura dos seus componentes.

FAQ da skill responsive-design

A skill responsive-design é amigável para iniciantes?

Sim, se você já conhece o básico de CSS. A skill é conceitualmente moderna e não foi pensada como tutorial para iniciantes, então funciona melhor para quem consegue ler CSS e quer tomar decisões responsivas melhores. Iniciantes ainda podem usá-la, mas devem esperar termos como container queries, intrinsic sizing e escalas fluidas.

Esta skill gera código específico para frameworks?

Não como foco principal. O conteúdo do repositório é centrado em padrões de CSS. Ainda assim, você pode pedir adaptação para React, Vue, Tailwind ou CSS puro, mas o valor central está na estratégia responsiva, não nos detalhes de integração com framework.

responsive-design é melhor do que um prompt comum de UI?

Na maioria dos casos, sim, quando responsividade é parte central da tarefa. Prompts comuns frequentemente recaem em hábitos antigos de breakpoint ou em orientações rasas do tipo “empilha no mobile”. A responsive-design skill dá ao agente um vocabulário mais atual e opinativo para tomar decisões de layout.

Quando eu não deveria usar responsive-design?

Evite usar se sua tarefa for principalmente:

• branding visual
• geração de mockup estático
• design de interação centrado em animações
• setup de framework sem relação com layout
• recriação pixel-perfect sem decisões sobre comportamento adaptativo

Ela também é uma escolha fraca se sua equipe não puder usar recursos modernos de CSS e precisar de padrões de compatibilidade da era do IE.

Ela cobre preocupações com suporte a navegadores?

Em parte. As referências mencionam suporte moderno, especialmente para container queries, e sugerem fallbacks graduais. Mas esta não é uma skill de matriz de compatibilidade. Se suporte a navegadores for crítico, inclua explicitamente no prompt quais são os navegadores mínimos suportados.

A skill pode ajudar com design systems?

Sim. Ela é uma boa opção para definir filosofia de breakpoints, espaçamento e tipografia alinhados a tokens e comportamento reutilizável de componentes em diferentes containers. É especialmente útil quando um design system precisa de menos gambiarras específicas de página e mais componentes portáveis.

Como melhorar a skill responsive-design

Dê restrições reais para a responsive-design

O maior salto de qualidade vem das restrições. Forneça larguras reais, nomes de tokens, amostras de conteúdo e estados de UI. “Card responsivo para dashboard” é vago; “card usado em uma sidebar de 320px e em uma grid principal de 1200px, com títulos longos e duas ações” já é acionável.

Peça decisões, não apenas código

Prompt melhor:
“Use the responsive-design skill to decide which parts should use fluid sizing, which need breakpoints, and where container queries are justified.”

Isso produz um raciocínio mais forte do que:
“Write responsive CSS.”

Forneça o CSS existente ao refatorar

Se você já tem código de layout, cole o CSS atual e peça para a skill simplificá-lo. Isso ajuda a remover media queries desnecessárias, identificar suposições frágeis de largura e substituir lógica baseada apenas em viewport por regras mais conscientes do componente, quando fizer sentido.

Modos de falha comuns para observar

A primeira resposta ainda pode ser fraca se:

• o agente adivinhar breakpoints sem evidência do conteúdo
• container queries forem usadas onde regras de viewport seriam mais simples
• tipografia fluida for adicionada sem limites mínimos e máximos
• mudanças de layout ignorarem acessibilidade ou conforto de leitura
• os exemplos parecerem elegantes, mas não corresponderem à sua estrutura DOM

Esses problemas são corrigíveis se você pedir justificativa e vincular cada regra a um problema real de UI.

Use prompts de iteração depois do primeiro rascunho

Bons prompts de continuação:

• “Reduce unnecessary breakpoints and explain what can be fluid instead.”
• “Refactor this so the component works in both narrow sidebar and wide content areas.”
• “Add fallbacks for teams that cannot rely fully on container queries.”
• “Audit this layout for overflow, cramped text, and awkward wrap points.”

Esses follow-ups melhoram mais a adoção prática do que pedir uma reescrita completa do zero.

Valide em contextos de componente, não apenas em tamanhos de tela

Um insight central da responsive-design skill é que muitos problemas surgem quando se testa apenas larguras de viewport. Melhore os resultados verificando o mesmo componente dentro de:

• conteúdo de página inteira
• sidebar
• modal
• grid densa de dashboard
• seção de marketing embutida

Se o comportamento muda conforme o container, diga isso logo no prompt para que a skill escolha o mecanismo responsivo correto.

Use os arquivos de referência como âncoras no prompt

Mencione diretamente as referências do repositório quando quiser respostas mais aprofundadas:

• references/container-queries.md para responsividade em nível de componente
• references/fluid-layouts.md para escalonamento suave
• references/breakpoint-strategies.md para decisões de breakpoint mobile-first

Essa é uma das formas mais simples de obter um responsive-design usage mais bem fundamentado de um agente, em vez de conselhos genéricos de frontend.

Melhore os resultados com critérios de aceitação melhores

Peça para a skill otimizar para resultados específicos:

• menos media queries
• nenhum overflow horizontal abaixo de uma determinada largura
• comprimentos de linha legíveis
• componentes reutilizáveis em diferentes tamanhos de container
• espaçamento e tipografia alinhados a tokens
• mínimo layout shift entre breakpoints

Critérios de aceitação claros tornam a responsive-design skill muito mais útil para trabalho de UI em produção.