Styling Guidelines

Reference Repositories

• shadcn-svelte — Port of shadcn/ui for Svelte with Bits UI primitives
• shadcn-svelte-extras — Additional components for shadcn-svelte
• Svelte — Svelte 5 framework

When to Apply This Skill

Use this pattern when you need to:

• Write Tailwind/CSS for UI components in this repo.
• Decide whether a wrapper element is necessary or can be removed.
• Style interactive disabled states using HTML disabled and Tailwind variants.
• Replace JS click guards with semantic disabled behavior.
• Build scrollable content areas inside flex columns, resizable panes, or split layouts.

Minimize Wrapper Elements