Step 2 of 4

Automate the repetitive part

Rules live here. Start from a template and adjust the trigger — nothing runs until you enable it.

">

The prompt

Create a product-tour coachmark with Tailwind CSS: a mock toolbar with three buttons where the middle one is spotlighted by a ring. Anchored below it, a dark rounded popover positioned absolutely against the highlighted button, with an arrow notch made from a rotated square, a step counter such as "Step 2 of 4", a short title, a sentence of guidance, a row of four progress dots with the current one wider and lighter, and Skip tour plus Next actions. Because the popover is absolutely positioned it contributes no flow height, so add generous bottom padding on the wrapper to reserve room for it. Then add JavaScript holding the tour copy in an array so Next advances the counter, title, body, and dots, the last step reads Done, and either Done or Skip tour removes the coachmark.

Paste it into Claude, Cursor, v0 or any AI coding tool. Prefer the finished markup? .