dryui-build

name	dryui-build
description	Experimental DryUI layout-only skill that extracts responsive colored-block page structure from design images with strict shell-only layout areas and fixed page container queries. Use when testing full-page or section layout skeletons before detailed UI implementation.

DryUI Layout Blocks: Shell Area Strict

Build only a colored block layout skeleton. Do not recreate detailed UI.

Only edit:

• src/routes/+page.svelte
• src/layout.css

Do not import anything. Do not use DryUI components, Lucide, icons, SVGs, images, charts, tables, forms, buttons, inputs, avatars, realistic widgets, or generated data.

1. Classify The Task

• Full page: build a page shell with topbar/navigation, primary, and optional secondary, utility, rail, summary, actions.
• Page section: build a section shell with primary and optional adjacent regions.

For full-page design-image references, treat the whole image as the page shell.

2. Blueprint Before Coding

Write the region plan mentally before editing:

• Mobile: one-column top-to-bottom order.
• Tablet: first useful two-pane/grouped composition.
• Desktop: persistent rail/sidebar, right panels, attached panes, dominant work surface.

Decide:

• Which region is primary.
• Whether spacing is contiguous, guttered, or mixed.
• Which regions are secondary or utility, so they do not become larger than primary.
• Which visible bands are shell regions versus nested primitives.

3. Use Recipes Only For Proportions

Do not change required area names for a recipe.

• Dashboard: summary strip, primary chart/workspace, insights/activity.
• Board/Kanban: board is primary; task detail is secondary; activity is utility; desktop rail if present.
• CRM: table/pipeline is primary; account/detail is secondary; forecast/activity are utility.
• Settings/Admin: settings/profile/form stack is primary; help/status/activity are secondary/utility; compact actions; desktop rail if present.
• Knowledge/Document Reader: reader is primary; collections/list are navigation/secondary; AI summary is secondary/utility; reader must be largest at desktop.

4. Markup Contract

For a full page, use this direct-child shape:

<main data-layout="<name>-shell">
	<div data-layout-area="page">
		<header data-layout-area="topbar">Topbar</header>
		<nav data-layout-area="navigation">Navigation</nav>
		<section data-layout-area="primary">Primary workspace</section>
		<aside data-layout-area="secondary">Secondary panel</aside>
	</div>
</main>

Rules:

• page, primary, and at least one of topbar or navigation are mandatory.
• Direct-child shell areas may only be: rail, topbar, navigation, summary, primary, secondary, utility, actions.
• Each shell area should appear once.
• data-layout-area is shell-only. Use it only on [data-layout-area='page'] and its direct children.
• Never put data-layout-area on nested spans, nested divs, articles, list items, labels, chips, cards, search placeholders, tabs, badges, rows, columns, or decorative blocks.
• Nested blocks must use data-layout="<specific-name>" and classes, never data-layout-area.
• Put recipe-specific meaning in text labels/classes, not direct-child area names.

5. CSS Contract: Copy This Shape

Use the fixed container name page. Do not invent another container name.

[data-layout='<name>-shell'] {
	container: page / inline-size;
}

[data-layout='<name>-shell'] [data-layout-area='page'] {
	display: grid;
	grid-template-areas:
		'topbar'
		'navigation'
		'primary'
		'secondary';
	grid-template-columns: minmax(0, 1fr);
}

[data-layout='<name>-shell'] [data-layout-area='page'] > [data-layout-area='topbar'] {
	grid-area: topbar;
}

[data-layout='<name>-shell'] [data-layout-area='page'] > [data-layout-area='primary'] {
	grid-area: primary;
}

@container page (min-width: 48rem) {
}

@container page (min-width: 72rem) {
}

Hard rules:

• container: page / inline-size must appear exactly once on the shell selector.
• Use exactly @container page (min-width: 48rem).
• Use exactly @container page (min-width: 72rem).
• Never use @container <name>, @container (width...), or @container page (width>=...).
• Any CSS selector that targets a shell area other than page must use [data-layout-area='page'] > [data-layout-area='<area>'].
• Do not use broad descendant selectors like [data-layout='<name>-shell'] [data-layout-area='primary']; they can accidentally style nested blocks.

6. Layout Rules

• Mobile is one column only.
• Tablet must visibly use extra width when the reference has grouped panes.
• Desktop must preserve the reference shell: rail/sidebar, right inspector, attached panes, and dominant primary surface.
• Put all display: grid, display: flex, grid, flex, container, and breakpoint rules in src/layout.css.
• Use minmax(0, 1fr) for flexible tracks.
• If panes touch in the reference, use gap: 0; if gutters are visible, use token gaps.
• primary must be the largest or most visually dominant desktop content region.
• Utility/status/activity blocks must never be larger than primary.
• Do not create large blank shell regions. Every direct shell area should contain visible blocks near its top edge.
• If a viewport shows a large blank area, reduce a min-block-size or move the content into the correct shell area before finishing.

7. Route Styling Rules

Route <style> is visual only:

• color, background, border, shadow, typography, padding inside blocks, labels, and min-block-size are allowed.
• display, grid-*, flex-*, container, @container, and @media are not allowed in route <style>.
• Keep labels short and readable.
• Use distinct accessible colors.

8. Self-Check Before Finishing

Run bun run build, then check:

• No import in src/routes/+page.svelte.
• No @dryui/ui, lucide, <button>, <input>, <form>, <table>, <img>, or <svg>.
• No @media.
• No display, grid-*, flex-*, or @container in route <style>.
• src/layout.css contains exact container: page / inline-size.
• src/layout.css contains exact @container page (min-width: 48rem) and @container page (min-width: 72rem).
• Full page has exactly one direct child data-layout-area="primary".
• No nested primitive uses data-layout-area.
• 390px, 820px, and 1440px should not overflow horizontally or show a large blank shell region.