---
name: skeleton
kind: component
lang: ts
domain: ui
version: "1.0.0"
purity: impure
signature: "Skeleton(props: HTMLAttributes<HTMLDivElement>): JSX.Element"
description: "Sistema de loading skeletons: base, text, card, avatar, button, table. Variantes preconfiguradas para estados de carga."
tags: [skeleton, loading, placeholder, component, ui]
uses_functions: [cn_ts_core]
uses_types: []
returns: []
returns_optional: false
error_type: ""
imports: [react]
tested: false
tests: []
test_file_path: ""
file_path: "frontend/functions/ui/skeleton.tsx"
props:
  - name: className
    type: "string"
    required: false
    description: "Clases CSS adicionales"
  - name: lines
    type: "number"
    required: false
    description: "Número de líneas (SkeletonText, default 3)"
  - name: rows
    type: "number"
    required: false
    description: "Filas de tabla (SkeletonTable, default 5)"
  - name: columns
    type: "number"
    required: false
    description: "Columnas de tabla (SkeletonTable, default 4)"
  - name: size
    type: "'xs' | 'sm' | 'md' | 'lg' | 'xl'"
    required: false
    description: "Tamaño del avatar (SkeletonAvatar, default md)"
emits: []
has_state: false
framework: react
variant: [base, text, card, avatar, button, table]
source_repo: "https://gitea-dgg044oo04woo4ggcsws4gk0.organic-machine.com/Bl4cksmith/Frontend_Library"
source_license: "MIT"
source_file: "frontend/src/components/ui/skeleton.tsx"
---

## Ejemplo

```tsx
<SkeletonCard />
<SkeletonText lines={4} />
<SkeletonTable rows={10} columns={5} />
<SkeletonAvatar size="lg" />
<SkeletonButton />
```

## Notas

Exporta 6 variantes preconfiguradas. Todas componen sobre el Skeleton base con animate-pulse.
La última línea de SkeletonText se acorta a w-4/5 para simular texto real.
SkeletonCard incluye imagen (h-[180px]) + dos líneas de texto.