Skeleton UI Component Skill

Core Principle

Before building ANY UI element, check if Skeleton has a component or styled element for it. Do not hand-roll markup when a Skeleton component exists. This catalog lists everything available.

Import Pattern

import { ComponentName, Portal } from '@skeletonlabs/skeleton-svelte';

Composition Pattern

Skeleton uses granular child components:

<Avatar>
  <Avatar.Image src="..." />
  <Avatar.Fallback>JD</Avatar.Fallback>
</Avatar>

Data Flow

• Props in, onXxxChange callbacks out (e.g., onValueChange, onOpenChange)
• Collections use useListCollection() helper for item mapping

Positioned Content

Components that render floating/overlay content need <Portal>: Combobox, Popover, Tooltip, Dialog, Select, Toast

Component Catalog

Layout & Navigation

Overlays & Feedback

Form Components

Data Display

Styled Elements (Tailwind classes, not components)

These are applied as CSS classes on standard HTML elements:

Preset Classes

Style variants follow the pattern: preset-{style}-{color}-{shade}

• Styles: filled, tonal, outlined
• Colors: primary, secondary, tertiary, success, warning, error, surface
• Shade: typically 500

Examples:

• preset-filled-primary-500
• preset-tonal-error
• preset-outlined-surface-500

Documentation Lookup

When implementing UI, use Context7 MCP for accurate reference docs:

Skeleton components — full props, events, and examples:

Library ID: /websites/skeleton_dev_svelte
Query: "[ComponentName] component props examples usage"

Tailwind CSS — utility classes, modifiers, and layout:

Library ID: /tailwindlabs/tailwindcss.com
Query: "[topic] classes usage examples"

Look up Tailwind docs when unsure about utility classes (grid, flex, spacing, responsive modifiers, dark mode, etc.) rather than guessing class names. This is especially important for Skeleton's styled elements which are composed with Tailwind utilities.

Decision Checklist

1. Is there a Skeleton component for this? (see catalog above) -> Use it
2. Is there a styled element class for this? (btn, card, badge, etc.) -> Use it
3. Neither exists? -> Build custom markup with Tailwind, matching Skeleton's design tokens