responsive-designpor Seth Hobson

Responsive Design Skill.

Uma skill de Claude Code e Codex para design de UI: layouts responsivos com container queries, tipografia fluida, CSS Grid e breakpoints mobile-first.

Web & UI
Código de UI

Baixar OpenDesign Ver guia de uso

wshobson/agents · plugins/ui-design/skills/responsive-design/SKILL.mdSKILL.md

--- name: responsive-design description: Implement modern responsive layouts using container queries, fluid typography, CSS Grid, and mobile-first breakpoint strategies. Use when building adaptive interfaces, implementing fluid layouts, or creating component-level responsive behavior. --- ## When to Use This Skill ## Detailed patterns and worked examples ## Best Practices

Front matter e títulos de seção lidos do arquivo original em 2026-09-14 · 1.989 caracteres no total

01 O que faz

O que o Skill responsive-design faz no Claude Code e no Codex

Resumo, fluxo de trabalho e resultados, todos lidos do SKILL.md do skill.

Do SKILL.mdLido em 14/09/2026 · não é uma execução registrada

Nos termos do próprio skill

Este skill implementa layouts responsivos modernos usando container queries, tipografia fluida, CSS Grid e estratégias de breakpoints mobile-first. Ele abrange responsividade em nível de componente, escalas fluidas de tipografia e espaçamento, layouts complexos com CSS Grid e Flexbox, e estratégias de breakpoints para design systems. O skill trata de imagens e mídia responsivas, padrões de navegação adaptativa e tabelas e exibições de dados responsivas.

Ele enfatiza o desenvolvimento mobile-first, breakpoints baseados em conteúdo em vez de baseados em dispositivo, e container queries para adaptação em nível de componente. O skill inclui orientações sobre áreas de toque, propriedades lógicas para internacionalização e otimização de desempenho por meio de tratamento de imagens e lazy loading.

Código de UI

Veja o exemplo de prompt ↗

Como funciona

01
Comece com mobile-first
Comece com estilos para dispositivos móveis como base e, em seguida, aprimore progressivamente para telas maiores, em vez de trabalhar do desktop para baixo.
02
Defina breakpoints baseados em conteúdo
Defina breakpoints com base em onde o conteúdo precisa se reorganizar, não em dimensões específicas de dispositivos.

02 Encontre o ideal para você

Quando usar a skill responsive-design

Use a skill responsive-design no Claude Code ou Codex quando o trabalho for design de UI deste tipo. Adequação e limites abaixo são retirados do próprio arquivo da skill.

Boa Combinação

Implementando layouts responsivos mobile-first
Usando container queries para responsividade baseada em componentes
Criando escalas fluidas de tipografia e espaçamento
Criando estratégias de breakpoint para design systems
Construindo tabelas e exibições de dados responsivas

03 Dentro da skill

Regras que o Skill responsive-design dá ao Claude Code e ao Codex

1 instruções concretas, padrões e limites que o SKILL.md define para o agente — a parte do arquivo que muda o resultado.

Otimize e use Lazy Load
Otimize imagens para desempenho e aplique lazy load em conteúdo que aparece fora da tela inicialmente.

04 Coloque em prática

Instale responsive-design no Claude Code ou Codex

Um comando npx skills add, depois uma primeira tarefa no seu agente e uma checklist para o resultado.

Adicione responsive-design ao Claude Code, Codex ou Seu Agente

Rode no seu projeto; o instalador pergunta a qual agente adicioná-lo.

Terminal

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

Forma genérica da CLI skills para plugins/ui-design/skills/responsive-design/SKILL.md; o repositório pode documentar seu próprio caminho.

Dê ao Skill uma Primeira Tarefa de Design de UI

Escrito nos próprios termos do skill; substitua as partes entre colchetes pelo seu material.

Starter prompt

Build a responsive product card grid that uses container queries to adapt the card layout based on available space. Implement fluid typography for the product titles and descriptions, maintain 44x44px touch targets for all buttons, and use CSS Grid with mobile-first breakpoints. Include responsive product images with proper aspect ratios and lazy loading for cards below the fold.

Fonte: escrito a partir do SKILL.md nos próprios termos do skill.

Verifique o Primeiro Resultado

Antes de aceitar o resultado, procure por estes itens na transcrição e nos arquivos:

O resultado é entregue como código de UI, conforme o catálogo lista para esta skill.
O agente nomeia a skill responsive-design no seu plano ou transcrição antes de produzir o resultado.
Seu próprio conteúdo, nomes e números aparecem inalterados na saída.

No OpenDesign, importe responsive-design a partir do link do SKILL.md: Plugins → Add → Skill → Import from link, depois selecione-o na barra superior.

Baixar OpenDesign Ler o quickstart

05 Código aberto, rastreável

Fonte, Licença e Verificação

De onde vêm os fatos desta página e quando foram verificados pela última vez.

Author: Seth Hobson
Repository: github.com/wshobson/agents Branch main
Arquivo da skill: plugins/ui-design/skills/responsive-design/SKILL.md Checksum do conteúdo registrado na verificação; commit 4236bb9
License: MIT Do LICENSE.
Estrelas do repositório: 39.635 Snapshot do GitHub feito em 14/09/2026 para todo o repositório wshobson/agents, que contém 18 skills neste catálogo. Não é uma avaliação ou contagem de uso para responsive-design.
Verificado pelo OpenDesign: 14/09/2026 Arquivo de origem, caminho, texto da licença e contagem de estrelas foram verificados. Não integrado ao OpenDesign principal (verificado em 28/08/2026); uma execução ao vivo não foi registrada nesta página.

Dentro do SKILL.md

Quando Usar Esta SkillLista oito cenários, incluindo layouts mobile-first, container queries, tipografia fluida e exibições de dados responsivas
Padrões detalhados e exemplos práticosAponta para references/details.md para documentação de padrões mais profunda quando necessário
Boas PráticasOito princípios centrais, incluindo abordagem mobile-first, breakpoints de conteúdo, valores fluidos, container queries e desempenho
Problemas ComunsSete problemas frequentes, como overflow horizontal, larguras fixas, altura de viewport e dimensionamento de área de toque

A Descrição da Própria Skill

"Implemente layouts responsivos modernos usando container queries, tipografia fluida, CSS Grid e estratégias de breakpoint mobile-first. Use ao construir interfaces adaptativas, implementar layouts fluidos ou criar comportamento responsivo no nível do componente."

Descrição do front-matter do SKILL.md. O arquivo completo tem cerca de 1.989 caracteres. Leia o arquivo completo no GitHub.

Responsive Design

Execute responsive-design em uma Tarefa Real de Design de UI.

Baixe o OpenDesign, importe responsive-design do link do SKILL.md, cole o prompt acima e leia o plano antes do resultado.

Baixar OpenDesign Ver todas as skills