How to Use Sequential Confirmation Mode for Chapters in Garden Skills

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)) 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:

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):

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)) 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/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:

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) 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/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 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, leaving other chapters to proceed automatically.

How do I customize the confirmation overlay UI?

The confirmation overlay rendering is handled by the 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 hook implements the logic for the needConfirmation flag and cursor management, and the ChapterHost.tsx component handles the UI rendering. The high-level concept is documented in the README.md at line 261 as part of the double-confirmation workflow pattern.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}