skills.rest
Spectaculous-Code
Spectaculous-CodeOFFICIAL
Explore all skills by this author →
GitHub

onboarding-architect

Manage user onboarding tours for the Raamattu Nyt application.

Updated Dec 19, 2025
Search Tags:#onboarding#user experience#admin panel#showcase#tour#guided tour
One-click install
npx skills add https://github.com/Spectaculous-Code/raamattu-nyt --skill onboarding-architect
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: onboarding-architect
Source: https://github.com/Spectaculous-Code/raamattu-nyt/tree/main/.claude/skills/onboarding-architect
Command: npx skills add https://github.com/Spectaculous-Code/raamattu-nyt --skill onboarding-architect

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill streamlines the creation, modification, and management of user onboarding tours within the Raamattu Nyt application, ensuring a smooth and guided user experience.

Core Features & Use Cases

  • Tour Creation & Modification: Define and update steps, images, and placement for both 'showcase' (fullscreen modal) and 'guided' (spotlight + tooltip) tour modes.
  • Admin Panel Integration: Manage tours, upload images, and configure guided tour elements through a dedicated admin interface.
  • Use Case: A product manager needs to add a new guided tour to explain the search functionality. They would use this Skill to define the tour steps, target specific UI elements, and add descriptive tooltips, then upload relevant images via the admin panel.

Quick Start

Use the onboarding-architect skill to add a new guided tour step targeting the element with the data-onboard attribute 'new-feature-button'.

Frequently Asked Questions about onboarding-architect

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

FAQPage Schema
How do I build a guided tour for a React application?▼

To build a guided tour for a React application, you define tour steps, target specific UI elements using data attributes, and add descriptive tooltips. This Skill manages both spotlight tooltips and fullscreen modal showcases.

What is the difference between a showcase tour and a guided tour?▼

A showcase tour displays a fullscreen modal, while a guided tour uses a spotlight effect with tooltips to highlight specific UI elements. This Skill supports configuring and overriding both modes via an admin panel.

Can I manage onboarding tour images using Supabase Storage?▼

Yes, you can manage onboarding tour images using Supabase Storage. This Skill integrates image uploading and management directly within the admin panel configuration interface for your tour steps.

How do I add a new step to an existing user onboarding tour?▼

To add a new step to a user onboarding tour, you use the admin panel to define the step, target a UI element with a data-onboard attribute, and configure the tooltip or image placement.

Does this user onboarding tour tool support i18n for localized content?▼

Yes, this user onboarding tour tool supports i18n for localized content. It integrates with React to provide internationalized step descriptions and tooltips for your application's user experience.

What's the best way to configure guided tour overrides for specific users?▼

The best way to configure guided tour overrides is through the dedicated admin interface. This Skill allows you to manage tours, upload images, and set specific element placements for tailored onboarding experiences.

Related Skills

Explore More Software Engineering Skills→
RaudbjornRaudbjorn
6

supabase-storage

Manage Supabase Storage buckets, files, URLs, and RLS policies.

Community
Advanced
ricardocidalericardocidale

Guided Tour / Walkthrough

Guide new users through an application interface with step-by-step interactive tours.

Community
Intermediate
sbsbhongsbsbhong

zustand

Adapt Zustand state management to json-render's StateStore for React Native JSON UI components.

Community
Intermediate
yohayetsionyohayetsion
4

demo

Walk through Product Org OS features including agent delegation and the V2V framework.

Community
Basic