Grove Vineyard Skill When to Activate Activate this skill when: Creating a /vineyard route for a Grove property Adding features or demos to an existing vineyard page User mentions "vineyard", "showcase page", or "tool demo page" Implementing feature cards, roadmaps, or demo containers for a tool What Is Vineyard? Every Grove property implements a /vineyard route on its subdomain — a consistent way to explore what each tool does, see working demos, and understand the roadmap. amber.grove.place/vineyard → Storage showcase ivy.grove.place/vineyard → Email client showcase foliage.grove.place/vineyard → Theming showcase meadow.grove.place/vineyard → Social layer showcase heartwood.grove.place/vineyard → Auth showcase forage.grove.place/vineyard → Domain discovery showcase Package Vineyard lives inside the Lattice monorepo at libs/vineyard and is re-exported through the engine. No separate install needed — it comes with Lattice. import { VineyardLayout , FeatureCard , StatusBadge , ... } from '@autumnsgrove/lattice/vineyard' ; Available Components Component Purpose VineyardLayout Full page wrapper — hero, status badge, philosophy quote, related tools footer FeatureCard Showcase a feature with icon, status, description, and optional demo slot StatusBadge Status pill: ready, preview, demo, coming-soon, in-development DemoContainer Wrapper for interactive demos with mock data indicator CodeExample Code block with language label, filename, and copy-to-clipboard TierGate Tier-based access control with blur preview and upgrade prompt RoadmapSection Visual timeline: built / in-progress / planned AuthButton Better Auth sign in/out button UserMenu User profile menu with avatar and email Types type VineyardStatus = "ready" | "preview" | "demo" | "coming-soon" | "in-development" ; type GroveTool = | "amber" | "ivy" | "foliage" | "meadow" | "rings" | "trails" | "heartwood" | "forage" ; type GroveTier = "seedling" | "sapling" | "oak" | "grove" ; Minimal Implementation Create src/routes/vineyard/+page.svelte :
- Component Details
- VineyardLayout
- Handles the full page structure automatically:
- Hero
-
- Tool name (capitalized from
- tool
- prop), tagline, status badge, philosophy quote
- Content
-
- Renders children in a max-width container with padding
- Footer
- "Works well with" section linking related tools' vineyards
The philosophy quotes and related tool mappings are built-in. No configuration needed. FeatureCard Icons are any valid lucide-svelte icon name as a string: <FeatureCard title="Theme Picker" description="Choose from curated seasonal themes" status="ready" icon="Palette"
{#snippet demo()}
import { initAmber } from '@autumnsgrove/amber';
const storage = initAmber({
tenant: 'my-site',
tier: 'sapling'
});}
Upgrade to Oak for advanced storage features
{/snippet}
Tier hierarchy:
seedling
<
sapling
<
oak
<
grove
RoadmapSection
Three-column (desktop) / stacked (mobile) timeline:
- {#if user}
- {:else}
- {/if}
- Status Badge Meanings
- Status
- Visual
- Use When
- ready
- Green solid pill
- Feature is complete and stable
- preview
- Amber dashed border
- Functional but API may change
- demo
- Blue solid pill
- Interactive example, not real data
- coming-soon
- Gray subtle pill
- Designed but not built yet
- in-development
- Orange pulsing pill
- Actively being built right now
- Design System
- Vineyard components use Grove's built-in aesthetic:
- Colors
-
- Amber tones (#f59e0b, #d97706) on stone neutrals
- Glass
-
- Semi-transparent backgrounds with backdrop-blur
- Typography
-
- Lexend font (loaded by VineyardLayout)
- Interactions
- Hover lift on cards, smooth transitions No additional styling framework needed — components are self-contained with scoped CSS. Content Strategy For Ready Tools Working demos with real or realistic mock data Complete feature cards with all statuses "ready" Full code examples and API reference Getting started guide For Preview/In Development Tools Mix of "ready" and "coming-soon" feature cards Demo containers with mockData={true} Roadmap section showing progress TierGate for features not yet available For Coming Soon Tools Minimal vineyard: VineyardLayout + philosophy + roadmap All feature cards as "coming-soon" No interactive demos needed yet Grove Terminology When vineyard pages reference Grove-themed terms (tool names, feature names, user roles), use GroveTerm components to respect the user's Grove Mode setting. New visitors see standard terms by default. import {(GroveTerm, GroveText)} from '@autumnsgrove/lattice/ui'; import groveTermManifest from '$lib/data/grove-term-manifest.json';
Customize how your
Checklist Before shipping a vineyard page: VineyardLayout with correct tool , tagline , and status At least 3 FeatureCard components with appropriate statuses RoadmapSection with honest built/inProgress/planned arrays At least one interactive demo (even with mock data) Works on mobile (feature grid responsive) Icons are valid lucide-svelte names Status badges accurately reflect feature state Grove terminology uses GroveTerm components (not hardcoded)