Communitygithub.com

coastdigitalgroup/coastai-skills

Diseñar e implementar un pie de página de sitio web estructurado, escalable y accesible que maneje la navegación global, la información secundaria y los requisitos legales.

¿Qué es coastai-skills?

Esta habilidad proporciona una metodología completa para diseñar el pie de página de un sitio web, abordándolo como un ancla estructural que proporciona cierre a la experiencia de la página, un directorio para enlaces críticos para SEO y un contenedor para información legal, de marca y social. Es útil para sitios web de múltiples páginas, organizando mapas de sitio complejos y estandarizando la ubicación de elementos como avisos legales y derechos de autor. La habilidad guía al usuario a través de un flujo de trabajo que incluye la categorización del contenido del pie de página en zonas (identidad, navegación, acción, utilidad), la selección de un patrón estructural (pie delgado, pie graso o pie orientado a la acción), el establecimiento de una jerarquía visual, la definición de la adaptación móvil (apilamiento, acordeones) y la adición de capas semánticas y de accesibilidad (etiquetas HTML, roles ARIA, contraste de color). También incluye reglas de decisión, restricciones y criterios de validación para garantizar que el resultado final sea accesible, responsivo y legalmente conforme.

Compatible con~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/coastdigitalgroup/coastai-skills/tree/HEAD/website-design/site-footer-system
Ver original→Ver todas las habilidades

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentación

Sistema de Pie de Página del Sitio

Propósito

El Sistema de Pie de Página del Sitio proporciona una metodología para diseñar el ancla de nivel inferior de un sitio web. Sirve como red de seguridad para los usuarios que no han encontrado lo que buscan, un directorio para enlaces críticos para SEO y un contenedor para información legal, de marca y social obligatoria. Un pie de página bien diseñado proporciona cierre a la experiencia de la página sin crear sobrecarga cognitiva.

Casos de Uso

  • Diseñar el pie de página global para sitios web de múltiples páginas.
  • Organizar mapas de sitio complejos en grupos de navegación manejables.
  • Estandarizar la colocación de enlaces utilitarios (Términos, Privacidad, Derechos de Autor).
  • Integrar llamadas a la acción globales (Newsletters, Contacto) al final de la página.
  • Establecer una estrategia responsiva para listas de enlaces de varias columnas.

Cuándo NO Usar

  • Mini-sitios de una sola página: Donde una simple línea de "Derechos de Autor" es suficiente.
  • Aplicaciones Web Progresivas (PWA) con Pestañas Inferiores: Donde la navegación persistente tipo aplicación reemplaza la necesidad de un pie de página tradicional.
  • Páginas de Aterrizaje Solo de Conversión: Donde un pie de página podría proporcionar "fugas" o distracciones que alejen al usuario de la CTA principal (aunque normalmente todavía se requiere un pie de página mínimo con enlaces legales).

Entradas

  1. Arquitectura de la Información (IA): Todos los enlaces no incluidos en el encabezado principal.
  2. Requisitos Legales y de Cumplimiento: Política de Privacidad, Términos de Servicio, etc.
  3. Identidad de Marca: Logotipo, perfiles de redes sociales y declaración de misión de la empresa.
  4. Acciones Globales: Objetivos de conversión secundarios como el registro al Newsletter.
  5. Puntos de Inflexión de Dispositivos: Definiciones del sistema de cuadrícula para el apilamiento responsivo de columnas.

Salidas

  1. Mapa de Anatomía del Pie de Página: Definición visual o estructural de zonas (Identidad, Enlaces, Utilidad, CTA).
  2. Jerarquía de Enlaces: Grupos categorizados de navegación secundaria.
  3. Plano Responsivo: Reglas sobre cómo las columnas se apilan o colapsan en móvil.
  4. Hitos de Accesibilidad: Etiquetas semánticas (<footer>, <nav>) y etiquetas.

Flujo de Trabajo

1. Categorizar el Contenido del Pie de Página

Divida su contenido en zonas lógicas:

  • Zona de Identidad: Logotipo, descripción e iconos de redes sociales.
  • Zona de Navegación: Grupos de enlaces agrupados por tema (Productos, Empresa, Recursos).
  • Zona de Acción: Registro al Newsletter o información de contacto principal.
  • Zona de Utilidad: Derechos de autor, enlaces legales y selector de idioma.

2. Seleccionar un Patrón Estructural

Elija un patrón según la complejidad del sitio:

  • El Pie de Página Delgado: Una sola fila para sitios minimalistas.
  • El Pie de Página Graso (Mapa del Sitio): Diseño de múltiples columnas para empresas/comercio electrónico.
  • El Pie de Página Orientado a la Acción: Se centra en una CTA grande antes de las listas de enlaces.

3. Establecer Jerarquía Visual

Aplique sistema-de-jerarquia-visual al pie de página:

  • Use encabezados en negrita para los grupos de enlaces.
  • Asegúrese de que el tamaño del texto sea legible pero ligeramente más pequeño que el texto del cuerpo (por ejemplo, 14px).
  • Cree alto contraste entre el fondo del pie de página y los colores de los enlaces.

4. Definir la Adaptación Móvil

Mapee la transición de Escritorio a Móvil:

  • Apilamiento: Los diseños de varias columnas deben apilarse en una sola columna.
  • Patrón de Acordeón: Para pies de página muy "grasos", considere colapsar los grupos de enlaces en acordeones en móvil para reducir la longitud de la página.
  • Objetivos Táctiles: Asegúrese de que todos los enlaces sean fáciles de tocar. Cumpla con WCAG 2.2 SC 2.5.8 (Tamaño Mínimo de Objetivo): los objetivos interactivos deben tener al menos 24x24px, con espacio adecuado entre enlaces adyacentes; prefiera 44px+ para objetivos táctiles principales.

5. Agregar Capas Semánticas y de Accesibilidad

  • Envuelva la sección en una etiqueta <footer>.
  • Use elementos <nav> para los grupos de enlaces con aria-labels únicos (por ejemplo, "Recursos del Pie de Página").
  • Asegúrese de que la relación de contraste cumpla con WCAG AA (4.5:1).

Reglas de Decisión

  • La Regla del Mapa del Sitio: Si el sitio tiene más de 15 páginas, use un "Pie de Página Graso" de varias columnas para ayudar en el descubrimiento.
  • Enlaces Externos: Las redes sociales y los recursos externos deben abrirse en nuevas pestañas (target="_blank") para mantener a los usuarios en su sitio.
  • Colocación de Derechos de Autor: Coloque siempre los derechos de autor y los enlaces legales en la parte inferior absoluta (el "Sub-pie de página").
  • Prioridad de CTA: Si el pie de página incluye un registro al newsletter, debe ser el elemento visualmente más distintivo del pie de página.

Restricciones

  • Accesibilidad: Debe ser accesible mediante el orden de tabulación del teclado. Todos los enlaces deben tener estados de enfoque visibles que nunca sean oscurecidos por encabezados fijos o banners de cookies (WCAG 2.2 SC 2.4.11 Enfoque No Oscurecido).
  • Responsividad: Las columnas no deben desbordarse ni volverse demasiado estrechas (ancho mínimo).
  • Legalidad: Debe incluir los enlaces obligatorios requeridos por las regulaciones locales (GDPR, CCPA, etc.).

Patrones de Falla Comunes

  • Sobrecarga de Enlaces: Incluir cada página del sitio, creando un muro de texto que los usuarios ignoran.
  • Contraste Deficiente: Usar texto gris claro sobre fondos oscuros que no cumple con los estándares de accesibilidad.
  • El "Callejón Sin Salida": Un pie de página demasiado pequeño o faltante, que deja a los usuarios que se desplazan hasta el fondo sin un lugar al que ir.
  • Agrupación No Estándar: Mezclar enlaces no relacionados (por ejemplo, "Carreras" bajo "Productos").

Criterios de Validación

  • El pie de página usa etiquetas semánticas <footer> y <nav>.
  • Los grupos de enlaces tienen encabezados claros y descriptivos.
  • La vista móvil apila las columnas correctamente y mantiene los objetivos táctiles.
  • La relación de contraste para todo el texto del pie de página cumple con WCAG AA (4.5:1).
  • Los enlaces legales y los derechos de autor están presentes y correctamente colocados.
  • Los enlaces a redes sociales usan iconos reconocibles con etiquetas de texto accesibles.

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.

Skills relacionados

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