Component for creating animated interface placeholders during content loading.

Skeleton provides smooth transitions between loading state and real content display. The component automatically manages child element visibility through the `active` property and supports a CSS class system for creating various types of placeholders.

**Key Features:**

- Automatic content visibility management
- Support for special CSS classes for placeholders
- Component integration via `isSkeleton` flag
- Flexible placeholder types (text, background, borders)
- Animated loading effects

**Common Use Cases:**

- Product and user card placeholders
- List and table skeletons
- Image and avatar placeholders
- Text blocks during loading
- Complex forms with multiple fields

```html
<script setup>
import { ref } from 'vue'

const isLoading = ref(true)

setTimeout(() => {
  isLoading.value = false
}, 2000)
</script>

<template>
  <Skeleton :active="isLoading">
    <!-- Placeholders visible during loading -->
    <div class="skeleton__background avatar"></div>
    <div class="skeleton__text title"></div>
    <div class="skeleton__textVariant subtitle"></div>

    <!-- Real content -->
    <img src="/avatar.jpg" alt="User avatar" />
    <h3>{{ user.name }}</h3>
    <p>{{ user.description }}</p>
  </Skeleton>
</template>
```
