dryui-build

DryUI Build

Build real Svelte 5 UI with DryUI. This skill is only for UI implementation and polish. It does not install DryUI, scaffold projects, run live feedback, or resolve feedback submissions.

DryUI Contract Detection

If a project imports @dryui/ui, has src/layout.css, or enables @dryui/lint, this skill dominates UI decisions for that scope. Keep DryUI primitives, data-layout hooks, theme tokens, and lint boundaries in charge even if another framework pattern or generic Svelte habit seems faster.

Lint Rules — Read First

These are the rules @dryui/lint enforces. They are the contract — if lint, the Svelte compiler, or component metadata disagrees with a visual idea, restructure the markup or CSS instead of bypassing the rule. Bulk-silencing lint produces unstyled, broken pages because the rules and src/layout.css are coupled.

Banned in .svelte files

• No :global(). Use scoped styles, data-* attributes, CSS custom properties, or component props.
• No !important. Fix specificity at the source.
• No all: unset. Reset only the specific properties you need.
• No <svelte:element this={x}>. Use explicit {#if}/{:else} branches with concrete tags. The <!-- dryui-allow svelte-element --> escape hatch is for finite semantic tag sets only (h1-h6).
• No <!-- svelte-ignore css_unused_selector --> or other ignore comments. Fix the underlying issue.
• No inline style= attributes. Use scoped CSS with custom properties.
• No style: directives. Use component props, --dry-* custom properties, or the <style> block.
• No {@attach ...}. Use component props or CSS custom properties.
• No leaked transcript or tool artifacts such as toolu_*, <tool_use>, <task-notification>, <subagent_notification>, TaskOutput, or TodoWrite.
• No <a> without href. Use <button> for non-navigation actions.
• No <hr>. Use <Separator /> so token overrides apply.
• No raw <button>, <input>, <select>, etc. when a DryUI primitive exists. Allowed only inside the matching packages/ui/<component>/ directory.
• No class= on DryUI components. They do not forward class to the rendered element. Use --dry-* custom properties, data-* attributes, component props, or wrap in a data-layout element. (<Button> has a back-compat className alias; most components do not.)