Skip to content

feat(ai-autopilot): compose vike-themes/vike-layouts for styling + app shell#193

Merged
suleimansh merged 1 commit into
mainfrom
suleimansh/feat/192-vike-shell-composer
Jul 4, 2026
Merged

feat(ai-autopilot): compose vike-themes/vike-layouts for styling + app shell#193
suleimansh merged 1 commit into
mainfrom
suleimansh/feat/192-vike-shell-composer

Conversation

@suleimansh

Copy link
Copy Markdown
Member

Next composer after auth/data (#188) and the CRUD/admin UI (#191). 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 build, and that fresh CSS is the root of the loop's over-polish churn. Same lever as before: a persona, no runtime change, the agent stays a black box.

What changed

  • New vike-shell-composer persona in ai-autopilot, wired into vikeExtensionPersonas (after crud, before the ui-intent guardrail).
  • Styling = vike-themes: defineTheme({ name, radius, light, dark }) + extends: [themesExt] + appearance: 'system' / theme / themes. Flash-free system dark mode, a picker, and a CSS-var contract to style against (var(--primary)), instead of a hand-written color system + dark-mode toggle.
  • App shell = vike-layouts: extends: [layoutsExt] + layout: 'centered' | 'topbar' | 'sidebar' + logo / cumulative nav slots, instead of a hand-written topbar/sidebar. Shells are vike-blocks layout variants (#401), the same block system the crud screens render through.
  • vike-toolbar: one-line extends: [toolbarExt] so the theme/locale controls have a home. Install-and-forget, not its own concern.
  • Unit test asserts defineTheme / themes extends / layout selection / toolbar and forbids a hand-rolled color system; vikeExtensionPersonas order updated.

API verification

Every snippet cross-checked against the real vike-themes / vike-layouts / vike-toolbar public API in the vike-data repo (READMEs + exports): defineTheme + vike-themes/react extends, appearance/theme/themes; vike-layouts/react extends, layout, logo/nav slots; vike-toolbar/react extends.

Notes

  • Tests: 264 pass, 0 fail. Typecheck clean.

Part of #186. Closes #192.

…p shell (#192)

Add a vike-shell-composer persona to vikeExtensionPersonas so the composed
build declares a theme (defineTheme + extends themesExt: system dark mode,
picker, CSS-var contract) and picks a vike-layouts shell (centered/topbar/
sidebar + logo/nav slots) instead of hand-writing a CSS design system and a
layout/nav shell. Notes the one-line vike-toolbar install. No runtime change.

Closes #192.
@suleimansh suleimansh added enhancement New feature or request priority: high Should be addressed soon labels Jul 4, 2026
@suleimansh suleimansh self-assigned this Jul 4, 2026
@suleimansh suleimansh merged commit 11f76da into main Jul 4, 2026
2 checks passed
@suleimansh suleimansh deleted the suleimansh/feat/192-vike-shell-composer branch July 4, 2026 00:20
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request priority: high Should be addressed soon

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Compose vike-themes + vike-layouts for styling/app-shell instead of hand-rolling CSS + nav

1 participant