# How to Use Sequential Confirmation Mode for Chapters in Garden Skills

> Learn how to use sequential confirmation mode in Garden Skills. Set confirmationMode sequential to pause and confirm each step, ensuring controlled execution. Get started now!

- Repository: [ConardLi/garden-skills](https://github.com/ConardLi/garden-skills)
- Tags: how-to-guide
- Published: 2026-08-29

---

**Enable sequential confirmation mode by setting `confirmationMode: "sequential"` in your skill payload to pause execution after each step and require explicit user approval before continuing.**

The **ConardLi/garden-skills** repository provides a powerful chapter-based workflow for automated content generation. The **sequential confirmation mode for chapters** gives you granular control over the execution flow, pausing at specific checkpoints so you can review intermediate outputs before proceeding to the next automated step.

## What Is Sequential Confirmation Mode?

The *web-video-presentation* skill organizes content as a series of **chapters**, where each chapter contains an array of **narrations** representing individual steps. By default, the stepper automatically advances through these narrations. When you activate sequential confirmation mode, the `useStepper` hook (implemented in [[`skills/web-video-presentation/templates/src/hooks/useStepper.ts`](https://github.com/ConardLi/garden-skills/blob/main/skills/web-video-presentation/templates/src/hooks/useStepper.ts)](https://github.com/ConardLi/garden-skills/blob/main/skills/web-video-presentation/templates/src/hooks/useStepper.ts)) stops after each step and emits a `needConfirmation` flag.

This design creates **hard checkpoints** throughout the workflow—covering article type selection, theme configuration, layout decisions, image strategy, cover generation, and delivery format—ensuring you maintain editorial control over every significant output before the next build step executes.

## Enabling Sequential Confirmation Mode

You can activate this behavior at either the global skill level or for individual chapters.

### Global Skill Configuration

Set the `confirmationMode` property in your top-level skill payload when invoking the skill:

```typescript
await runSkill({
  name: "web-video-presentation",
  // ... other configuration
  confirmationMode: "sequential",   // Activates mode for all chapters
});

```

### Per-Chapter Override

Individual chapters can opt into confirmation behavior by adding the `confirmationAfterStep` property to their definition in [[`website/web-design-website/src/chapters/index.ts`](https://github.com/ConardLi/garden-skills/blob/main/website/web-design-website/src/chapters/index.ts)](https://github.com/ConardLi/garden-skills/blob/main/website/web-design-website/src/chapters/index.ts):

```typescript
export const MyChapter = {
  id: "my-chapter",
  title: "Introduction",
  narrations: [
    "Welcome to the intro.",
    "First demo step.",
  ],
  // Force confirmation after each step in this specific chapter
  confirmationAfterStep: true,
};

```

## How the Confirmation Flow Works

When sequential confirmation is active, the step navigation logic changes significantly. The `useStepper` hook tracks the current `chapterIndex` and `localStep` in the step store, but instead of automatically calling `next()` when a narration completes, it sets `needConfirmation` to `true`.

The **ChapterHost** component (located in [[`website/web-design-website/src/stage/ChapterHost.tsx`](https://github.com/ConardLi/garden-skills/blob/main/website/web-design-website/src/stage/ChapterHost.tsx)](https://github.com/ConardLi/garden-skills/blob/main/website/web-design-website/src/stage/ChapterHost.tsx)) monitors this flag and renders a `<ConfirmationOverlay />` whenever confirmation is required. The UI remains paused until the user clicks the "Proceed" button, which triggers the `next()` function and advances to the subsequent chapter or step.

## Internal Implementation Details

The sequential confirmation logic relies on two core components working together.

### The useStepper Hook

In [[`useStepper.ts`](https://github.com/ConardLi/garden-skills/blob/main/useStepper.ts)](https://github.com/ConardLi/garden-skills/blob/main/skills/web-video-presentation/templates/src/hooks/useStepper.ts), the hook manages cursor state and sanitizes persisted cursors to prevent invalid navigation states. When `confirmationMode` is set to `"sequential"`, the hook intercepts the automatic advancement logic and surfaces the `needConfirmation` flag to the consuming component.

### The ChapterHost Component

**ChapterHost.tsx** reads the current step state from the store and conditionally renders the confirmation interface. It passes an `onConfirm` callback to the overlay that executes the stepper's `next()` method, ensuring the user explicitly approves each transition:

```typescript
const { cursor, next, needConfirmation } = useStepper(chapters);

if (needConfirmation) {
  // UI shows a modal – user must click "Proceed"
  <ConfirmationOverlay onConfirm={() => next()} />
}

```

## Practical Use Cases

This pattern aligns with the **beautiful-article** harness workflow described in the [[`README.md`](https://github.com/ConardLi/garden-skills/blob/main/README.md)](https://github.com/ConardLi/garden-skills/blob/main/README.md) at line 261, which outlines a `source → plan → double-confirmation → build → final review → repair` pipeline. Sequential confirmation mode implements the double-confirmation loop, allowing you to:

- **Review AI-generated layouts** before committing to image generation
- **Verify article themes** match brand guidelines before proceeding
- **Approve cover designs** before final asset compilation
- **Validate delivery formats** before pipeline completion

The [[`SKILL.md`](https://github.com/ConardLi/garden-skills/blob/main/SKILL.md)](https://github.com/ConardLi/garden-skills/blob/main/skills/web-video-presentation/SKILL.md) file documents these confirmation checkpoints as part of the skill's declared capabilities.

## Summary

- **Set `confirmationMode: "sequential"`** in your skill payload to enable global sequential confirmation for all chapters.
- **Use `confirmationAfterStep: true`** in individual chapter definitions to enable confirmation for specific chapters only.
- **The `useStepper` hook** in [`templates/src/hooks/useStepper.ts`](https://github.com/ConardLi/garden-skills/blob/main/templates/src/hooks/useStepper.ts) manages the `needConfirmation` flag and cursor state.
- **The `ChapterHost` component** renders the confirmation overlay and handles user approval callbacks.
- **This mode creates editorial checkpoints** at critical stages like theme selection, layout generation, and final delivery formatting.

## Frequently Asked Questions

### What is the difference between global and per-chapter sequential confirmation?

Global sequential confirmation applies to every chapter in the skill execution when you set `confirmationMode: "sequential"` in the top-level payload. Per-chapter confirmation allows selective control by setting `confirmationAfterStep: true` on specific chapter definitions in [`chapters/index.ts`](https://github.com/ConardLi/garden-skills/blob/main/chapters/index.ts), leaving other chapters to proceed automatically.

### How do I customize the confirmation overlay UI?

The confirmation overlay rendering is handled by the [`ChapterHost.tsx`](https://github.com/ConardLi/garden-skills/blob/main/ChapterHost.tsx) component. You can modify the `<ConfirmationOverlay />` component implementation or replace it entirely within the `website/web-design-website/src/stage/` directory. The overlay receives an `onConfirm` prop that must be called to advance the stepper.

### Can I disable confirmation for specific steps within a chapter?

No, the current implementation operates at the chapter level or globally. You cannot disable confirmation for individual narrations (steps) within a chapter that has confirmation enabled. To bypass confirmation for specific content, separate those steps into a distinct chapter without the `confirmationAfterStep` flag, or temporarily disable the global `confirmationMode` setting.

### Where is the sequential confirmation mode defined in the codebase?

The sequential confirmation mode is defined in multiple locations: the payload schema accepts `confirmationMode: "sequential"` at the skill level, the [`useStepper.ts`](https://github.com/ConardLi/garden-skills/blob/main/useStepper.ts) hook implements the logic for the `needConfirmation` flag and cursor management, and the [`ChapterHost.tsx`](https://github.com/ConardLi/garden-skills/blob/main/ChapterHost.tsx) component handles the UI rendering. The high-level concept is documented in the [`README.md`](https://github.com/ConardLi/garden-skills/blob/main/README.md) at line 261 as part of the double-confirmation workflow pattern.