メニュー
Trigger: using sve-ui, sve-ui components, Svelte 5 UI with sve-ui, theming sve-ui. Use the sve-ui component library correctly: imports, namespaces, theming, a11y.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
| name | sve-ui-usage |
| description | Trigger: using sve-ui, sve-ui components, Svelte 5 UI with sve-ui, theming sve-ui. Use the sve-ui component library correctly: imports, namespaces, theming, a11y. |
| license | MIT |
| metadata | {"author":"rodriabregu","version":"1.0"} |
Load when building or editing a Svelte 5 app that consumes sve-ui — importing, composing, theming, or debugging unstyled/broken sve-ui components.
import 'sve-ui/theme.css';. Without it, components render unstyled. The consumer project needs NO Tailwind and NO config.import { Button, Input, Badge, Spinner, Text, Heading, Slider, Code } from 'sve-ui'Dialog.*, Select.*, Combobox.*, Card.*, Alert.*, Tabs.*, Accordion.*, Avatar.*, DropdownMenu.*, Popover.*, Tooltip.*, Switch.*, Checkbox.*, RadioGroup.*.<body>. Put the theme class (dark/light) on <body> so portaled content gets the right --sve-* tokens — not only on an inner wrapper.child snippet:
<Dialog.Trigger>{#snippet child({ props })}<Button {...props}>Open</Button>{/snippet}</Dialog.Trigger>--sve-* CSS variables (e.g. --sve-color-primary). Do NOT put Tailwind layout/margin utilities on sve-ui components — scoped styles win; wrap in a <div> instead.Slider is NOT bind:value; use value + onValueChange, and give it an accessible name with thumbLabel. Switch/Checkbox need aria-label when unlabelled. Tooltip requires a Tooltip.Provider ancestor.| Need | Use |
|---|---|
| Action button | Button |
| Modal / confirm | Dialog.* |
| Pick one option | Select.* (listbox) or RadioGroup.* |
| Filterable pick | Combobox.* |
| On/off vs boolean | Switch.* vs Checkbox.* |
| Theme a subtree | wrap in ThemeProvider + override --sve-* |
pnpm add sve-ui.sve-ui/theme.css once in the root layout.ThemeProvider and set colorScheme.references/components.md.Svelte 5 markup that imports theme.css once, uses correct single/namespace imports and the child snippet for custom triggers, gives interactive controls accessible names, and themes via --sve-* (no Tailwind in the consumer project).
references/components.md — full component catalog, import style, and per-component usage snippets.