Agent-Skills.md

Agent Skills: Grove Vineyard Skill

Build a Vineyard showcase page for any Grove property using @autumnsgrove/lattice/vineyard components. Vineyard is the consistent /vineyard route where each tool demos its features, documents its API, and shows its roadmap. Use when creating or updating a property's vineyard page.

UncategorizedID: autumnsgrove/groveengine/grove-vineyard

Repository

autumnsgrove/groveengine
AutumnsGroveLicense: NOASSERTION
5

Install this agent skill to your local

pnpm dlx add-skill https://github.com/AutumnsGrove/Lattice/tree/HEAD/.claude/skills/grove-vineyard

Skill Files

Browse the full folder contents for grove-vineyard.

Download Skill

Loading file tree…

.claude/skills/grove-vineyard/SKILL.md

Skill Metadata

Name
grove-vineyard
Description
Build a Vineyard showcase page for any Grove property using @autumnsgrove/lattice/vineyard components. Vineyard is the consistent /vineyard route where each tool demos its features, documents its API, and shows its roadmap. Use when creating or updating a property's vineyard page.

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:

<script lang="ts">
	import {
		VineyardLayout,
		FeatureCard,
		RoadmapSection,
		DemoContainer,
	} from "@autumnsgrove/lattice/vineyard";
</script>

<VineyardLayout tool="amber" tagline="Your files, preserved" status="preview">
	<!-- Feature Cards -->
	<div class="feature-grid">
		<FeatureCard
			title="Storage Overview"
			description="See usage across posts and media"
			status="ready"
			icon="HardDrive"
		/>

		<FeatureCard
			title="File Browser"
			description="Browse and manage uploaded files"
			status="ready"
			icon="FolderOpen"
		/>

		<FeatureCard
			title="Export Your Data"
			description="Download everything in one click"
			status="coming-soon"
			icon="Download"
		/>
	</div>

	<!-- Roadmap -->
	<RoadmapSection
		built={["Core storage view", "Usage breakdown", "File browser"]}
		inProgress={["Export functionality"]}
		planned={["Bulk delete", "Storage alerts", "External backup"]}
	/>
</VineyardLayout>

<style>
	.feature-grid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
		gap: 1.5rem;
		margin-bottom: 3rem;
	}
</style>

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
<VineyardLayout tool="ivy" tagline="Messages that grow on you" status="in-development">
	<!-- All your content goes here -->
</VineyardLayout>

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()}
		<!-- Optional: interactive demo renders below the description -->
		<ThemePicker themes={sampleThemes} />
	{/snippet}
</FeatureCard>

DemoContainer

Wraps interactive demos with a header, description, and optional "Mock Data" indicator:

<DemoContainer title="Email Composer" description="Try the rich text editor" mockData={true}>
	<RichTextEditor value={sampleDraft} />
</DemoContainer>

When mockData={true}:

  • Shows a blue "Mock Data" pill in the header
  • Adds a dashed blue border around the demo content

CodeExample

Code blocks with copy-to-clipboard and language/filename labels:

<CodeExample language="typescript" filename="src/routes/+layout.svelte">
	{`import { initAmber } from '@autumnsgrove/amber';

const storage = initAmber({
  tenant: 'my-site',
  tier: 'sapling'
});`}
</CodeExample>

TierGate

Shows content only if user meets tier requirement. Otherwise shows blur preview + upgrade prompt:

<TierGate required="oak" current={userTier} showPreview={true}>
	<AdvancedStoragePanel />

	{#snippet fallback()}
		<!-- Optional custom fallback (default shows upgrade button) -->
		<p>Upgrade to Oak for advanced storage features</p>
	{/snippet}
</TierGate>

Tier hierarchy: seedling < sapling < oak < grove

RoadmapSection

Three-column (desktop) / stacked (mobile) timeline:

<RoadmapSection
	built={["Feature A", "Feature B"]}
	inProgress={["Feature C"]}
	planned={["Feature D", "Feature E"]}
/>
  • Built items get green dots
  • In-progress items get pulsing orange dots
  • Planned items get hollow gray circles

Authentication

<script>
	import { AuthButton, UserMenu, getSession } from "@autumnsgrove/lattice/vineyard";
	import { onMount } from "svelte";

	let user = $state(null);

	onMount(async () => {
		const session = await getSession();
		user = session.user;
	});
</script>

{#if user}
	<UserMenu showAvatar={true} showEmail={true} />
{:else}
	<AuthButton provider="google" signInText="Sign in to explore" />
{/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';

<!-- Use GroveText for data-driven content with [[term]] syntax -->
<GroveText
	content="Manage your [[bloom|posts]] and [[garden|blog]] appearance."
	manifest={groveTermManifest}
/>

<!-- Or GroveTerm for individual interactive terms -->
<p>Customize how your <GroveTerm term="garden" manifest={groveTermManifest} /> looks.</p>

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)