OpenSkillIndex← back to search
claude-codeother

Claude-skill-registry continuity

Principio de Continuidad

install
source · Clone the upstream repo
git clone https://github.com/majiayu000/claude-skill-registry
Claude Code · Install into ~/.claude/skills/
T=$(mktemp -d) && git clone --depth=1 https://github.com/majiayu000/claude-skill-registry "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/data/continuity" ~/.claude/skills/majiayu000-claude-skill-registry-continuity-2acd8b && rm -rf "$T"
manifest: skills/data/continuity/SKILL.md
tags
#visual-design#ux-principles#gestalt-theory#layout-guidance#user-flow
source content

Principio de Continuidad

Resumen

Los elementos alineados en una línea o curva se perciben como más relacionados que elementos no alineados. El ojo tiende a seguir el camino más suave.

Origen

  • Escuela: Psicología de la Gestalt
  • Año: ~1920s
  • Autores principales: Max Wertheimer, Kurt Koffka, Wolfgang Köhler

Fundamento Psicológico

El sistema visual interpreta líneas y curvas como continuaciones naturales, prefiriendo trayectorias suaves sobre cambios abruptos. Esto permite seguir elementos visuales sin esfuerzo consciente y predecir hacia dónde continúa un patrón.

Aplicación en Diseño

Alineación de Elementos

  • Grids con elementos alineados en ejes
  • Formularios con campos alineados a la izquierda
  • Tablas con columnas consistentes
  • Menús con items alineados

Flujos y Procesos

  • Timelines lineales
  • Progress bars continuos
  • Wizards con pasos conectados
  • Onboarding flows con dirección clara

Guía Visual

  • Líneas que conectan elementos relacionados
  • Flechas que indican dirección
  • Borders que crean caminos visuales
  • Gradientes que guían el ojo

Navegación

  • Breadcrumbs como camino lineal
  • Tabs alineados horizontalmente
  • Sidebar con items en columna
  • Pagination como secuencia

Ejemplos

  • Google Maps: Rutas como líneas continuas
  • LinkedIn: Experiencia laboral como timeline vertical
  • Checkout flows: Pasos conectados horizontalmente
  • Slides/Carousels: Indicadores de posición en línea
  • Tables: Filas y columnas alineadas

Anti-patterns

  • ❌ Elementos relacionados sin alineación
  • ❌ Timelines con saltos visuales
  • ❌ Formularios con campos desalineados
  • ❌ Menús con items en posiciones aleatorias
  • ❌ Flujos sin dirección clara

Métricas

  • Visual Flow Analysis: Eye-tracking sigue caminos esperados
  • Alignment Audit: Consistencia de alineación en grids
  • Task Flow Completion: Usuarios siguen secuencias correctamente
  • Scan Path Efficiency: Movimientos oculares optimizados

Principios Relacionados

  • [[proximity]] - Cercanía refuerza continuidad
  • [[common-fate]] - Elementos que se mueven juntos
  • [[figure-ground]] - Separación de camino vs fondo

Referencias