steps-usage

Coordinate multi-step UI workflows with Zag.js Steps and @techsio/ui-kit components.

2|Updated Dec 2, 2024
One-click install
npx skills add https://github.com/TechsioCZ/new-engine --skill steps-usage
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: steps-usage
Source: https://github.com/TechsioCZ/new-engine/tree/main/libs/ui/skills/steps-usage
Command: npx skills add https://github.com/TechsioCZ/new-engine --skill steps-usage

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Streamline the creation of multi-step user interfaces by coordinating Zag.js Steps with the UI Kit, enabling consistent, accessible, and maintainable wizard flows.

Core Features & Use Cases

  • Integrates Zag.js Steps with UI Kit components like Lists, Items, Panels, and Triggers to build guided workflows
  • Supports linear and non-linear step sequences, indicators, and navigation controls for onboarding, checkout, and setup flows
  • Provides reusable patterns to synchronize step state with content panels and transitions

Quick Start

Instantiate Steps with a count prop and paired Panels to build a multi-step wizard with navigation triggers.

Frequently Asked Questions about steps-usage

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a multi-step wizard workflow in React?

Build a multi-step wizard in React by instantiating Zag.js Steps with a count prop and pairing it with UI Kit Panels and navigation Triggers to coordinate step sequences and content display.

Can I create non-linear step navigation for a checkout flow?

Yes, you can create non-linear step navigation for checkout flows. The Steps integration supports both linear and non-linear sequences alongside indicators to guide users through optional or required stages.

What is the best way to synchronize step state with content panels?

The best way to synchronize step state with content panels is using the reusable patterns provided by the Steps Skill, which coordinate Zag.js step transitions with UI Kit panel visibility.

Does the Steps workflow component require external Zag.js references?

Yes, the Steps workflow component requires integration with external Zag.js references. It combines Zag.js state management with UI Kit Lists, Items, Panels, and Triggers to build accessible guided workflows.

When do I need a multi-step UI workflow for onboarding?

You need a multi-step UI workflow for onboarding when a process requires sequential user input across distinct stages. The Steps Skill coordinates these guided setup flows using indicators and navigation controls.