Next composer under #186. #188 composed auth + data; #191 composed the CRUD/admin UI (vike-crud/vike-admin). The remaining big hand-rolled surface is styling and the app shell: an agent writes its own CSS/design system, dark-mode toggle, and layout/nav chrome every time. That fresh CSS is exactly what the production-grade loop keeps picking at (the over-polish churn #186 calls out at the root). Teach the agent to compose vike-themes + vike-layouts instead.
Mechanism
Same lever as #187/#189: a persona, no runtime change, the agent stays a black box. Add a vike-shell-composer persona to vikeExtensionPersonas in ai-autopilot.
What the persona teaches
- Styling = vike-themes, not hand-written CSS.
defineTheme({ name, fonts, radius, light, dark }) (a single primary expands to the full ramp), extends: [themesExt] from vike-themes/react, and set appearance: 'system' + theme/themes. You get flash-free system dark mode, a theme picker, and the CSS-variable contract. Do NOT hand-roll a color system or a dark-mode toggle; style against the theme's CSS vars.
- App shell = vike-layouts, not hand-written nav/layout.
extends: [layoutsExt] from vike-layouts/react, pick layout: 'centered' | 'topbar' | 'sidebar', fill slots (logo, cumulative nav, footer, user menu). Per-page override allowed. Since #401 the shells are vike-blocks layout variants, so it is the same block system the crud screens render through. Do NOT hand-write a layout shell or nav bar.
- vike-toolbar = one line, not its own concern.
extends: [toolbarExt] from vike-toolbar/react gives the settings popover a home; installed extensions (theme picker, locale switcher) populate it automatically. Install-and-forget.
Scope
ai-autopilot: new vike-shell-composer persona + wire into vikeExtensionPersonas; unit test asserts it teaches defineTheme / themes extends / layout selection / no hand-rolled CSS + shell.- Verify the current vike-themes / vike-layouts / vike-toolbar public API in the vike-data repo before writing snippets (done:
defineTheme, extends:[themesExt], appearance/theme/themes; extends:[layoutsExt], layout, logo/nav slots; extends:[toolbarExt]).
Acceptance
For a blog/dashboard-style app the agent composes a theme + an app shell from vike-themes/vike-layouts instead of writing its own CSS design system and layout chrome, and the loop stops churning on hand-written styling.
Part of #186.
Next composer under #186. #188 composed auth + data; #191 composed the CRUD/admin UI (vike-crud/vike-admin). The remaining big hand-rolled surface is styling and the app shell: an agent writes its own CSS/design system, dark-mode toggle, and layout/nav chrome every time. That fresh CSS is exactly what the production-grade loop keeps picking at (the over-polish churn #186 calls out at the root). Teach the agent to compose vike-themes + vike-layouts instead.
Mechanism
Same lever as #187/#189: a persona, no runtime change, the agent stays a black box. Add a
vike-shell-composerpersona tovikeExtensionPersonasinai-autopilot.What the persona teaches
defineTheme({ name, fonts, radius, light, dark })(a singleprimaryexpands to the full ramp),extends: [themesExt]fromvike-themes/react, and setappearance: 'system'+theme/themes. You get flash-free system dark mode, a theme picker, and the CSS-variable contract. Do NOT hand-roll a color system or a dark-mode toggle; style against the theme's CSS vars.extends: [layoutsExt]fromvike-layouts/react, picklayout: 'centered' | 'topbar' | 'sidebar', fill slots (logo, cumulativenav, footer, user menu). Per-page override allowed. Since #401 the shells are vike-blockslayoutvariants, so it is the same block system the crud screens render through. Do NOT hand-write a layout shell or nav bar.extends: [toolbarExt]fromvike-toolbar/reactgives the settings popover a home; installed extensions (theme picker, locale switcher) populate it automatically. Install-and-forget.Scope
ai-autopilot: newvike-shell-composerpersona + wire intovikeExtensionPersonas; unit test asserts it teachesdefineTheme/ themesextends/layoutselection / no hand-rolled CSS + shell.defineTheme,extends:[themesExt],appearance/theme/themes;extends:[layoutsExt],layout,logo/navslots;extends:[toolbarExt]).Acceptance
For a blog/dashboard-style app the agent composes a theme + an app shell from vike-themes/vike-layouts instead of writing its own CSS design system and layout chrome, and the loop stops churning on hand-written styling.
Part of #186.