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.