Communitygithub.com

Sistema de Paginação

Projete e implemente uma estrutura sistemática para navegar em grandes coleções de conteúdo, garantindo orientação clara, acessibilidade e travessia eficiente.

O que é Sistema de Paginação?

Este skill fornece uma metodologia completa para projetar sistemas de paginação que dividem grandes conjuntos de dados em páginas discretas. Ele é útil para desenvolvedores que trabalham com listas extensas de itens (produtos, resultados de busca, artigos) em plataformas web, garantindo que os usuários mantenham uma noção clara de sua localização e do conteúdo restante. O skill abrange desde a definição de estratégias de intervalo (simples, moderada ou complexa com elipses) até o design de controles de navegação, espaçamento fluido e acessibilidade (WCAG AA/AAA). Ele também inclui regras de decisão (números vs. "Carregar mais"), restrições de responsividade e padrões de falha comuns. As saídas incluem especificações visuais de anatomia, matrizes de estado, estratégia responsiva e um mapa de acessibilidade com funções ARIA, rótulos e padrões de interação por teclado.

Funciona com~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/coastdigitalgroup/coastai-skills/tree/HEAD/website-design/pagination-system
Ver original→Navegar por todas as habilidades

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentação

O que Sistema de Paginação faz?

Propósito

O skill Sistema de Paginação fornece uma metodologia para projetar a interface que divide grandes conjuntos de dados em páginas discretas. Ele garante que os usuários possam percorrer longas listas de itens (produtos, resultados de busca, artigos) mantendo uma noção clara de "onde estão" e "quanto conteúdo resta". Um sistema de paginação robusto equilibra precisão de navegação com simplicidade, minimizando a carga cognitiva e prevenindo a desorientação do usuário.

Casos de Uso

  • Projetar páginas de resultados de busca para sites de e-commerce ou diretórios.
  • Organizar arquivos longos de blogs ou notícias.
  • Implementar "Carregar Mais" vs. paginação numerada tradicional para hubs de conteúdo.
  • Criar navegação para tabelas de painéis de dados ou logs com muitos dados.
  • Otimizar formulários de várias páginas ou assistentes baseados em etapas onde seções individuais são tratadas como visualizações distintas.

Quando NÃO Usar

  • Conjuntos de Dados Pequenos (<12 itens): Se todo o conteúdo couber confortavelmente em uma ou duas telas, a paginação adiciona cliques e atrito desnecessários.
  • Contextos de Rolagem Infinita: Onde o usuário está explorando feeds sociais ou streams de notícias com foco em descoberta, onde endereços de página específicos não são importantes (use implementacao-rolagem-infinita).
  • Conteúdo Narrativo Único: Para artigos ou histórias que seguem um fluxo linear onde links "Anterior/Próximo" são suficientes.

Entradas

  1. Contagem Total de Itens: Quantos itens no total existem na coleção?
  2. Itens por Página: Qual é a densidade padrão (por exemplo, 12, 24, 48 itens)?
  3. Contexto da Página Atual: Qual página o usuário está visualizando no momento?
  4. Restrições de Exibição: Quanto espaço horizontal está disponível para a barra de paginação (do sistema-grade-responsiva)?

Saídas

  1. Especificação de Anatomia da Paginação: Estilos visuais definidos para números de página, botões Anterior/Próximo e controles de "Pular" (elipses).
  2. Matriz de Estados: Tratamentos visuais para estados Padrão, Atual, Hover, Foco e Desabilitado (por exemplo, botão "Anterior" na Página 1).
  3. Estratégia Responsiva: Um plano de como a barra de paginação se adapta do Desktop (intervalo completo) para Mobile (visualização compacta).
  4. Mapa de Acessibilidade: Definições explícitas para funções ARIA, rótulos e padrões de interação por teclado.

Fluxo de Trabalho

1. Definir a Estratégia de Intervalo

Determine quantos números de página mostrar de uma vez com base no volume total:

  • Simples (3-5 Páginas): Mostrar todos os números de página.
  • Moderado (6-10 Páginas): Mostrar primeiro, último e uma janela ao redor da página atual.
  • Complexo (10+ Páginas): Usar elipses (...) para representar intervalos ignorados (por exemplo, 1 ... 4 5 6 ... 20).

2. Projetar os Controles de Navegação

Estabelecer a hierarquia visual da barra de paginação:

  • Ações Primárias: Os botões Anterior e Próximo devem estar claramente visíveis e situados nas extremidades da barra.
  • Indicador de Página Atual: Usar um estilo de alto contraste (cor de fundo ou borda espessa) para tornar a página atual imediatamente óbvia.
  • Números de Página: Garantir que pareçam elementos interativos (por exemplo, usando o sistema-estado-interativo).

3. Aplicar Espaçamento e Tamanho Fluidos

Usar o sistema-espacamento-fluido para garantir que os alvos sejam utilizáveis:

  • Alvos de Toque: Cada número de página e botão deve ter pelo menos 44x44px; se a densidade visual exigir controles menores, o WCAG 2.2 (2.5.8 Tamanho Mínimo do Alvo) define um piso absoluto de 24x24px com espaçamento adequado entre os alvos para evitar ativação acidental.
  • Lacunas Internas: Usar espaçamento consistente (por exemplo, --space-xs) entre os números de página para evitar cliques errados.

4. Estabelecer Acessibilidade (WCAG AA/AAA)

  • Marco: Envolver a paginação em um elemento <nav> com aria-label="pagination".
  • Página Atual: Usar aria-current="page" no link da página ativa.
  • Estados Desabilitados: Garantir que o botão "Anterior" esteja visualmente e programaticamente desabilitado (por exemplo, aria-disabled="true") quando na primeira página.
  • Caminho do Teclado: Os usuários devem poder navegar com Tab por cada número de página e controle, e o controle focado nunca deve estar totalmente oculto por cabeçalhos/rodapés fixos (WCAG 2.2, 2.4.11 Foco Não Obscurecido).

5. Planejar Adaptações Responsivas

Mapear a transição do desktop para o mobile:

  • A Regra de Redução: No mobile, ocultar a maioria dos números de página e mostrar apenas "Anterior", "Próximo" e o status atual (por exemplo, "Página 4 de 20").
  • Escala Visual: Se os números de página precisarem permanecer, reduzir a "janela" para apenas a página atual e seus vizinhos imediatos (por exemplo, 1 ... 4 ... 20).

Regras de Decisão

  • Números vs. Carregar Mais: Usar números quando os usuários precisarem marcar ou compartilhar resultados específicos (por exemplo, "Veja a página 4"). Usar "Carregar Mais" quando o objetivo for descoberta e comparação prolongadas.
  • O Máximo de "7 Itens": No desktop, evitar mostrar mais de 7 a 9 itens na barra de paginação (incluindo elipses e botões) para manter o layout limpo.
  • Previsibilidade: Manter sempre "Anterior" à esquerda e "Próximo" à direita. Nunca ocultar esses botões; apenas desabilitá-los quando não forem aplicáveis.
  • Feedback Imediato: Clicar em um número de página deve rolar imediatamente o usuário para o topo da lista de conteúdo ou fornecer um estado claro de "carregando".

Restrições

  • Acessibilidade: A paginação deve ser navegável por teclado e amigável para leitores de tela. Os rótulos devem ser descritivos (por exemplo, "Ir para a página 5" em vez de apenas "5"). Os alvos interativos devem atender pelo menos o mínimo de 24x24px do WCAG 2.2 (2.5.8), com 44x44px preferido para os controles primários Anterior/Próximo.
  • Responsividade: A barra de paginação nunca deve causar estouro horizontal ou sobrepor outros elementos da interface.
  • Hierarquia Visual: A paginação deve ser visualmente distinta do conteúdo, mas não mais proeminente que o próprio conteúdo.

Padrões de Falha Comuns

  • Alvos de Toque Minúsculos: Números pequenos e agrupados que são impossíveis de tocar com precisão no mobile.
  • Estado Ativo Invisível: Usuários não sabendo em qual página estão porque o estilo "Ativo" é muito sutil.
  • Loop de Teclado Quebrado: Esquecer de lidar com o foco quando o conteúdo da página é atualizado via AJAX (o usuário deve ser movido para o topo dos resultados).
  • A "Explosão Mobile": Tentar mostrar 10 números de página em uma tela mobile, causando rolagem horizontal ou quebra de layout.
  • Rótulos Vagas: Usar apenas números sem aria-labels, dificultando para usuários de leitores de tela entenderem o contexto.

Critérios de Validação

  • A página atual é visualmente distinta e possui aria-current="page".
  • A navegação está envolta em um <nav> com um aria-label descritivo.
  • Os alvos de toque atendem pelo menos o mínimo de 24x24px do WCAG 2.2 (44x44px para os controles primários Anterior/Próximo).
  • Os estados desabilitados (Anterior na Página 1, Próximo na Última Página) são claros e definidos programaticamente.
  • O comportamento responsivo está definido (visualização compacta para mobile).
  • Usuários de teclado podem navegar por toda a barra de paginação.
  • As elipses são usadas corretamente para intervalos grandes.

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

coastdigitalgroup/coastai-skills

Design and implement a systematic framework for progressive disclosure using accordions, ensuring structural integrity, visual affordances, and accessibility across different content densities and devices.

coastdigitalgroup/coastai-skills

Design and implement a systematic framework for long-form content, managing readability, vertical rhythm, and information density to ensure a superior reading experience.

coastdigitalgroup/coastai-skills

Design and implement a systematic framework for informational elements that communicate state (Badges) and categorization (Tags) with clarity and accessibility.

coastdigitalgroup/coastai-skills

Design and implement a systematic framework for non-overlay notifications, managing global announcements and contextual inline alerts to communicate system states without interrupting the user's flow.

coastdigitalgroup/coastai-skills

Design and implement a systematic, asymmetrical bento-grid layout framework to organize diverse content types cohesively while maintaining strict visual hierarchy, logical focus order, and responsive flexibility.

coastdigitalgroup/coastai-skills

Design a responsive, mobile-first bottom navigation bar and persistent action dock system for mobile websites and web applications, establishing spatial anchors, tab bar anatomy, badge indicators, thumb-zone ergonomics, safe area inset handling, active/inactive state contrast, and desktop responsive adaptation rules.

coastdigitalgroup/coastai-skills

Design a mobile-first bottom sheet overlay system with configurable detents, drag affordances, safe area padding, responsive desktop modal/popover adaptation, and WCAG AA accessibility compliance.

coastdigitalgroup/coastai-skills

Design and implement a systematic framework for secondary navigation trails that provide orientation, context, and one-click access to parent levels in deep information architectures.

coastdigitalgroup/coastai-skills

Design and implement a systematic framework for buttons and interactive triggers, managing visual hierarchy, variant logic, and action grouping to ensure clear intent and accessible interaction.

coastdigitalgroup/coastai-skills

Design a systematic framework for date and time selection, managing calendar grids, range pickers, and scheduling interfaces to ensure precision and accessibility.

coastdigitalgroup/coastai-skills

Design and implement a systematic framework for modular content containers that maintain hierarchy, structural integrity, and action alignment across variable content and responsive viewports.

coastdigitalgroup/coastai-skills

Design and implement a systematic framework for horizontal discovery components, managing navigation affordances, scroll behavior, and accessibility to ensure effective content density without compromising usability.

coastdigitalgroup/coastai-skills

Design a systematic, highly accessible, and developer-friendly UI layout framework for code blocks, snippet showcases, multi-file code tabs, line-highlighting, diff views, and syntax token contrast in technical documentation and developer platforms.

coastdigitalgroup/coastai-skills

Design a systematic framework for global command menus (Cmd+K panels) that combines keyboard-driven navigation, command execution, and shortcut discovery into an accessible, responsive overlay.

coastdigitalgroup/coastai-skills

Design and implement a systematic framework for threaded conversations, managing nesting depths, action hierarchies, and community signaling to foster engagement and readability.

coastdigitalgroup/coastai-skills

Design and implement a systematic framework for side-by-side comparison interfaces, managing high attribute density and responsive complexity to support informed decision-making.

coastdigitalgroup/coastai-skills

Design and implement a systematic framework for user privacy, managing consent banners, preference centers, and persistent privacy controls to balance legal compliance with user trust.

coastdigitalgroup/coastai-skills

Design and implement a systematic, highly accessible, and responsive visual layout framework for conversational chat widgets, live chat boxes, and chatbot panels that ensures clear message scannability, native focus flow, and seamless mobile keyboard adaptation.

coastdigitalgroup/coastai-skills

Design a systematic, accessible, and high-conversion framework for custom select dropdowns and comboboxes, defining anatomy, states, search-filtering, and responsive mobile-adaptive patterns.

coastdigitalgroup/coastai-skills

Design and implement a systematic color palette that ensures WCAG 2.2 accessibility compliance. Trigger this skill when asked to define brand colors, create UI themes, or establish a visual system for a website.

Habilidades Relacionadas

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community