| name | skeleton-docs |
| description | Skeleton UI framework reference. Use when working on Svelte frontend components, debugging Skeleton styling issues, customizing components beyond basics, or iterating on UI implementation. Fetch latest docs for best practices. Use when this capability is needed. |
| metadata | {"author":"dimitri-vs"} |
Skeleton Documentation
How to Use This Skill
This index is the source of truth for Skeleton documentation. When invoked:
- Identify relevant docs - Scan the index below to find 1-3 docs matching your current task (e.g., working on cards →
/docs/svelte/tailwind-components/cards.md)
- Fetch the docs - Use WebFetch to retrieve them from
https://www.skeleton.dev + the path (e.g., https://www.skeleton.dev/docs/svelte/tailwind-components/cards.md)
- Apply current best practices - The fetched markdown contains up-to-date patterns, variants, and examples
Do NOT guess URLs - always use this index to find the correct documentation paths.
Common Gotchas
v3→v4 migration: The -token suffix utility classes (e.g., bg-surface-100-800-token) are a v3 pattern that produces zero CSS in v4. They silently render as transparent. In v4, use preset classes (preset-filled-surface-100-900) or Tailwind's dark: variant (bg-surface-100 dark:bg-surface-800).
@tailwindcss/forms is required: Skeleton v4 does NOT style form inputs by default. You MUST install and import the Tailwind Forms plugin, or .input/.textarea/.select will have no borders or backgrounds. Add @plugin '@tailwindcss/forms'; to your CSS after the @import 'tailwindcss' line.
Windows rendering fix: On Windows browsers, form elements may render incorrectly. Add this CSS globally:
.select, .input, .textarea, .input-group {
background-color: var(--color-surface-50-950);
color: var(--color-surface-950-50);
}
Use preset classes for cards/backgrounds: Don't hand-roll bg-surface-* with dark: variants for cards. Use Skeleton's built-in presets which handle light/dark internally: preset-filled-surface-100-900 (background), preset-outlined-surface-300-700 (border). See the Cards docs.
Svelte
Get Started
Guides
Design System
Tailwind Components
Framework Components
Integrations
Resources
Converted and distributed by TomeVault — claim your Tome and manage your conversions.
