skills.rest
JoeKarow
JoeKarowCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

skeleton-ui

Catalog Skeleton UI components and import patterns for SvelteKit interfaces.

Updated Feb 20, 2026
Search Tags:#accessibility#components#svelte#design-system#web-app#ui-guidelines#skeleton-ui
One-click install
npx skills add https://github.com/JoeKarow/motw-campaign-tracker --skill skeleton-ui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: skeleton-ui
Source: https://github.com/JoeKarow/motw-campaign-tracker/tree/main/.claude/skills/skeleton-ui
Command: npx skills add https://github.com/JoeKarow/motw-campaign-tracker --skill skeleton-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill prevents UI creators from reinventing buttons, forms, dialogs, and overlays by making Skeleton UI the default source of markup and styling guidance before any hand-coded alternatives are considered.

Core Features & Use Cases

  • Component Catalog: The directory lists layout, navigation, overlays, form controls, data display elements, and styled helper classes so you can quickly find a prebuilt Skeleton solution for each UI need.
  • Import & Composition Patterns: Import components from @skeletonlabs/skeleton-svelte and follow nested child structures plus Portal usage for overlays to maintain consistent behavior across dialogs, selects, tooltips, and toasts.
  • Decision Checklist: Apply the checklist to every button, form element, navigation section, or overlay in your campaign tracker dashboard to ensure you always use Skeleton components or preset classes before resorting to custom Tailwind markup.

Quick Start

Ask the assistant to match your next UI change with a Skeleton component before writing any custom markup.

Frequently Asked Questions about skeleton-ui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I ensure consistent UI styling in a SvelteKit dashboard?▼

To ensure consistent UI styling in a SvelteKit dashboard, reuse prebuilt Skeleton UI components for tables, dialogs, and forms instead of writing custom Tailwind markup. This enforces consistent styling and accessibility across all overlay and input-heavy views.

What is the best way to build accessible overlays and forms in Svelte?▼

The best way to build accessible overlays and forms in Svelte is importing components from @skeletonlabs/skeleton-svelte and applying nested child structures with Portal usage to maintain consistent behavior across dialogs, tooltips, and toasts.

Can I use custom Tailwind markup instead of Skeleton UI components for my web app?▼

You can use custom Tailwind markup, but applying a decision checklist to every button, form element, and navigation section ensures you exhaust Skeleton components and preset classes first, preventing reinvented markup and maintaining accessibility.

Where do I find prebuilt navigation and data display elements for a campaign tracker dashboard?▼

You find prebuilt navigation and data display elements for a campaign tracker dashboard in the Skeleton component catalog, which lists layout, overlays, form controls, and styled helper classes for quick integration.

Does Skeleton UI work with Discord activity interfaces and input-heavy views?▼

Skeleton UI works with Discord activity interfaces and input-heavy views by providing import patterns and composition rules for overlays and forms that maintain consistent behavior and accessibility across diverse SvelteKit applications.

Related Skills

Explore More Software Engineering Skills→
nholder88nholder88
2

impl-sveltekit

Automate SvelteKit frontend implementation with Skeleton UI and Tailwind styling.

Community
Advanced
epicweb-devepicweb-dev
5.5k

epic-ui-guidelines

Guides React developers to implement accessible UI components with Tailwind CSS and Radix UI.

Official
Basic
ReshzyReshzy

tailwindcss-development

Fix Tailwind utility classes in Blade, JSX, or Vue templates for responsive layouts and dark mode support.

Community
Intermediate
MyHeavenDyfMyHeavenDyf

html-ppt-zhangzara-daisy-days

Generate pastel-themed HTML presentations with hand-drawn daisies, stars, and rainbows.

Community
Basic