Skeleton
Esqueleto
Un skeleton es un marcador de posición sencillo con la forma del contenido que todavía está cargando.
Un ejemplo real
Una página de perfil guarda espacio para su foto y texto. El diseño se queda quieto cuando llegan los datos.
Partes principales
- 01State signal
- 02Human-readable message
- 03Timing or progress
- 04Recovery path
Úsalo cuando
Úsalo cuando se conozca el diseño y la espera sea fácil de notar.
No lo uses cuando
Nunca inventes detalles falsos, brilla por siempre, ni uses un esqueleto cuando el contenido aparece casi de inmediato.
Nombre usado en código
aria-busy="true" Antes de lanzarlo
Before release, check the page structure, keyboard access, visible focus, contrast, and zoom. Also check loading, empty, error, success, cancel, and reduced-motion states.
Outcome: Complete the task with Esqueleto (Skeleton). User context: Una página de perfil guarda espacio para su foto y texto. El diseño se queda quieto cuando llegan los datos. Recommended pattern: Esqueleto (Skeleton). Why it fits: Úsalo cuando se conozca el diseño y la espera sea fácil de notar. Do not use it when: Nunca inventes detalles falsos, brilla por siempre, ni uses un esqueleto cuando el contenido aparece casi de inmediato. Product requirements: Define the default, loading, empty, error, success, and recovery states. Keep user input. Give clear feedback after every action. Accessibility and resilience: Use semantic HTML, full keyboard access, and visible focus. Make the layout work when zoomed and support reduced motion. Follow the project’s current rules. Do not add a new UI library unless the project already uses it. Acceptance criteria: The main task works with keyboard only and at 320px width. Focus and status changes are announced. Check loading, failure, retry, cancel, and reduced-motion paths. Evidence and limits (evidence boundary): Ningún estándar oficial único controla todo el término. Su significado puede cambiar según equipos, plataformas o marcos. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
Revisa esta petición
Review how Esqueleto (Skeleton) is used now. Definition: Un skeleton es un marcador de posición sencillo con la forma del contenido que todavía está cargando. Release checks: Before release, check the page structure, keyboard access, visible focus, contrast, and zoom. Also check loading, empty, error, success, cancel, and reduced-motion states. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.