Skills

Give your AI assistant deep knowledge of kampsy-ui — Geist-inspired Svelte 5 components, kui tokens, and snippet patterns — so it generates correct code on the first try.

Install the skill into any project. Once installed, your assistant auto-loads it when you work with kampsy-ui.

With pnpm (recommended):

        
            
            pnpm dlx skills add kampsy/ui
        
    

With npm:

        
            
            npx skills add kampsy/ui
        
    

Learn more at skills.sh. After this PR merges to main, the skill is also discoverable at skills.sh/kampsy/ui.

The skill gives your assistant project-aware context — no manual copy-pasting from docs.

• Auto-install & wiring — detects the package manager, runs pnpm add -D kampsy-ui@latest only if missing (minimal, no svelte-kit sync), and ensures your global CSS has @import "kampsy-ui/theme.css" and @source "../node_modules/kampsy-ui/dist" so kui-* tokens are not purged.
• Component catalog — 30+ components with correct import shapes (import { Button } from "kampsy-ui" vs import * as Modal from "kampsy-ui"), valid enums (Button variant: default|secondary|tertiary|error|warning, Badge variant: gray|blue|…|pill, Note type: success|error|warning|…|cyan|default), and the Snippet vs Component distinction for prefix/suffix/action and icon.
• Theming — every kui-light-* paired with dark:kui-dark-* (`kui-light-gray-1000` / kui-dark-gray-1000, blue/red/amber/green/teal/purple/pink 100–1000 scales from theme.css), .dark toggle via ThemeSwitcher. Tailwind v4 only.
• Patterns & recipes — auth form, team dashboard, and settings dialog recipes (Input + Button + Note, Table + Pagination + Avatar + Badge, Tabs + Select + Modal) that validate with npx @sveltejs/mcp svelte-autofixer --svelte-version 5.

1. Project detection — activates when it finds a Svelte 5 + Tailwind v4 project and package.json.
2. Auto-install (minimal) — checks kampsy-ui in deps, runs pnpm add -D kampsy-ui@latest if missing, wires the 3 CSS lines.
3. Pattern enforcement — enforces snippet decorators {#snippet prefix()}<Icon/>{/snippet}, bind:value|active|checked|selected, and svgOnly + aria-label rules.
4. Scaffold & verify — picks the right component (Button vs Split Button vs Menu), scaffolds the page, then runs svelte-autofixer on the new file.

Try prompting your assistant after installing the skill:

• Add a login form with email, password and Remember me.
• Create a settings page with Tabs, Select and a delete-workspace modal.
• Build a team dashboard with Table, Pagination, Avatar.Group and status Badges.

List installed skills:

        
            
            npx skills add kampsy/ui --list