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
| Component |
Use When |
| Navigation |
App-level nav bars, sidebar navigation |
| Tabs |
Switching between views/panels in the same context |
| Accordion |
Collapsible sections, FAQ lists, expandable details |
| Segment |
Toggle between a small set of options (like button group) |
Overlays & Feedback
| Component |
Use When |
| Dialog |
Confirmation prompts, modal forms, detail views |
| Drawer |
Side panels, mobile menus, supplementary content |
| Popover |
Rich contextual content on click (menus, info panels) |
| Tooltip |
Brief hover hints for icons/buttons |
| Toast |
Temporary notifications, success/error messages |
| Alert |
Inline banners, warnings, info messages |
| Progress |
Loading indicators, completion bars |
Form Components
| Component |
Use When |
| Combobox |
Searchable dropdown, autocomplete, multi-select |
| Select |
Simple dropdown selection (no search needed) |
| Switch |
Boolean toggles |
| Slider |
Numeric range input |
| Checkbox |
Multiple selections from a list |
| Radio |
Single selection from a list |
| TagsInput |
Freeform tag/token entry |
| FileUpload |
File selection with drag-and-drop |
| Clipboard |
Copy-to-clipboard buttons |
| PinInput |
Verification codes, OTP entry |
Data Display
| Component |
Use When |
| Avatar |
User/entity profile images with fallback |
| Rating |
Star ratings, scoring displays |
Styled Elements (Tailwind classes, not components)
These are applied as CSS classes on standard HTML elements:
| Class |
Element |
Example |
btn |
<button> |
<button class="btn preset-filled-primary-500"> |
card |
<div> |
<div class="card p-4"> |
badge |
<span> |
<span class="badge preset-filled-primary-500"> |
input |
<input> |
<input class="input" type="text" /> |
select |
<select> |
<select class="select"> |
textarea |
<textarea> |
<textarea class="textarea"> |
table |
<table> |
<table class="table"> |
label |
<label> |
<label class="label"> |
progress |
<progress> |
<progress class="progress" value="50" max="100"> |
hr |
<hr> |
<hr class="hr" /> |
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-500preset-tonal-errorpreset-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
- Is there a Skeleton component for this? (see catalog above) -> Use it
- Is there a styled element class for this? (btn, card, badge, etc.) -> Use it
- Neither exists? -> Build custom markup with Tailwind, matching Skeleton's design tokens
1---2name: skeleton-ui3description: Use Skeleton UI components instead of building custom markup. MUST be consulted when creating or modifying any UI: buttons, forms, dialogs, modals, drawers, navigation, tabs, accordions, tooltips, popovers, toasts, alerts, dropdowns, selects, switches, sliders, checkboxes, radios, tags, file uploads, avatars, progress bars, ratings, badges, cards, tables, inputs, textareas, segments, clipboards, or pin inputs.4---5
6# Skeleton UI Component Skill
7
8## Core Principle
9
10**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.
11
12## Import Pattern
13
14```ts
15import { ComponentName, Portal } from '@skeletonlabs/skeleton-svelte';
16```
17
18## Composition Pattern
19
20Skeleton uses granular child components:
21
22```svelte
23<Avatar>
24 <Avatar.Image src="..." />
25 <Avatar.Fallback>JD</Avatar.Fallback>
26</Avatar>
27```
28
29## Data Flow
30
31- Props in, `onXxxChange` callbacks out (e.g., `onValueChange`, `onOpenChange`)
32- Collections use `useListCollection()` helper for item mapping
33
34## Positioned Content
35
36Components that render floating/overlay content need `<Portal>`:
37Combobox, Popover, Tooltip, Dialog, Select, Toast
38
39---
40
41## Component Catalog
42
43### Layout & Navigation
44
45| Component | Use When |
46| -------------- | --------------------------------------------------------- |
47| **Navigation** | App-level nav bars, sidebar navigation |
48| **Tabs** | Switching between views/panels in the same context |
49| **Accordion** | Collapsible sections, FAQ lists, expandable details |
50| **Segment** | Toggle between a small set of options (like button group) |
51
52### Overlays & Feedback
53
54| Component | Use When |
55| ------------ | ----------------------------------------------------- |
56| **Dialog** | Confirmation prompts, modal forms, detail views |
57| **Drawer** | Side panels, mobile menus, supplementary content |
58| **Popover** | Rich contextual content on click (menus, info panels) |
59| **Tooltip** | Brief hover hints for icons/buttons |
60| **Toast** | Temporary notifications, success/error messages |
61| **Alert** | Inline banners, warnings, info messages |
62| **Progress** | Loading indicators, completion bars |
63
64### Form Components
65
66| Component | Use When |
67| -------------- | ------------------------------------------------- |
68| **Combobox** | Searchable dropdown, autocomplete, multi-select |
69| **Select** | Simple dropdown selection (no search needed) |
70| **Switch** | Boolean toggles |
71| **Slider** | Numeric range input |
72| **Checkbox** | Multiple selections from a list |
73| **Radio** | Single selection from a list |
74| **TagsInput** | Freeform tag/token entry |
75| **FileUpload** | File selection with drag-and-drop |
76| **Clipboard** | Copy-to-clipboard buttons |
77| **PinInput** | Verification codes, OTP entry |
78
79### Data Display
80
81| Component | Use When |
82| ---------- | --------------------------------------- |
83| **Avatar** | User/entity profile images with fallback |
84| **Rating** | Star ratings, scoring displays |
85
86### Styled Elements (Tailwind classes, not components)
87
88These are applied as CSS classes on standard HTML elements:
89
90| Class | Element | Example |
91| ------------ | ------------- | ---------------------------------------------------- |
92| `btn` | `<button>` | `<button class="btn preset-filled-primary-500">` |
93| `card` | `<div>` | `<div class="card p-4">` |
94| `badge` | `<span>` | `<span class="badge preset-filled-primary-500">` |
95| `input` | `<input>` | `<input class="input" type="text" />` |
96| `select` | `<select>` | `<select class="select">` |
97| `textarea` | `<textarea>` | `<textarea class="textarea">` |
98| `table` | `<table>` | `<table class="table">` |
99| `label` | `<label>` | `<label class="label">` |
100| `progress` | `<progress>` | `<progress class="progress" value="50" max="100">` |
101| `hr` | `<hr>` | `<hr class="hr" />` |
102
103### Preset Classes
104
105Style variants follow the pattern: `preset-{style}-{color}-{shade}`
106
107- Styles: `filled`, `tonal`, `outlined`
108- Colors: `primary`, `secondary`, `tertiary`, `success`, `warning`, `error`, `surface`
109- Shade: typically `500`
110
111Examples:
112- `preset-filled-primary-500`
113- `preset-tonal-error`
114- `preset-outlined-surface-500`
115
116---
117
118## Documentation Lookup
119
120When implementing UI, use **Context7 MCP** for accurate reference docs:
121
122**Skeleton components** — full props, events, and examples:
123```
124Library ID: /websites/skeleton_dev_svelte
125Query: "[ComponentName] component props examples usage"
126```
127
128**Tailwind CSS** — utility classes, modifiers, and layout:
129```
130Library ID: /tailwindlabs/tailwindcss.com
131Query: "[topic] classes usage examples"
132```
133
134Look 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.
135
136## Decision Checklist
137
1381. Is there a **Skeleton component** for this? (see catalog above) -> Use it
1392. Is there a **styled element class** for this? (btn, card, badge, etc.) -> Use it
1403. Neither exists? -> Build custom markup with Tailwind, matching Skeleton's design tokens
majiayu000