Vani SPA App

When to Use

• The user asks to update the Vani SPA app under src/spa-app

• Requests mention the landing page/homepage or landing examples

Quick Rules

• SPA app code lives in src/spa-app ; entry points are entry-client.ts , entry-server.ts , and root.html

• UI components live in src/spa-app/components

• Import Vani runtime helpers from @/vani and @/vani/html

• Use cn() from src/spa-app/components/utils for composing class names

• Favor small composable sections (e.g. HeroSection , FeaturesSection )

Workflow Checklist

Use this checklist in responses:

• Identify the target section/component in src/spa-app/components

• Apply UI/content changes using Vani component patterns (component , h.* )

• Keep class names composed with cn() and ensure Tailwind utility consistency

• If the change touches landing examples, update landing-page-examples.ts

• Update src/spa-app/styles.css only when global styles are needed

• Scan for related copy/links in the landing page and update as needed

Component Pattern

Use Vani components and HTML helpers:

import { component } from '@/vani' import * as h from '@/vani/html' import { cn } from './utils'

export const ExampleSection = component(() => { return () => h.section( { className: cn('bg-slate-950 py-16 text-white') }, h.div({ className: cn('mx-auto max-w-6xl px-6') }, 'Content'), ) })

Common Targets

• Landing page layout: src/spa-app/components/landing-page.ts

• Landing examples: src/spa-app/components/landing-page-examples.ts

• App entry: src/spa-app/app.ts

Present Results to User

Return updates as a checklist and include file paths that changed.