/dryui-initSet up DryUI in a new or existing SvelteKit app.
Getting Started
DryUI is a Svelte 5 component library plus a coding-agent skill set. You drive it by talking to your agent: ask it to scaffold, build, or iterate, and the right skill kicks in.
Install the skill set
One command installs every DryUI skill into your agent. Once installed, the agent picks the right skill from each request without you hunting for slash commands.
bash
npx skills add rob-balfre/dryuiUse it from your agent
Claude Code, Codex, and other coding agents all use the same DryUI skills. Pick your agent for the install command, then ask for the skill by name when you want to be explicit.
Try these prompts
/dryui-build build dashboardBuild or edit UI with DryUI components, tokens, and lint rules.
/dryui-live-feedbackOpen the running app, wait for annotations, then apply each visual edit.
Use skills as the default surface. Visual feedback runs through the dryui-feedback MCP server.
Theme modes
Import the default theme first and add the dark theme when the app supports explicit dark or system-aware auto mode. The HTML attribute or class chooses the active DryUI token set.
svelte
<!-- src/routes/+layout.svelte -->
<script>
import '@dryui/ui/themes/default.css';
import '@dryui/ui/themes/dark.css';
</script>html
<!-- Light-only: default tokens -->
<html lang="en">
<!-- System-aware auto: follows prefers-color-scheme -->
<html lang="en" class="theme-auto">
<!-- Explicit override -->
<html lang="en" data-theme="dark">For a persisted toggle, apply the stored mode in the document head before hydration, then
render ThemeToggle with the same storage key.
svelte
// Embed the returned script in the document head before theme CSS.
import { themeFlashScript, ThemeToggle } from '@dryui/ui';
const themeScript = themeFlashScript('my-app-theme');
<ThemeToggle storageKey="my-app-theme" />