# Continuity

> El ojo sigue líneas y curvas naturalmente. Use cuando diseñe flujos visuales, navegación, timelines, o guíe la atención del usuario.

- Skill: `majiayu000/continuity` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds add majiayu000/continuity`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/continuity/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/continuity

---


# 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

- Wertheimer, M. (1923). "Laws of Organization in Perceptual Forms"
- Ware, C. (2012). "Information Visualization: Perception for Design"
- https://www.smashingmagazine.com/2014/03/design-principles-visual-perception-and-the-principles-of-gestalt/