---
name: sprout-study
description: Build an interactive SVG botanical illustration with continuous stem growth, sequential leaf unfolding, reversible hover, touch controls and editable plant and vessel presets.
version: 0.1.0
---

# Sprout Study

Grow Terracotta Mint, a quiet vector plant in a clay pot. Hover or focus to extend its continuous stem and unfold leaves in sequence; leave to fold them back. Tap to hold the growth or scrub every stage. Three authored plant silhouettes and pot palettes live in an offline single HTML with English and Simplified Chinese controls.

## Run

```sh
node scripts/fill-prompt.mjs --slots assets/prompts/examples/terracotta-mint.json --out prompt.md
node scripts/new-project.mjs --out my-sprout
cd my-sprout && npm ci
npm run dev
npm run build:single
npm run shoot -- --file dist-single/index.html
```

Give the filled prompt and project to a coding agent. Edit `src/plants.json` to create new silhouettes; update geometry, state and verification together when changing the mechanism. Deliver editable source, the single HTML and bilingual verification reports. Build only inside generated or temporary projects.

## Interaction

The main plant is a native keyboard-accessible button. Hover/focus grows, leaving/blurring folds unless growth is held. Press or tap toggles hold. The labeled range input sets exact continuous progress. Water shows illustrative droplets and holds growth. Change plant, pot, breeze, pause or reset through visible buttons; focus view hides the interface and has a visible exit. Keyboard shortcuts outside controls: Space grow, N plant, W water, P pot, B breeze, R reset, M sound, C focus view, Escape exit. Native focused controls retain their own keyboard semantics.

One growth scalar controls the actual quadratic stem and the leaf scales. Each pair waits for the stem to reach its node, then unfolds through a smooth curve; reversing the scalar folds upper leaves first. Geometry is authored SVG, with local paper/arch/pot shapes. No images or external assets load at runtime.

## Limits

This is a botanical illustration, not a biological simulation. Water is an illustrative pulse; it does not simulate moisture or real growth. Plant names label visual presets. Pause freezes easing, droplets and sway; direct scrubbing remains immediate. Reduced motion removes sway and makes growth transitions immediate. Optional short synthesized tones start only after a gesture. No recorded audio, speech, persistence, uploads, credentials or paid calls are needed. A coding agent may use its own authorized model to edit; this Skill itself calls none.

## Verify and troubleshoot

See `references/verification.md` and `references/hosting.md`. Node22.4+ and pinned npm dependencies are required. Missing Chrome stops browser verification. Invalid catalog data fails with stable plant rule codes. The illustration uses SVG and needs no WebGL; the family error handshake retains its common startup error code. Headless frame rates do not establish physical-device performance, listening or human acceptance.