skills.rest
Automattic
AutomatticOFFICIAL
Explore all skills by this author →
Website𝕏@automatticengGitHub

stepper-flow

Generates PR-ready Stepper signup flows in wp-calypso from plain-English descriptions.

12.6k|2.0k|Updated Nov 10, 2015
Search Tags:#playwright#Onboarding#typeScript#stepper#signup flow#wp-calypso#wordpress.com
One-click install
npx skills add https://github.com/Automattic/wp-calypso --skill stepper-flow
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: stepper-flow
Source: https://github.com/Automattic/wp-calypso/tree/main/.claude/skills/stepper-flow
Command: npx skills add https://github.com/Automattic/wp-calypso --skill stepper-flow

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Building a new Stepper signup flow in wp-calypso requires touching five separate files (flow constant, flow TypeScript, README, stylesheet, registration entry) and knowing framework rules like step slugs, required-login handling, and processing-step redirects. This Skill automates that entire process from a plain-English description while preventing common mistakes like inventing nonexistent steps or silently breaking checkout redirects.

Core Features & Use Cases

  • Guided flow design interview: Asks structured plain-English questions about flow name, user journey, login requirements, access gates, and step customizations before writing any code.
  • Step verification and honest guardrails: Maps the journey to existing STEPS.* constants, inspects each step's source for hardcoded behavior, and flags customizations that require an Engineering PR instead of generating broken code.
  • End-to-end validation: Runs the TypeScript compiler on generated files and drives a real browser via the Playwright MCP server to walk every flow branch, producing a TEST-REPORT.md with screenshots.
  • Use Case: A product manager wants a newsletter signup flow with goal selection, domain search, and a plans step showing only yearly billing. Describe it in plain English, confirm the preview, and receive all five PR-ready files plus a browser test report.

Quick Start

Ask the assistant to build a new Stepper signup flow, describing the flow name, target audience, and the steps users should walk through in plain English.

Frequently Asked Questions about stepper-flow

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

FAQPage Schema
How do I create a new Stepper signup flow in wp-calypso?▼

Describe the flow in plain English: its name, purpose, and the user journey step by step. The Skill maps your description to existing steps, shows a preview for confirmation, then writes the flow constant, TypeScript file, README, stylesheet, and registration entry.

Can I create custom steps for a WordPress.com Stepper flow?▼

No, this Skill only composes existing steps from steps.tsx and never creates new ones. If your journey needs a step that does not exist, it names the closest available step and asks whether that is acceptable.

Does the Stepper flow generator test the flow in a browser?▼

Yes, it uses the Playwright MCP server against calypso.localhost:3000 to walk every branch of the flow with a fresh test account. Results, screenshots, and any fixes are documented in a TEST-REPORT.md file inside the flow directory.

What happens if a step customization is not supported?▼

The Skill flags unsupported customizations in the preview instead of generating broken code. It provides exact request text to send to the #dotcom-stepper channel so Engineering can add the needed step prop first.

Why does my Stepper flow skip checkout after site creation?▼

Flows that create a site via the processing step must set __experimentalUseSessions and store plans dependencies with useFlowState before setPendingAction. Without this, the site is created with no plan in the cart and the checkout redirect silently fails.

Related Skills

Explore More Software Engineering Skills→
wpankwpank
11

persona-docs

Generate persona documentation with user profiles, needs, pain points, and journey maps.

Community
Intermediate
maxbeaudoinmaxbeaudoin

open-pr

Push the current branch, open a GitHub PR, wait for CI, and squash-merge into main.

Community
Advanced
syncfusionsyncfusion

syncfusion-angular-stepper

Implement Syncfusion Angular Stepper components for multi-step workflows with validation events and templates.

Official
Advanced
ChatbotXIOChatbotXIO
601

flow-step-development

Add state-based success, error, and skip routing to chatbot flow steps.

Official
Advanced